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 and Interaction Details
  • Events
  1. Components
  2. PROJECTS

Projects #2

Component Structure

  • PR2 COMPONENT: The main container for the portfolio items, setting the visual and functional context.

  • PR2 CONTAINER: Organizes the portfolio items within a user-friendly layout.

  • PR2 CURSOR & ICON: Custom cursor elements that enhance the interactive experience, changing in appearance based on user actions.

  • PR2 ITEM: Individual project display blocks containing images, titles, and interactive elements.

Animation and Interaction Details

  • PR2 - Item Hover: Engages users with scale animations and font size adjustments for project titles upon hover, visually emphasizing the hovered item.

Events

  1. CURSOR - MOUSEENTER : Triggers the custom cursor's appearance within the project container, ensuring it's visible and ready for interaction.

  2. CURSOR - MOUSELEAVE: Hides the custom cursor and optionally modifies its scale when the user's mouse leaves the project container, ensuring the cursor is only visible during direct interaction.

  3. CURSOR - MOUSEMOVE : Moves the custom cursor in accordance with the user's mouse movements, providing a fluid and responsive interaction within the project container.

  4. TOGGLE CLASS - MOUSEENTER: Applies a class to project items upon mouse entry, highlighting the current item for a more dynamic interaction.

  5. TOGGLE CLASS - MOUSELEAVE : Removes a specified class from project items when the cursor leaves, reverting them to their default state and visually indicating they are no longer the focus of interaction.

  6. CURSOR - SET: Sets the initial state of the custom cursor to hidden upon page load, ensuring it appears only during specific interactions for a cleaner user experience.

PreviousProjects #1NextProjects #3

Last updated 1 year ago