Scroll Scene #3

SC3 COMPONENT (.sc3__component - section): Acts as the primary container, ensuring content alignment from the start with hidden overflow. It's crafted to support extended scrolling with a minimum height of 500vh.
SC3 HEADING WRAPPER (.sc3__heading-wrapper - div): This flex container spreads across more than 400vw in width, housing the headline in the center of a viewport that's 100svh tall.
SC3 HEADING (.sc3__heading - heading): Emphasizes the main headline in a large font size (15vw), making it uppercase for impact. It is absolutely positioned to remain at the forefront of other content.
SC3 IMAGE HOLDER (.sc3__image-holder - div): Aligns images in a column, centering them across the viewport and ensuring they stretch appropriately in different orientations.
SC3 IMAGE WRAPPER (.sc3__image-wrapper - block): Centers and vertically distributes images within the viewport, providing a structured visual narrative.
SC3 IMAGE (.sc3__image - image): Individual images are set to cover their allocated space, with their max-width adjusted responsively to maintain consistency across viewing modes.

SC3 - Scroll: Animates the .sc3__heading-wrapper and .sc3__image-holder, moving the former horizontally and the latter vertically off-screen, alongside transitioning the background color to black. This creates a layered visual effect as the user scrolls.
SC3 - SCROLL SPEED: Implements a custom JavaScript function to adjust the .sc3__heading's skew based on scroll speed dynamically. This nuanced animation enhances the scroll experience by adding an interactive element that reacts to user input, all while ensuring smooth performance.

Last updated 1 year ago

SC3 COMPONENT (.sc3__component - section): Acts as the primary container, ensuring content alignment from the start with hidden overflow. It's crafted to support extended scrolling with a minimum height of 500vh.
SC3 HEADING WRAPPER (.sc3__heading-wrapper - div): This flex container spreads across more than 400vw in width, housing the headline in the center of a viewport that's 100svh tall.
SC3 HEADING (.sc3__heading - heading): Emphasizes the main headline in a large font size (15vw), making it uppercase for impact. It is absolutely positioned to remain at the forefront of other content.
SC3 IMAGE HOLDER (.sc3__image-holder - div): Aligns images in a column, centering them across the viewport and ensuring they stretch appropriately in different orientations.
SC3 IMAGE WRAPPER (.sc3__image-wrapper - block): Centers and vertically distributes images within the viewport, providing a structured visual narrative.
SC3 IMAGE (.sc3__image - image): Individual images are set to cover their allocated space, with their max-width adjusted responsively to maintain consistency across viewing modes.

SC3 - Scroll: Animates the .sc3__heading-wrapper and .sc3__image-holder, moving the former horizontally and the latter vertically off-screen, alongside transitioning the background color to black. This creates a layered visual effect as the user scrolls.
SC3 - SCROLL SPEED: Implements a custom JavaScript function to adjust the .sc3__heading's skew based on scroll speed dynamically. This nuanced animation enhances the scroll experience by adding an interactive element that reacts to user input, all while ensuring smooth performance.

Last updated 1 year ago