Scroll Scene #8

Component Structure

SC8 COMPONENT (Section)

• Class: sc8__component

• This main section serves as the container for the entire scroll scene, incorporating various subcomponents to create a complex interactive experience.

SC8 PIN (Block)

• Classes: sc8__pinned

• This block is designed to be pinned during the scroll interaction, serving as the stage for other animated elements. It includes multiple background image wrappers and the main content container.

SC8 BG IMG WRAPPER (Blocks)

• Class: sc8__image-wrap

• Each wrapper block contains one of several background images that contribute to the visual depth of the scene.

SC8 BG IMG (Images)

• Class: sc8__img

• These images are positioned absolutely within their respective wrappers, filling the viewport to form a layered background effect.

SC8 CONTAINER (Container)

• Class: sc8__container

• Hosts the main interactive content of the scene, including textual information and control indicators.

SC8 INDICATOR GRID (Div)

• Class: sc8__indicator-grid

• Displays a set of interactive indicators that visually represent the scroll progress through the scene.

SC8 INDICATOR TRACK & BAR (Divs)

• Classes: sc8__indicator--track, sc8__indicator--bar

• Tracks are the base for the indicators, with bars showing the progression as the user scrolls.

SC8 CONTENT (Block)

• Class: sc8__content

• Contains the main narrative or informative text along with additional images that further detail the scene's thematic elements.

SC8 TEXT WRAPPER (Block)

• Class: sc8__text-wrapper

• Wraps the main text content of the scene, enhancing readability and focus.

SC8 CONTENT IMAGES (Block)

• Class: sc8__content--images

• Hosts supplementary images that are revealed or highlighted as part of the scroll interaction.

Animation Structure

Timeline 1: SC8 - PIN

• This timeline manages the pinning behavior of the .sc8__pinned area, ensuring that it stays in view while other animations play out as the user scrolls.

Timeline 2: SC8 - INFO

• Animates the text within the .sc8__info class, enhancing visibility and engagement through opacity transitions and perspective plays.

Timeline 3: SC8 - BG IMG

• Focuses on the .sc8__img elements, applying fade-in effects to transition between background images smoothly.

Timeline 4: SC8 - INDICATOR

• Controls the animation of the .sc8__indicator--bar, filling in the track as the user scrolls to visually represent reading progress or scroll depth.