Scroll Scene #2

Component Structure

• COPY WRAPPER (div): Establishes the foundation for Scroll Scene #2, encapsulating all subsequent elements.

• SC2 COMPONENT (block): This primary container, styled with .sc2__component, sets the scene for the interactive scroll experience by defining the viewport height, content alignment, and managing overflow.

• SC2 WRAPPER (block): At the heart of the component's design, this wrapper, identified by .sc2__wrapper, aligns and justifies the content centrally with an applied rotation, offering a unique visual arrangement.

• SC2 IMAGE WRAPPERS (blocks): Multiple wrappers such as .sc2__img-wrapper, organize the images in a row format, enabling a staggered animation effect upon scrolling. These elements bring to life the geometric layout through varied directional animations, enhancing the depth and engagement of the scene.

• SC2 IMAGES (images): Placed within the image wrappers, these images, marked by .sc2__img, are set for eager loading, ensuring immediate visibility. Their responsive scaling across devices maintains the visual integrity of the component.

Animation Structure

SC2 - Scroll: This animation sequence, initiated upon scrolling, meticulously arranges the movement of images to complement the component's geometric aesthetics.

• Odd Image Wrappers: Images from odd-numbered wrappers transition from the screen's center to the left, employing a dynamic visual draw that captivates the viewer's attention.

• Even Image Wrappers: Conversely, images from even-numbered wrappers move from the right towards the center, establishing a visual balance and sustaining user interest through the scroll.