# Projects #4

### Component Structure

* **PR4 - COMPONENT (section):** Contains the entire component, utilizing `pr4__component` for vertical centering and viewport height adjustment.
* **PR4 - CONTAINER (container):** Direct child of the component, organized with `pr4__container`.
* **PR4 - ITEM (block):** Individual project items, styled with `pr4__item`. Includes a title and an overlay for dynamic banner animation.
* **PR4 - HEADING (heading):** Displays project titles within each item, applying `pr4__title`.
* **PR4 - OVERLAY (block):** An overlay block within each item, showing the scrolling banner, styled with `pr4__overlay`.
* **PR4 - BANNER WRAPPER & BANNER INNER (div):** Containers for the scrolling text, use `pr4__banner-wrapper` and `pr4__banner-inner` for layout and animation.

### Animation Structure

**PR4 - BANNER:** A looping animation that automatically scrolls the banner content horizontally, from right to left, across the overlay area of each project item. It triggers on page load, creating a continuous movement effect for the banners.

* **Initial Position:** Sets the starting point of the banner to `x: 0%`.
* **Scrolling Animation:** Moves the banner to `x: -100%` over 10 seconds, repeating indefinitely to achieve a marquee effect.
