> 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/banners/parallax-scroll.md).

# Parallax scroll

The **Parallax scroll** section tells your brand story as a run of cards that slide in from alternating sides while the visitor scrolls, with the heading staying in place behind them. Use it for a philosophy, an "about us", or the pillars behind a product line.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FEgoSTVmCePDAMFbyQIty%2Fimage.png?alt=media&amp;token=e47c1eb0-a522-4450-855e-60576d151699" alt=""><figcaption></figcaption></figure>

### How to add this section <a href="#how-to-add-this-section" id="how-to-add-this-section"></a>

{% hint style="success" %}
**Steps**

1. In the theme editor (**Customize**), open the page you want it on.
2. Click **Add section** and choose **Parallax scroll** from the **Storytelling** group.
3. Add up to 7 **Info card** blocks and give each one an image or a video.
4. Fill in the heading, the description, and the button, then **Save**.
   {% endhint %}

The section is available on any page template. It cannot be added to the header, the footer, or an overlay group.

### How the animation behaves <a href="#how-the-animation-behaves" id="how-the-animation-behaves"></a>

* Cards **alternate sides** as they come in: the first from the left, the second from the right, and so on.
* On screens wider than 1200px, **every third card is inset** a little so the run does not fall into a strict zigzag.
* A **Scroll to Explore** hint appears under the heading and fades out as the first card arrives.
* The animation is skipped for visitors who have asked their device to reduce motion, and on very short screens (under 600px tall, or a landscape phone under 700px tall). The cards are then simply stacked and readable.
* A card's video plays only while the card is on screen and pauses when it leaves, so several videos in one section do not compete for bandwidth.

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

#### General <a href="#general" id="general"></a>

| Setting          | Description                                                                                                                                        |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Color scheme** | Select colors from **Theme settings -> Colors**. It applies to the section and to the cards.                                                       |
| **Card width**   | The largest a card gets on desktop, from 320px to 720px. Cards still shrink to fit smaller screens, so this is a maximum rather than a fixed size. |

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

| Setting                                | Description                                                                                                                                                     |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Subheading**                         | Short line of text shown above the heading.                                                                                                                     |
| **Heading**                            | The main title of the section. It stays in place behind the cards while they scroll past.                                                                       |
| **Heading size**                       | Choose **Heading 1**, **Heading 2**, or **Heading 3**.                                                                                                          |
| **Enable heading underline animation** | Draws an animated underline under the words you set to italic in the heading. Use the Italic (I) button in the editor to mark the words.                        |
| **Underline style**                    | <p>3 underline styles:</p><ul><li><strong>Simple underline</strong></li><li><strong>Curve stroke</strong></li><li><strong>Squiggle underline</strong></li></ul> |
| **Underline color**                    | The color of the animated underline.                                                                                                                            |
| **Description**                        | A short paragraph under the heading.                                                                                                                            |

{% hint style="info" %}
**Enable heading underline animation** and the theme's fade-in animation cannot run on the same heading, so turning the underline on switches the fade-in off for this section. Turn the underline off if you prefer the header to fade in like the rest of your page.
{% endhint %}

#### Button <a href="#button" id="button"></a>

| Setting          | Description                                                                                                                                                                 |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button label** | The text on the button under the cards. Leave it blank to hide the button.                                                                                                  |
| **Button link**  | Where the button goes. If you leave it blank, the button is shown as disabled.                                                                                              |
| **Type**         | <p>The button style, using the styles configured by the theme:</p><ul><li><strong>Primary</strong></li><li><strong>Outline</strong></li><li><strong>Link</strong></li></ul> |

#### Mobile settings <a href="#mobile-settings" id="mobile-settings"></a>

| Setting                        | Description                                                                                      |
| ------------------------------ | ------------------------------------------------------------------------------------------------ |
| **Hide description on mobile** | Hides the section description on phones, so the cards start higher up the screen. On by default. |

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

| Setting    | Description                                               |
| ---------- | --------------------------------------------------------- |
| **Top**    | Customize the top padding of the section (0 to 160px).    |
| **Bottom** | Customize the bottom padding of the section (0 to 160px). |

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

| Setting          | Description                                                              |
| ---------------- | ------------------------------------------------------------------------ |
| **Show divider** | Displays a dividing line to separate this section from the previous one. |

### Block settings <a href="#block-settings" id="block-settings"></a>

Add up to **7 Info card** blocks, one per point in your story.

| Setting   | Description                                                                                                                                                          |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Type**  | <p>The media shown on the card:</p><ul><li><strong>Image</strong></li><li><strong>Video</strong></li></ul><p>A card with no media yet shows a placeholder image.</p> |
| **Image** | The image for the card, shown when **Type** is **Image**. The card follows the shape of the image you upload.                                                        |
| **Video** | A video uploaded to your store, shown when **Type** is **Video**. It plays on its own, without sound, and loops.                                                     |
| **Link**  | An optional link. When it is set, the whole card becomes clickable.                                                                                                  |

#### Content inside a card <a href="#content-inside-a-card" id="content-inside-a-card"></a>

Each **Info card** holds its own blocks, so you can arrange the text next to the media:

* [Highlight text](/purity-theme/group-blocks/basic/highlight-text.md), for a small label such as `Our Belief`
* [Heading](/purity-theme/group-blocks/basic/heading.md), for the card title
* **Description**, for a sentence or two under the title

**Tips**

* Keep the text on a card short. The card sits beside its image, so a label, a title, and one sentence read best while the card is moving.
* Cards look most even when their images share a shape, because each card follows the shape of its own image.
* 4 to 6 cards is a comfortable length. With only 2 the effect is barely noticeable, and at the maximum of 7 the visitor scrolls a long way before reaching the button.