Hero #6

Component Structure

• COPY WRAPPER (div): Encapsulates the Hero #6 component, organizing its structure without applying specific styling.

• HR6 COMPONENT (section): Acts as the main section, using the class hr6__component to ensure full viewport height coverage and central alignment of the content.

• HR6 CONTAINER (container): Directly contains the hero's main elements, marked with hr6__container for content alignment and positioning.

  • HR6 CONTENT (div): Central content area containing the headline, text, and button, structured for optimal readability and user engagement.

    • HR6 HEADLINE (heading): Delivers the key message with impactful typography.

    • HR6 TEXT (text-basic): Provides additional information or context.

    • HR6 BUTTON (button): Encourages user interaction with a clear call-to-action.

• HR6 IMAGE WRAPPERS (div): Multiple wrappers (hr6__image-wrapper1, hr6__image-wrapper2, hr6__image-wrapper3) contain various images, positioned and styled to complement the hero's content and add visual depth.

Animation Structure

• HR6 - PAGELOAD:

  • Targets .hr6__content > * and .hr6__image for initial visibility and position animations, enhancing the content's entrance on the webpage.

• HR6 - SCROLL:

  • Activates scroll-triggered animations for .hr6__image-wrapper1, .hr6__image-wrapper2, and .hr6__image-wrapper3, moving the images vertically to create an immersive parallax effect. The animations vary in duration and effect, contributing to a dynamic and engaging user experience as they scroll through the hero section.