# Scroll Scene #3

### Component Structure

* **SC3 COMPONENT (.sc3\_\_component - section)**: Acts as the primary container, ensuring content alignment from the start with hidden overflow. It's crafted to support extended scrolling with a minimum height of 500vh.
* **SC3 HEADING WRAPPER (.sc3\_\_heading-wrapper - div)**: This flex container spreads across more than 400vw in width, housing the headline in the center of a viewport that's 100svh tall.
* **SC3 HEADING (.sc3\_\_heading - heading)**: Emphasizes the main headline in a large font size (15vw), making it uppercase for impact. It is absolutely positioned to remain at the forefront of other content.
* **SC3 IMAGE HOLDER (.sc3\_\_image-holder - div)**: Aligns images in a column, centering them across the viewport and ensuring they stretch appropriately in different orientations.
* **SC3 IMAGE WRAPPER (.sc3\_\_image-wrapper - block)**: Centers and vertically distributes images within the viewport, providing a structured visual narrative.
* **SC3 IMAGE (.sc3\_\_image - image)**: Individual images are set to cover their allocated space, with their max-width adjusted responsively to maintain consistency across viewing modes.

### Animation Structure

* **SC3 - Scroll**: Animates the .sc3\_\_heading-wrapper and .sc3\_\_image-holder, moving the former horizontally and the latter vertically off-screen, alongside transitioning the background color to black. This creates a layered visual effect as the user scrolls.
* **SC3 - SCROLL SPEED**: Implements a custom JavaScript function to adjust the .sc3\_\_heading's skew based on scroll speed dynamically. This nuanced animation enhances the scroll experience by adding an interactive element that reacts to user input, all while ensuring smooth performance.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/scroll-scenes/scroll-scene-3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.