<Component />While scrollingsticky-basedירידת דור במובייל

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

השאלהיש מסר אחד שמתפתח ב-3 עד 4 משפטים קצרים?

Scroll Text Swap

Sticky stage עם משפטים שמתחלפים. כל שורה ב-overflow: hidden, ה-inner זז ב-translateY 110% → 0% → -110%. תמונות הרקע מתחלפות ב-fade בין items. רכיב מוכן לשימוש: UkScrollTextSwap.

<UkScrollTextSwap
  items={[
    { bg: '/sea.jpg',    lines: ['טיפוגרפיה טובה', 'לא שמים לב אליה.'] },
    { bg: '/desert.jpg', lines: ['כל שורה ניסוי.'] },
  ]}
/>

טיפוגרפיה טובה היא זו שלא שמים לב אליה,

רק לתחושה שהיא משאירה.

כל שורה כאן היא ניסוי קטן,

רק כדי להבין איך הטקסט זז.

מילים לא צריכות להיות בולטות,

מספיק שיהיו נכונות.

תמונה אחת עם פרלקס

bg נותן תמונה אחת לכל הבמה במקום תמונה לכל משפט, והיא עולה לאט עם הגלילה. המשפטים מתחלפים והעולם נשאר. bgDrift קובע כמה היא זזה, ב-vh (ברירת מחדל 16). בתוך שרשרת גלילה זו הבחירה הרגילה: סקיל scroll-chain.

<UkScrollTextSwap
  bg="/forest.jpg"
  bgDrift={16}
  items={[
    { lines: ['טיפוגרפיה טובה', 'לא שמים לב אליה.'] },
    { lines: ['כל שורה ניסוי.'] },
  ]}
/>

טיפוגרפיה טובה היא זו שלא שמים לב אליה,

רק לתחושה שהיא משאירה.

כל שורה כאן היא ניסוי קטן,

רק כדי להבין איך הטקסט זז.

מילים לא צריכות להיות בולטות,

מספיק שיהיו נכונות.

UkScrollTextSwap_random_text_vertical

אותו אפקט, מעבר אחר: שלוש תנועות לאותו כיוון בשלוש מהירויות. החלון נפתח מלמטה לכל גובה המסך, התמונה בתוכו והתמונה שמתחתיו זזות רק 15%, וכל אות עולה מה-mask בלי סדר. קומפוננטה נפרדת, לא prop של UkScrollTextSwap.

// app/docs/gsap/showpieces/scroll-text-swap/_UkScrollTextSwap_random_text_vertical.tsx
<UkScrollTextSwap_random_text_vertical
  slides={[
    { src: '/dunes.jpg', title: 'גוללים למטה' },
    { src: '/canyon.jpg', title: 'החלון נפתח' },
  ]}
/>

גוללים למטה

החלון נפתח

התמונה כמעט לא זזה

והאותיות בלי סדר

mister_potato

הרכבה, לא קומפוננטה

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

UkPushUnder: הסקשן הבא עולה מעל, והסקשן שמתחתיו עולה קצת
ParallaxImage: התמונה זזה לאט בתוך הסקשן
split_text_random_vertical: כל אות עולה מ-mask, בלי סדר, לפי הגלילה

<UkPushUnder rise="8vh" scaleTo={1} opacityTo={1}>
  <section className="scene">
    <ParallaxImage src="/dunes.jpg" className="scene__bg" />
    <h2 split_text_random_vertical="">קלף אחד עולה</h2>
  </section>
</UkPushUnder>

<section className="scene">
  <ParallaxImage src="/canyon.jpg" className="scene__bg" />
  <h2 split_text_random_vertical="">והבא עולה מעליו</h2>
</section>

קלף אחד עולה

והבא עולה מעליו

הדרך ארוכה

והנוף שווה אותה

אחרי ה-swap

משתחרר נטיבית.