Creating a parallax effect with Motus
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:
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
parameter points to the dom element that needs to have the animation appliedkeyframes
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: