HorizonX
חמש תבניות של HorizonX מאוקטובר 2026, ממבט על: הקונספט, האווירה, ואיך הסיפור נכנס בגלילה. לרמת האפקט, או לשילוב של אפקטים, נרד אחר כך. הקבצים: codepens/horizonx october 26.
חסר בקיט
מנגנון פרלקס
יש לנו אפקט פרלקס (ParallaxImage: תמונה שזזה בתוך המסגרת שלה) ו-data-movement לאלמנט בודד, אבל אין גישה לשלב אותו: מנגנון שמרכיב סצנה של שכבות, כל שכבה במהירות שלה, ושעמוד פותח בכמה שורות. נבנה לזה מנגנון. חלק מהדוגמאות כאן, העננים למשל, הן הסוף: אחרי שנטפל בזה.
#hx-kai
Kai Rennard
פורטפוליו של נהג מרוצים בדיוני
העברה בוצעה 05/11/2026
#hx-kiln
KILN
פורטפוליו של סטודיו
העברה בוצעה 05/11/2026
#hx-cobalto
Cobalto
סטודיו כעולם תלת-ממד אחד
העברה בוצעה 05/11/2026
#hx-velune
VELUNE
דף נחיתה לנסיעה לפריז
העברה בוצעה 05/11/2026
#hx-lumora
Lumora
hero לסטודיו, לא דף שלם
- הקונספט
- שובל זוהר שהולך אחרי העכבר בכל הדף, ובמקום שהוא עובר על הפורטרט מתגלה גרסה שנייה שלו.
- האווירה
- אפור רך, ליים, ירוק אזמרגד, כרטיס מעוגל אחד.
- הסיפור בגלילה
- אין סיפור בגלילה: זו אינטראקציה. בלי עכבר לא זז כלום.
- במעבר עכבר כל כפתור וכרטיס מתהפך לצד השני של הפלטה.
- כניסות
- אין.
#hx-common
מה חוזר אצל כולן
- נושא אחד לכל הדף, והגלילה מספרת אותו. נסיעה לפריז, קריירה של נהג, סטודיו כעולם אחד. לא שורה של סקשנים.
- הלואדר הוא הפתיחה. ב-Kai הוא נפתח כחלון לתוך ה-hero, ב-Cobalto הסימן מתמלא עם מונה. לא מסך המתנה.
- אלמנט אחד שנשאר ומשתנה. כרטיס הפורטרט של Kai, הסצנה של VELUNE ו-Cobalto: הטקסט מתחלף, הבמה נשארת.
- הרקע משנה צבע בתוך הסקשן. Kai: דיו, ערפל, עצם. Cobalto: משקיעה לבוקר. והכותרת מתחלפת איתו.
- לטקסט יש כניסה עם אופי. גוש שמכסה שורה, מכונת כתיבה, מילוי שורה אחר שורה, חתימה שנכתבת. לא fade-up.
- עומק בשכבות. ה-hero של KILN, הקולאז' והקולקציה של Kai: כל שכבה במהירות שלה. זה המנגנון שחסר לנו.
- מעט טקסט, הרבה תמונה. בכל החמש.
#hx-next
אחר כך: רמת האפקט
מה יש בהן, ומה הכי קרוב אצלנו. נבדק מול הקוד לפני שבונים, שורה אחרי שורה.
| האפקט | איפה | אצלנו |
|---|---|---|
| שכבות בכמה מהירויות | KILN, Kai | אין. ParallaxImage ו-data-movement הם לאלמנט אחד |
| רקע שמשנה צבע בגלילה | Kai | data-body-theme, Colour Shift |
| מילוי שורה אחר שורה | KILN | split="fill" |
| גוש שמכסה שורה ויוצא, מכונת כתיבה | Kai | אין |
| פרקי טקסט מעל במה אחת | VELUNE, Cobalto | UkChapters (וידאו או Lottie במקום רצף תמונות) |
| סצנה שננעצת ודוהה מתחת לבאה | KILN | UkPushUnder |
| כרטיס שמתכווץ לכרטיס אחר | Kai | אין |
| קצה מעוגל שמתיישר כשהסקשן עולה | KILN, Kai | אין |
| מרקי שמאיץ עם מהירות הגלילה | Kai | אין |
| ערימה שמתהפכת בתלת-ממד | KILN | אין |
| התיישבות על הסצנה הקרובה | Cobalto | אין (בכוונה: דף נעול נקרא כגלילה מתה) |
