WebGL
Shaders
מעברים בין שתי תמונות, בלי ספרייה: WebGL נקי, בלי three.js. אותו קוד עובד בכל מקום שיש בו מספר שזז מ-0 ל-1.
לנסות ביד
שיידר הוא פונקציה אחת שרצה על כל פיקסל: מקבלת שתי תמונות ו-progress, ומחזירה צבע. המחוון למטה הוא אותו מספר שהגלילה מזיזה בקומפוננטות.
טבעת מתרחבת מהאמצע, התמונות עושות זום דרכה
איפה זה משמש
UkShaderCross
בין שני סקשנים עם תמונת רקע מלאה. צמוד לגלילה. Shader Cross
<UkShaderCross from={{ src: "/a.jpg" }} to={{ src: "/b.jpg" }} shader="peel" />UkShaderReveal
תמונה שנכנסת פעם אחת כשהיא מגיעה למסך, מתוך צבע הרקע. לא צמוד לגלילה. בתחתית Shader Cross
<UkShaderReveal src="/a.jpg" shader="peel" className="aspect-[16/9] w-full rounded-uk" />UkStickyScenes
במה ליד טקסט שנגלל, מעבר בין כמה תמונות. צמוד לגלילה. Sticky Scenes
<UkStickyScenes items={items} transition="shader" shader="ripple" />רקע מונפש ל-hero הוא דבר אחר, בלי שתי תמונות: UkShaderBackdrop, ב-Headers.
12 השיידרים
| peel | הבאה נכנסת מהצד, שתי התמונות מתכווצות בדרך |
| peel-y | אותו פילינג, מלמטה |
| pixelize | שתיהן מתפרקות לריבועים באמצע המהלך ומתחברות |
| slices | פרוסות אנכיות חולפות על התמונה |
| wind | קצה קרוע עובר, שורה שורה |
| flyeye | עין זבוב: התמונה מתפרקת לתאים והצבעים נפרדים |
| squares | חזית אלכסונית של ריבועים שגדלים |
| stretch | התמונות נמתחות לאמצע, עם גרעין של רעש |
| morph-x | מורף נוזלי לפי תמונת רעש |
| morph-y | התמונות דוחפות זו את זו אנכית לפי הבהירות שלהן |
| ripple | טבעת מתרחבת מהאמצע, התמונות עושות זום דרכה |
| wave-x | קצה גלי רך חוצה, עם זום |
| horizonx-glass | שדה של דיסקיות זכוכית נפתח מלמטה, כל אחת מגדילה את מה שמאחוריה, ואז הן נמסות זו לזו (מהתבנית Cobalto של HorizonX) |
מה צריך לדעת
- הקוד:
components/shaders/UkShaderCross. כל שיידר הוא רשומה ב-shaders.ts, והטעינה והציור ב-shader-cross.ts. שיידר חדש הוא רשומה אחת, והוא מופיע בכל השימושים. - הרישיון: ה-GLSL הוא של SwiperGL (UI Initiative), Regular License: אפשר באתרים שלנו ושל לקוחות, ואסור למכור את הקוד עצמו.
- התמונות: באותו יחס, כי ההתאמה מחושבת לפי הראשונה. ואם הן לא באותו דומיין, השרת צריך לאפשר CORS.
- מגבלת הדפדפן: בערך 16 הקשרי WebGL לדף, ומעבר לזה הישן נזרק. לכן הקומפוננטות יוצרות הקשר רק קרוב למסך.
- בלי WebGL או עם reduced motion: crossfade רגיל או התמונה עצמה, כך ששום דבר לא נשבר.
