Scroll Scene #7

Component Structure

• SC7 COMPONENT (section): The primary container fixed in the viewport with a class sc7__component, which holds the entire scene.

• SC7 IMG CONTENT (div): Direct child of the SC7 component, styled with sc7__img-content, serving as the main content area where the images are laid out.

• SC7 IMG COL (div): Columns within the image content area, distinguished by sc7__img-col, which organize the images vertically.

• SC7 IMG WRAPPER (div): Each image is wrapped in this div, sc7__img-wrapper, to apply consistent styling and animation effects.

• SC7 IMG (image): Individual images within the wrappers, applying a cover fit with sc7__img to ensure full coverage and visual impact.

Animation Structure

SC7 - IMG SCROLL: A collection of animations applied to the SC7 component and its child elements to create engaging scroll-triggered effects:

• Vertical Motion: Odd and even image columns move in opposite directions (y: "-10%" to "10%" and vice versa) to add depth.

• Scaling Effect: The entire image content area slightly scales up (scale: 1.1 to 1) for a subtle zoom effect as the user starts scrolling.

• Opacity Change: Introduces a fade-in effect from opacity: 0.3 to 1, making the images emerge gracefully on scroll.