Last updated
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.
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.
Last updated