Creating a parallax effect with Motus
source link: https://www.tuicool.com/articles/hit/EvUvauN
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 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:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK