דילוג לתוכן הראשי
<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

Building 1
Building 2
Interior 1
Skyline
Glass tower
Balconies
Street
Living room
Exterior

אחרי ה-Zoom

תוכן רגיל ממשיך מיד אחרי המסילה.