three.js

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

הסצנה כאן מצוירת ב-SVG, שבע שכבות. באתר אמיתי כל שכבה היא תמונה שקופה (PNG או WebP) שנחתכה מנוף שנוצר.

<div className="relative h-[80vh]">
  <UkDepthParallax
    haze="#f2b48c"
    travel={2}
    layers={[
      { src: '/sky.webp',    depth: 80, fog: false },
      { src: '/hills.png',   depth: 18 },
      { src: '/clouds.png',  depth: 3 },
    ]}
  />
</div>

• depth: המרחק מהמצלמה. 1 קרוב, 80 רחוק.
• rise: כמה המצלמה עולה בזמן שהקופסה חוצה את המסך (2 כברירת מחדל). זה הפרלקס של הגלילה: הגבעות הקרובות שוקעות מהר, והשמש עולה מאחוריהן.
• travel: כמה המצלמה מתקדמת בזמן שהקופסה חוצה את המסך. שכבה עם depth קטן ממנו, המצלמה עוברת דרכה.
• pointer: כמה המצלמה הולכת אחרי העכבר (0.6 כברירת מחדל, 0 = לא זזה).
• haze: צבע הערפל. fog: false בשכבה שהערפל לא נוגע בה, כמו השמיים.
• y ו-cover: הזזה למעלה או למטה, וכמה השכבה גדולה מהמסך בעומק שלה.

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

שתי דוגמאות HELLO WORLD, שאולי הן גם ארסנל, קודם כל כקונספט. פרלקס הוא בדרך כלל סצנה, וההבדל הוא שעוברים מסצנה 1 לסצנה 2 כי תנועה בגלילה שינתה את המציאות.

1. ממתין לקישור
2. ממתין לקישור