Creating a parallax effect with Motus

Alex Cambose

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);

$el
keyframes

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

Creating a parallax effect with Motus