# 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.