By Rémino Rem https://remino.net
JavaScript library using CSS variables to animate elements while user scrolls.
demo.mp4
Scrollerful is a lightweight, dependency-free JavaScript library which uses CSS variables to help animate elements on a page as the user scrolls.
You can either clone the repo, download the latest release file, or install it using npm:
# Clone the repo
git clone git@github.com:remino/scrollerful.git
# Install using npm
npm add scrollerfulStep 1. Add the JavaScript file to your page.
The library comes in many forms: UMD or CommonJS, ES6 module, all standard or minified.
There are many ways to include the JavaScript library to your page:
// Using ES6 import
// dist/scrollerful.mjs
import scrollerful from 'scrollerful';
scrollerful();
// Using CommonJS require
// dist/scrollerful.cjs
const scrollerful = require('scrollerful');
scrollerful();<!-- Using a script tag -->
<script src="scrollerful.min.js"></script>
<script>
scrollerful();
</script>
<!-- Using a script tag with a module -->
<script type="module">
import scrollerful from './scrollerful.min.mjs';
scrollerful();
</script>
<!-- Using the auto-init file -->
<script src="scrollerful-auto.min.js"></script>Step 2. Section your page and specify sprites to animate as below:
<div class="scrollerful">
<div class="scrollerful__tray">
<div class="scrollerful__plate">
<p class="scrollerful__sprite">Section 1</p>
</div>
</div>
<div class="scrollerful__tray">
<div class="scrollerful__plate">
<p class="scrollerful__sprite">Section 2</p>
</div>
</div>
<div class="scrollerful__tray">
<div class="scrollerful__plate">
<p class="scrollerful__sprite">Section 3</p>
</div>
</div>
</div>Step 3. Define CSS animations for your sprites:
@keyframes section-1 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes section-2 {
from {
transform: scale(0);
}
to {
transform: scale(2);
}
}
@keyframes section-3 {
from {
color: red;
}
to {
color: blue;
}
}
.scrollerful__tray:nth-child(1) > .scrollerful__plate > .scrollerful__sprite {
animation-name: section-1;
}
.scrollerful__tray:nth-child(3) > .scrollerful__plate > .scrollerful__sprite {
animation-name: section-2;
}
.scrollerful__tray:nth-child(3) > .scrollerful__plate > .scrollerful__sprite {
animation-name: section-3;
}Step 4. Enjoy the animations while your scroll!
On the .scrollerful element, adding the .scrollerful--snap class to it will snap scrolling to the next section.
If you want to add scroll snapping and use the entire page body as the main container, you can do so by adding the .scrollerful CSS class to <body> and add .scrollerful--snap--page to the <html> element. For example:
<html class="scrollerful--snap--page">
<head>
<title>Scrollerful Example</title>
<script src="scrollerful.js"></script>
</head>
<body class="scrollerful">
<div class="scrollerful__tray">
<div class="scrollerful__plate">
<p class="scrollerful__sprite">Section 1</p>
</div>
</div>
<div class="scrollerful__tray">
<div class="scrollerful__plate">
<p class="scrollerful__sprite">Section 2</p>
</div>
</div>
</body>
</html>This library is mainly for personal purposes at the moment, but I'd like to expand on it for others to enjoy its benefits until browsers adopt standards to animate elements on scroll using CSS on its own. The CSSWG already has an idea on doing scroll animations.
For others to feel more confident in using this, here are a few things to do:
- Add automated tests. (Not sure how to do that yet.)
- Add better documentation. (There are a few features this library does that is not documented here yet.)
- Add more examples.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the ISC License. See LICENSE.txt for more information.
Rémino Rem https://remino.net/