Basic parallax background image

The TodoMVC of scrolling libraries. Let's create a section with an image that moves at a different speed as you scroll. I assume you've already set up a Scrollmeister environment as described in get started.

First let's set up the scroll-meister element:

<scroll-meister scroll guides-layout>
</scroll-meister>

We only need the scroll and guides-layout behavior for now. We also won't configure them any further because the guide-layout by default already provides the viewport guides.

Let's add an element with a height of 50vh. This will be the "container" for our parallax image.

<scroll-meister scroll guides-layout>
  <element-meister layout="height: 50vh;" style="background: green;"></element-meister>
</scroll-meister>

We've added the layout behavior and set the height to 50vh. By default the element will snap to the viewport guides. We've also set the background to be green to see the element. You should see a green rectangle covering the top half of your viewport. Let's make it scroll.

<scroll-meister scroll guides-layout>
  <element-meister layout="height: 50vh; spacing: 75vh;" style="background: green;"></element-meister>
</scroll-meister>

We've added a spacing of 75vh to top and bottom so we actually have something to scroll. Now let's add an image (I've picked one from Unsplash)

<scroll-meister scroll guides-layout>
  <element-meister layout="height: 50vh; spacing: 75vh;" style="background: green;"></element-meister>
  <element-meister layout="height: 75vh;">
    <img src="./niilo-isotalo-379496-unsplash.jpg">
  </element-meister>
</scroll-meister>

We've add a second element containg the image. I has a height of 75vh and is positioned below our green container. You should now see an image at the bottom of your page. To finally make it move with a parallax motion we change the layout mode.

<scroll-meister scroll guides-layout>
  <element-meister layout="height: 50vh; spacing: 75vh;" style="background: green;"></element-meister>
  <element-meister layout="height: 75vh; mode: follow; clip: true;">
    <img src="./niilo-isotalo-379496-unsplash.jpg">
  </element-meister>
</scroll-meister>

The image now moves with a parallax motion inside the container. The parallax layout mode turns an element into a follower. By default it will use the first flow element (within its previous siblings) it can find and uses it as a leader. Enabling clip will clip the follower to the bounds of its leader.

Pin it

At first this might seem like an odd way to create a parallax background. But once you understand how powerful the Guide Layout is, you will love it. To demonstrate its flexibility let's pin the image instead of parallaxing it.

<scroll-meister scroll guides-layout>
  <element-meister layout="height: 50vh; spacing: 75vh;" style="background: green;"></element-meister>
  <element-meister layout="height: 100vh; mode: follow; clip: true; followerMode: pin;">
    <img src="./niilo-isotalo-379496-unsplash.jpg">
  </element-meister>
</scroll-meister>

We've changed the height of the image to 100vh and set followerMode to pin. With these two changes we've turned the parallax background into a scroll-over-image section.

Vertically independent

Let's go back to the parallax example. If you've read the introduction to the Guide Layout you know that the vertical position of an element is always defined by two guides. There are no exceptions to this rule. What this means is that our container and image are completely independent vertically. Let's add a guide at the center of the screen and move the container to the left and the image to the right.

<scroll-meister scroll guides-layout="guides: center 50% 10px;">
  <element-meister layout="height: 50vh; spacing: 75vh; guides: viewport center;" style="background: green;"></element-meister>
  <element-meister layout="height: 75vh; mode: follow; guides: center viewport;">
    <img src="./niilo-isotalo-379496-unsplash.jpg">
  </element-meister>
</scroll-meister>

Images are so 2012

Parallax autoplaying video etc.