דילוג לתוכן הראשי
Reference · October 2026

HorizonX

חמש תבניות של HorizonX מאוקטובר 2026, ממבט על: הקונספט, האווירה, ואיך הסיפור נכנס בגלילה. לרמת האפקט, או לשילוב של אפקטים, נרד אחר כך. הקבצים: codepens/horizonx october 26.

חסר בקיט

מנגנון פרלקס

יש לנו אפקט פרלקס (ParallaxImage: תמונה שזזה בתוך המסגרת שלה) ו-data-movement לאלמנט בודד, אבל אין גישה לשלב אותו: מנגנון שמרכיב סצנה של שכבות, כל שכבה במהירות שלה, ושעמוד פותח בכמה שורות. נבנה לזה מנגנון. חלק מהדוגמאות כאן, העננים למשל, הן הסוף: אחרי שנטפל בזה.

#hx-kai

Kai Rennard

פורטפוליו של נהג מרוצים בדיוני

העברה בוצעה 05/11/2026

#hx-lumora

Lumora

hero לסטודיו, לא דף שלם

הקונספט
שובל זוהר שהולך אחרי העכבר בכל הדף, ובמקום שהוא עובר על הפורטרט מתגלה גרסה שנייה שלו.
האווירה
אפור רך, ליים, ירוק אזמרגד, כרטיס מעוגל אחד.
הסיפור בגלילה
  • אין סיפור בגלילה: זו אינטראקציה. בלי עכבר לא זז כלום.
  • במעבר עכבר כל כפתור וכרטיס מתהפך לצד השני של הפלטה.
כניסות
אין.

#hx-common

מה חוזר אצל כולן

  1. נושא אחד לכל הדף, והגלילה מספרת אותו. נסיעה לפריז, קריירה של נהג, סטודיו כעולם אחד. לא שורה של סקשנים.
  2. הלואדר הוא הפתיחה. ב-Kai הוא נפתח כחלון לתוך ה-hero, ב-Cobalto הסימן מתמלא עם מונה. לא מסך המתנה.
  3. אלמנט אחד שנשאר ומשתנה. כרטיס הפורטרט של Kai, הסצנה של VELUNE ו-Cobalto: הטקסט מתחלף, הבמה נשארת.
  4. הרקע משנה צבע בתוך הסקשן. Kai: דיו, ערפל, עצם. Cobalto: משקיעה לבוקר. והכותרת מתחלפת איתו.
  5. לטקסט יש כניסה עם אופי. גוש שמכסה שורה, מכונת כתיבה, מילוי שורה אחר שורה, חתימה שנכתבת. לא fade-up.
  6. עומק בשכבות. ה-hero של KILN, הקולאז' והקולקציה של Kai: כל שכבה במהירות שלה. זה המנגנון שחסר לנו.
  7. מעט טקסט, הרבה תמונה. בכל החמש.

#hx-next

אחר כך: רמת האפקט

מה יש בהן, ומה הכי קרוב אצלנו. נבדק מול הקוד לפני שבונים, שורה אחרי שורה.

האפקטאיפהאצלנו
שכבות בכמה מהירויותKILN, Kaiאין. ParallaxImage ו-data-movement הם לאלמנט אחד
רקע שמשנה צבע בגלילהKaidata-body-theme, Colour Shift
מילוי שורה אחר שורהKILNsplit="fill"
גוש שמכסה שורה ויוצא, מכונת כתיבהKaiאין
פרקי טקסט מעל במה אחתVELUNE, CobaltoUkChapters (וידאו או Lottie במקום רצף תמונות)
סצנה שננעצת ודוהה מתחת לבאהKILNUkPushUnder
כרטיס שמתכווץ לכרטיס אחרKaiאין
קצה מעוגל שמתיישר כשהסקשן עולהKILN, Kaiאין
מרקי שמאיץ עם מהירות הגלילהKaiאין
ערימה שמתהפכת בתלת-ממדKILNאין
התיישבות על הסצנה הקרובהCobaltoאין (בכוונה: דף נעול נקרא כגלילה מתה)