Bricksmotion Components
  • Getting Started
  • Setup
    • Where is my license key?
    • Activate you license within Bricksforge
  • Using components
    • Bricksforge One-Click
    • Bricks Structure
    • Activate "Event Panel"
    • Manual Importing Timelines and Events
    • Locked Classes
    • Reassign Timelines
    • Loading Conditions
  • Components
    • HEROES
      • Hero #1
      • Hero #2
      • Hero #3
      • Hero #4
      • Hero #5
      • Hero #6
      • Hero #7
      • Hero #8
      • Hero #9
      • Hero #10
    • SCROLL SCENES
      • Sticky Sections #1
      • Vertical Scroll #1
      • Scroll Scene #1
      • Scroll Scene #2
      • Scroll Scene #3
      • Scroll Scene #4
      • Scroll Scene #6
      • Scroll Scene #7
      • Scroll Scene #8
      • Scroll Scene #9
    • BUTTONS
      • Button #1
      • Button #2
      • Button #3
      • Button #4
      • Button #5
      • Button #6
      • Button #7
    • TABS
      • Tabs #3
      • Tabs #4
    • PROJECTS
      • Projects #1
      • Projects #2
      • Projects #3
      • Projects #4
      • Projects #5
      • Projects #6
      • Projects #7
    • CTA
      • CTA #1
      • CTA #2
    • CARDS
      • Cards #1
      • Cards #2
    • MENUS
      • Bottom Nav #1
      • Mega Menu #1
      • Full Screen Menu #2
      • Full Screen Menu #3
    • CUSTOM CURSORS
      • Custom Cursor #1
    • LOADING SCREENS
      • Loading Screen #1
      • Loading Screen #2
      • Loading Screen #3
    • TEXT
      • Text Hover #1
      • Split Text #2
    • IMAGE
      • Image Tilt #1
      • Image Reveal #1
      • Image Reveal #2
      • Image Reveal #3
    • PROGRESS BARS
      • Progress Bar #1
      • Progress Bar #2
Powered by GitBook
On this page
  • Component Structure
  • Animation Structure
  1. Components
  2. HEROES

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.

PreviousHero #8NextHero #10

Last updated 1 year ago