Scroll Scene #6

Component Structure

• SC6 COMPONENT (section): Central section that houses the entire scroll scene, configured with the class sc6__component for positioning and overflow handling.

• SC6 IMAGE (image): Background or standalone image element within the scene, utilizing the class sc6__image for absolute positioning and sizing.

• SC6 TEXT WRAPPER (block): Contains the animated text elements, using the class sc6__text-wrapper for center alignment.

• SC6 TEXT TOP & SC6 TEXT BOT (heading): Two distinct heading elements designed for the scrolling animation, labeled with sc6__text--top and sc6__text--bot respectively. These elements are styled for visibility and impact against the background.

Animation Structure

SC6 - SCROLL: Bricksforge animations that horizontally scroll the text from right to left across the component. The animations are set for both the top and bottom text elements, creating a parallel scrolling effect that adds depth to the scene.

• Top Text Animation: Moves sc6__text--top from 100% to -200% on the x-axis over 10 seconds.

• Bottom Text Animation: Similar to the top text, scrolls sc6__text--bot across the same path, ensuring both texts move in sync but are layered differently for visual effect.