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.