Fit to Target

תמונה שעוברת מסקשן לסקשן: גוללים, והתמונה הגדולה של ההירו "עפה" למטה, מתכווצת ונוחתת בתוך מסגרת ריקה בסקשן הבא (למשל התמונה של "אודות"). זה לא שתי תמונות, זו אותה תמונה שעוברת ממקום למקום.

An image flies out of its section while it scrolls away and lands in an empty frame further down, filling it: the hero picture becomes the about picture.data-fit-to="about" on the image's wrapper (it keeps the place; give it a size), data-fit-target="about" on the empty frame (give it a size too); the name pairs them. The flight runs while the wrapper's <section> scrolls away, and the picture ends at the frame's width and height with object-fit: cover, whatever the two proportions. A different picture on arrival: make the first child a box of two images and mark the second data-fit-end; it fades in over the last part of the flight (example 2). Every screen. On a phone the picture holds a line near the top while the frame comes up under it, so put the frame right after the picture there (max-[959px]:-order-1): copy in between would pass under it. Nothing positioned with a z-index above 2 in between, or the picture passes under it.

<section>
  <div data-fit-to="about" class="aspect-21/9"><img src="…" /></div>
</section>
<section>
  <div data-fit-target="about" class="aspect-4/5 rounded-2xl"></div>
</section>

כל פרויקט מתחיל בתמונה אחת.