Scroll Scene #9

Component Structure

• SC9 COMPONENT (Section): This is the primary container of the component, characterized by the sc9__component CSS class. It sets up the component with a relative position, ensuring its contents are centrally justified and aligned, with a specified height and overflow behavior.

• SC9 SCROLL WRAPPER (Div): Directly within the SC9 COMPONENT, this wrapper facilitates the scroll effect for its child elements. It employs absolute positioning to overlay content and uses flexbox to center its children both vertically and horizontally. The sc9__scroll-wrapper class ensures the scroll wrapper takes up the full viewport height and width.

• SC9 IMAGE (SCALE) (Image): An image element scaled for effect, positioned absolutely to act as a dynamic background or feature within the scroll scene. The sc9__image class applies extensive scaling, transforming, and positioning properties to achieve a visually engaging effect as part of the scroll animation.

• SC9 HEADING (Heading): A central headline element within the SC9 SCROLL WRAPPER, designed to grab attention with converting content. It's styled using the sc9__heading class, which adjusts font size and z-index for prominence.

• SC9 IMAGE (BG) (Image): Serves as a static or less dynamically manipulated background element, enhancing the visual depth of the scroll scene with its unique styling provided by the sc9__image-2 class.

• SC9 CONTAINER (Container): Encapsulates the SC9 CONTENT (GRID), providing a structural framework with specific alignment and positioning settings through the sc9__container class.

• SC9 CONTENT (GRID) (Block): This grid houses individual columns of content, utilizing the sc9__content class to arrange items via CSS Grid layout techniques, ensuring responsive adjustment across various screen sizes.

• SC9 COL (Block): Represents individual columns within the grid, each containing a heading and text block to outline different features or elements of the component. The sc9__col class provides background color and layout properties, ensuring content is well-presented.

• SC9 CONTENT H (Heading) & SC9 CONTENT T (Text-Basic): Textual content within each column, offering descriptive or supplementary information, styled respectively with sc9__content--heading and sc9__content--text classes for consistency and readability.

Animation Structure

For the "Scroll Scene #9" component, two specific timelines have been designed to cater to varying viewport sizes, enriching the user interaction through animations.

Timeline 1 (Mobile):

• Scale Animation on .sc9__image: This animation progressively scales down the image from its original size to 23% of that size, creating a zoom-out effect as the user scrolls through the section.

• Scale Down of .sc9__heading: The heading undergoes a reduction in scale to 50%, making it less dominant on the screen and allowing other elements to come into focus.

• Opacity and Position Adjustment for .sc9__col: Content columns fade in from 0% to 100% opacity while moving from a slight upward position to their original position, adding a smooth entrance effect for each feature column.

• Visibility Transition for .sc9__image-2: A background image transitions from fully transparent (invisible) to fully opaque, adding depth to the scroll scene as the user progresses.

• Color Transition in .sc9__heading: The heading's color changes to white, and words stagger into view, enhancing readability against the background as the scroll action unfolds.

Timeline 2:

• Width Transition for .sc9__image: Adjusts the width from a significantly larger value to a smaller one, tailored for a more dramatic effect in non-mobile views.

• Scale and Position Adjustment for .sc9__heading and .sc9__col: Similar to the mobile timeline but designed for a broader viewport. The columns may also experience a horizontal movement based on their order, introducing a layer of dynamic positioning as they become visible.

• Opacity Transition for .sc9__image-2: This secondary image becomes fully visible at a specific scroll point, enriching the visual storytelling of the scroll scene.