Creating a parallax effect with Motus

Alexandru Cambose

3 min readApr 12, 2019

How to easily create a parallax effect with Motus scroll animation library

Prerequisites:

a browser
minimal javascript, nodejs and CSS knowledge
nodejs installed

Final result

https://alexcambose.ro/motus/parallax-demo

Initialization

In this article, I will use Parcel for bundling javascript and CSS because it’s fast and doesn’t require any additional setup.

npm i parcel motus -S

Let’s add a simple script to our package.json file

...
"scripts": {
  "start": "parcel serve index.html",
}
...

and create 3 files: index.html, script.js, and style.scss.

Website layout

First of all, we need to define the HTML structure where our website will live.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Motus Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Oxygen+Mono" rel="stylesheet">
</head>
<body>
    <header>
        <img src="https://i.imgur.com/9I7KKgx.png" class="flower" alt="flower"/>
        <h1>Welcome</h1>
    </header>
    <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, amet animi corporis deserunt eius esse ex id inventore iste magnam minima molestias necessitatibus nisi nulla pariatur, quo, sunt ut! Quidem?</p>
    </section>
    <section>
        <h1>This is a heading</h1>
    </section>
    <section>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, amet animi corporis deserunt eius esse ex id inventore iste magnam minima molestias necessitatibus nisi nulla pariatur, quo, sunt ut! Quidem?</p>
    </section>
    <footer><p>Build with <a target="_blank" href="https://github.com/alexcambose/motus">Motus</a></p></footer>
    <script src="index.js"></script>
</body>
</html>

also, note the script import at the bottom of the body tag.

Let’s also add a little bit of styling in style.scss file

style.scss

body {
  font-family: 'Oxygen Mono', monospace;
  margin: 0;
}

header {
  background: url(https://i.imgur.com/AzqJ7WR.jpg);
  background-position: center;
  background-size: cover;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 2em;
  letter-spacing: 2px;
}

.flower {
  width: 20vw;
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
}

section {
  @extend header;
  padding: 30px 10vw;
  background: #333;
  color: #fff;
  font-size: 1.3em;
  line-height: 40px;
  &:nth-of-type(2) {
    @extend header;
    background-image: url(https://i.imgur.com/prxIGf5.jpg);
    filter: grayscale(70%);
  }
  &:nth-of-type(3) {
    background-color: #FAFAFA;
    color: #555;
  }
}

footer {
  @extend section;
  height: 20vh;
}
a {
  text-decoration: none;
  color: #fe001a;
}

Note that we didn’t include the style file directly into the HTML file, we will include it via the script.js file so that parcel can compile it into a valid CSS.

script.js

import './styles.scss';

If everything went right you should have a nice looking page like this:

Don’t forget to execute `npm start` to open the parcel development server

Creating animations

Firstly we need to import motus:

script.js

import './styles.scss';
import Motus from 'motus';

next, let’s define the parallax animation for the header:

import './styles.scss';
import Motus from 'motus';const headerAnimation = new Motus.Animation({
    $el: document.querySelector('header'),
    keyframes: [
        {backgroundPositionY: 10}
    ],
});
Motus.addAnimation(headerAnimation);

$elparameter points to the dom element that needs to have the animation applied
keyframes are the rules that the animation needs to follow, in this case, backgroundPositionY starts at 0 when the scrollY is at 0 and goes to 10 when the scrollY position reaches the height of the element

We can also add more animations

...
const flowerAnimation = new Motus.Animation({
    $el: document.querySelector('header > img'),
    startPoint: 0,
    endPoint: 500,
    keyframes: [
        {marginTop: 170}
    ],
});
Motus.addAnimation(flowerAnimation);

const sectionAnimation = new Motus.Animation({
    $el: document.querySelector('section:nth-child(3)'),
    keyframes: [
        {backgroundPositionY: 10}
    ],
});
Motus.addAnimation(sectionAnimation);

And the final result should look similar to this:

Motus Demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, amet animi corporis deserunt eius esse ex id…

alexcambose.ro