<Component />While scrollingsticky-basedירידת דור במובייל
לאיזה תוכןגלריה / 9 תמונות באותה רמה, האמצעית הכי חזקה / מלל קצר אחרי
השאלהיש גלריה של 9 תמונות באותה רמה, ואחת חזקה במיוחד לאמצע?
Zoom-Out 9-Photo Grid
תשע תמונות, מתחילות בזום 3.3 על התמונה האמצעית ויוצאות לגריד מלא עם סיבוב קל, ואז הגריד נעלם והתוכן עולה. הסקשן הוא מסילה של שלושה מסכים והפאנל בתוכה sticky, ו-GSAP רק מריץ את ה-timeline על הגלילה. רכיב: ZoomOutNinePhotosGrid.
<ZoomOutNinePhotosGrid
images={nineImages}
renderContent={() => <MyOverlay />}
/>
/* scroll length (default 200svh) */
--uk-zoom-out-distance: 200svh;
/* where the pane stops: by itself under a navbar that stays on screen
(UkNavbar fixed / sticky), else 0. Override only for something else. */
--uk-zoom-out-top: 0px;Grid Demo
Content fades in as grid zooms out
אחרי ה-Zoom
תוכן רגיל ממשיך מיד אחרי המסילה.
