Shader Cross
שני סקשנים עם תמונת רקע מלאה, אחד מעל השני. במקום קו חיתוך ביניהם, התמונה של הראשון נאכלת לתמונה של השני בזמן הגלילה, באפקט WebGL. המלל של כל סקשן יושב מעל התמונה שלו ומתחלף באותו מהלך. למטה כל אחד מ-13 האפקטים פעם אחת, עם סקשן מפריד לפניו שאומר איך קוראים לו.
peel
הבאה נכנסת מהצד, שתי התמונות מתכווצות בדרך
לפני
אחרי
peel-y
אותו פילינג, מלמטה
לפני
אחרי
pixelize
שתיהן מתפרקות לריבועים באמצע המהלך ומתחברות
לפני
אחרי
slices
פרוסות אנכיות חולפות על התמונה
לפני
אחרי
wind
קצה קרוע עובר, שורה שורה
לפני
אחרי
flyeye
עין זבוב: התמונה מתפרקת לתאים והצבעים נפרדים
לפני
אחרי
squares
חזית אלכסונית של ריבועים שגדלים
לפני
אחרי
stretch
התמונות נמתחות לאמצע, עם גרעין של רעש
לפני
אחרי
morph-x
מורף נוזלי לפי תמונת רעש
לפני
אחרי
morph-y
התמונות דוחפות זו את זו אנכית לפי הבהירות שלהן
לפני
אחרי
ripple
טבעת מתרחבת מהאמצע, התמונות עושות זום דרכה
לפני
אחרי
wave-x
קצה גלי רך חוצה, עם זום
לפני
אחרי
horizonx-glass
שדה של דיסקיות זכוכית נפתח מלמטה, כל אחת מגדילה את מה שמאחוריה, ואז הן נמסות זו לזו (מהתבנית Cobalto של HorizonX)
לפני
אחרי
UkShaderReveal: אותם אפקטים, פעם אחת בכניסה
כמו Clip Reveal: תמונה רגילה בזרימת הדף, בכל גודל, שמנגנת את האפקט פעם אחת כשהיא נכנסת למסך, מצבע הרקע של הדף אל התמונה. בלי סטיקי. גדול, ואז בגודל כרטיס.
peel
peel-y
pixelize
slices
wind
flyeye
squares
stretch
morph-x
morph-y
ripple
wave-x
horizonx-glass
import { UkShaderReveal } from '@/components/shaders/UkShaderCross'
<UkShaderReveal src="/a.jpg" shader="peel" className="aspect-[16/9] w-full rounded-uk" />
// from="#111" the ground it grows out of (default: the page's --background)
// duration seconds, default 1.2
// delay seconds once in view (a stagger in a row)
// start 'top 70%' by default, where on the screen it beginsאיך זה בנוי
מסלול בגובה מסך + length של גלילה; בתוכו פריים דביק (CSS sticky, בלי pin) עם קנבס WebGL אחד ושתי התמונות כטקסטורות. ScrollTrigger רק מזיז את progress מ-0 ל-1, והשיידר מערבב. הקנבס מצויר רק כשהערך משתנה, לא בלולאה. בלי WebGL או עם reduced motion: שתי התמונות בקרוספייד רגיל מאותו ערך.
import UkShaderCross from '@/components/shaders/UkShaderCross'
<UkShaderCross
shader="peel" // one of the names above
length="120svh" // the scrolling the move takes
from={{ src: '/a.jpg' }} // section A's picture (both pictures share a ratio)
to={{ src: '/b.jpg' }} // section B's picture
a={<>…A's copy…</>} // leaves in the first third
b={<>…B's copy…</>} // arrives in the last third
/>מתאים לשתי תמונות רקע מלאות עם מעט מלל על כל אחת; לא לשני סקשנים לבנים, ולא ליד Morph או Push Under על אותו תפר.
