Scroll Scene #1

Component Structure

• COPY WRAPPER (div): A container that wraps around the entire Scroll Scene #1, providing a structured environment for the component.

• SC1 COMPONENT (section): The primary section that serves as the visual stage for the scroll scene, identified by sc1__component, it's set to fill the viewport height and center its content.

• SC1 IMAGE WRAPPERs (block): Two sets of sc1__img-wrapper, differentiated by their child positioning (odd and even), hold the images in a row formation, enabling the scroll-triggered animation effect.

  • SC1 IMAGEs (image): Individual images within each wrapper, marked by sc1__img, which will move based on the scroll animations applied.

Animation Structure

SC1 - Scroll animation details the behavior of the images upon scrolling:

• Odd Images Animation: Targets .sc1__img-wrapper:nth-child(odd) elements, moving them from their original position to -100% on the x-axis, simulating a leftward slide-out effect.

• Even Images Animation: Affects .sc1__img-wrapper:nth-child(even) elements, initially positioned at -100% and moving to 0% on the x-axis, creating a rightward slide-in effect as the user scrolls.