> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/storytelling/scroll-scatter.md).

# Scroll scatter

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FRo0SorRtqF4xV2uwW3OP%2Fimage.png?alt=media&amp;token=2a6d61d8-ff2c-42fb-a42b-74dcb752f840" alt=""><figcaption></figcaption></figure>

### Section settings <a href="#section-settings" id="section-settings"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FtyxwgomvJhQb69gSDtx8%2Fimage.png?alt=media&amp;token=0db39a7c-2e1b-429c-a35b-19a7b39397be" alt="" width="267"><figcaption></figcaption></figure>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FKO4iqhZoUaxkyhJL6eSs%2Fimage.png?alt=media&amp;token=59818968-a0f3-448b-bfac-9ec8b9527515" alt="" width="266"><figcaption></figcaption></figure>

#### General settings <a href="#general-setting" id="general-setting"></a>

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fixed width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Expand full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul> |
| **Color scheme**  | Select colors from **Theme settings -> Colors**                                                                                                                                                                                                                                                                                                                                                                                           |

#### Section header settings <a href="#general-setting" id="general-setting"></a>

| Setting                                | Description                                                                                                                                               |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Subheading**                         | Use the subheading to provide additional context, supporting information, or a short description.                                                         |
| **Heading**                            | The primary text element used to introduce or label the content within this section.                                                                      |
| **Enable heading underline animation** | Enable heading underline animation                                                                                                                        |
| **Underline style**                    | Select Underline style                                                                                                                                    |
| **Underline color**                    | Customize Underline color                                                                                                                                 |
| **Description**                        | A text element used to provide additional details or supporting information related to the heading or content of the section.                             |
| **Heading size**                       | <p>The size of the title:</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul>                      |
| **Alignment**                          | <p>The position of the heading and description.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul> |
| **Button label**                       | Custom name button, if left empty, the button will be hidden                                                                                              |
| **Button link**                        | The link URL you want to add                                                                                                                              |
| **Button type**                        | <p>The style of the button</p><ul><li><strong>Primary</strong></li><li><strong>Outline</strong></li><li><strong>Link</strong></li></ul>                   |

#### Block setting

| Setting   | Description                       |
| --------- | --------------------------------- |
| **Image** | Select an image for the animation |