> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/projects/projects-5.md).

# 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.