Projects #5

Component Structure

  • PR5 COMPONENT (section): The main container with class pr5__component, sets the positioning and background color.

  • PR5 CONTAINER (container): Encapsulates the projects, marked with pr5__container.

  • PR5 PROJECTS WRAP (block): Holds individual project items, using pr5__projects-wrap for layout.

  • PR5 PROJECTS ITEM (block): Individual project entries, styled with pr5__projects-item for relative positioning and padding.

  • PR5 PROJECTS IMG (div): Displays the project image with pr5__projects-img, positioned absolutely to cover the entire item background.

  • PR5 PROJECTS CONTENT (div): The content area for project titles and descriptions, identified by pr5__projects-content.

  • PR5 HEADING & PR5 DESC (heading, text-basic): Title and description of projects, using pr5__projects-heading and pr5__projects-descp for styling.

  • PR5 POPUP CONTENT (div): Contains the popup information shown on hover or click, using pr5__popup-content for positioning and layout.

Animation Structure

  • PR5 - PARALLAX: This timeline creates a parallax effect on the project background images and the content wrapper as users scroll through the page.

  • PR5 - OPEN POPUP: Triggers popup animations for the project items on hover, revealing additional information and a call-to-action button.

  • PR5 - OPEN POPUP (ML): A mobile-specific variant of the popup animation, tailored for touch interactions and smaller screens.

PreviousProjects #4NextProjects #6

Last updated