דילוג לתוכן הראשי
[attribute]While scrolling

לאיזה תוכןמוצר שאפשר לפרק לחלקים (משקה, מנה, מוצר טיפוח) / רקע אחיד בצבע של הסקשן / מלל קצר ליד

השאלהיש מוצר אחד שאפשר לצלם בחלקים, וסקשן שמציג אותו?

Parallax Mojito

הדוגמה היא הסצנה של דמו המוחיטו, מאותו קוד. מוצר אמיתי מפורק לחלקים, וכל חלק במרחק משלו. רק מרחקים, בלי fade ובלי מעבר: הסצנה עומדת במקום שלה ב-CSS, והגלילה מזיזה כל חלק כמה שנקבע לו.

מה יש בכוס

מוחיטו, חלק אחרי חלק

נענע טרייה, ליים, קרח כתוש וסודה. גוללים, וכל חלק זז במרחק משלו.

אותה סצנה, נעולה

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

מה יש בכוס

מוחיטו, חלק אחרי חלק

נענע טרייה, ליים, קרח כתוש וסודה. גוללים, וכל חלק זז במרחק משלו.

איך בונים

הבסיס, שתי שכבות: כל שכבה data-movement משלה. הרחוקה זזה מעט, הקרובה הרבה, וזה כל העומק.

<section class="relative overflow-clip">
  <img src="far.webp"  class="absolute …" data-movement="-60" />    <!-- far: small, slow -->
  <img src="near.webp" class="absolute …" data-movement="-320" />   <!-- near: big, fast -->
</section>
שכבהגודלמרחק
קדימהגדול, חדהכי הרבה, ואולי גם מסתובב
אמצעבינוניבינוני
אחורהקטן, קצת מטושטשמעט
המוצרבמרכזכמעט לא זז: העוגן של הסצנה
<section class="… bg-[#12301f]">              /* the pictures were shot on this very colour */
  <img src="glass.webp" data-movement="-40" />     /* the anchor */
  <img src="mint.webp"  data-movement="-320" data-scroll-rotate="40" />   /* in front */
  <img src="ice.webp"   data-movement="-110" class="blur-[2px]" />        /* behind */
</section>
  • התמונות: מצולמות על הצבע של הסקשן עצמו וחתוכות ממנו (cutout.cjs … auto), כך שאין הילה סביב החלקים.
  • המלל עומד: מה שנקרא לא זז, רק החלקים.
  • למעלה ולמטה: כל השכבות זזות על הציר האנכי. הצידה רק במקרה קיצון, כמו רכב שנוסע.
  • בטלפון המרחקים בחצי, מעצמם (data-movement).