Hero #10

Component Structure

• COPY WRAPPER (div): Serves as the base structure for Hero #10, encapsulating all elements.

• HR10 COMPONENT (section): The main visual area of Hero #10, identified by hr10__component, designed to fill the viewport height and center content.

• HR10 HEADLINE WRAPPER (div): Contains headline elements, using hr10__headline for styling, positioned centrally with flex display.

  • HR10 HEADLINE 1 (text-basic): The first part of the hero's message, marked by hr10__headline-1.

  • HR10 HEADLINE 2 (text-basic): Continues the hero's message, styled with hr10__headline-2.

• HR10 IMAGE WRAPPER (div): An artistic backdrop for the hero, hr10__img-wrapper, featuring a unique image that enhances the component's visual impact.

  • HR10 IMAGE (image): A central image, hr10__img, that plays a key role in the hero's design.

Animation Structure

HR10 - Scroll outlines the animations triggered by user scroll:

• Headlines Movement: Both .hr10__headline-1 and .hr10__headline-2 are animated to move horizontally off-screen, creating a dynamic effect that emphasizes the scrolling interaction.

• Image Animation: The .hr10__img-wrapper undergoes changes in clip-path value and rotation, scaling up for a dramatic reveal and rotation correction as the user scrolls through the component.