Hero #9

Component Structure

• COPY WRAPPER (div): Provides a structural foundation for Hero #9.

• HR9 COMPONENT (section): The main section of the hero, characterized by hr9__component, organizing the layout and visual hierarchy of the content.

• HR9 CONTAINER (container): Central container, hr9__container, houses the hero's headline and descriptive text.

  • HR9 HEADING (heading): Displays the main message of the hero with hr9__heading.

  • HR9 TEXT (text-basic): Offers additional detail or context with hr9__text.

• HR9 GALLERY SPACER and WRAPPER (block/section): Constructs a space for the gallery hr9__gallery-spacer and hr9__gallery-wrapper, setting up the interactive image gallery.

• HR9 GALLERY (div): Comprises multiple sections, including overlay hr9__gallery-overlay, gallery images hr9__gallery-img, and inner gallery layout hr9__gallery-inner, which organizes the images into a coherent visual narrative.

Animation Structure

HR9 - Scroll:

• Engages the gallery overlay .hr9__gallery-overlay to become fully visible with clip-path adjustments as the user scrolls.

• Moves gallery sections .hr9__gallery-left and .hr9__gallery-right off-screen to emphasize the central images.

HR9 - Pageload:

• Animates elements within .hr9__container and .hr9__gallery-inner, gradually introducing them with vertical movement and opacity changes to draw attention to each piece of content.