rolly.js
Custom scroll with inertia, smooth parallax and scenes manager.
What is rolly.js?
rolly is a library written in javascript for building pages that moves smoothly.
This library was created with the aim of offering three main features:
- change the behavior of the default scroll for a smoother effect
- quickly and flexibly add a customizable parallax effect to any element on a page
- add any behavior to your scenes bound to the scroll state (custom transforms, seek animations…)
Documentation
The documentation is available here: https://mickaelchanrion.github.io/rolly/
Getting started
Click to expand
Download rolly
$ npm install rolly.jsOr add it as a script:
<script src="https://unpkg.com/rolly.js@<VERSION>/dist/rolly.min.js"></script>Setup the markup
Create your scenes:
<body>
<style>
[data-scene] {
max-width: 800px;
padding: 10vh 50px;
margin: 10vh auto;
font-family: sans-serif;
font-size: 100px;
color: #fff;
text-align: center;
background: linear-gradient(
to top,
rgb(252, 92, 125),
rgb(106, 130, 251)
);
border-radius: 5px;
}
[data-scene]:first-child {
background: linear-gradient(
to bottom,
rgb(168, 192, 255),
rgb(63, 43, 150)
);
}
[data-scene]:last-child {
margin-bottom: 50vh;
}
</style>
<div class="app">
<div data-scene data-speed="0.2">rolly.js</div>
<div data-scene>provides…</div>
<div data-scene data-speed="1.2">some delicious…</div>
<div data-scene data-speed="1.4">very delicious…</div>
<div data-scene data-speed="1.6">parallax effects ❤️</div>
</div>
</body>Import the CSS of rolly
Import the CSS of rolly: node_modules/rolly.js/css/style.css
Or from unpkg: https://unpkg.com/rolly.js@<VERSION>/css/style.css
Initialize rolly
import rolly from 'rolly.js';
const view = document.querySelector('.app');
const r = rolly({
view,
native: true,
// other options
});
r.init();Examples
You will find some examples here.
Showcase
Some websites using rolly.js
- Elua poke - Very first website using rolly.js - from @majdigital
- Rolly's demo - WIP, coming soon…
⏳ - from @mickaelchanrion - Maj digital's website - With a crazy diagonal scroll - from @majdigital
- Pepperstate landing page - WIP, coming soon…
⏳ - from @majdigital - Portfolio of Antoine Rizzo - WIP, coming soon…
⏳ - from @mickaelchanrion - Wanna add your website? Do it, I'd love to see rolly in action
😊
Roadmap
- Create documentation
- Create some examples
- Fix the scrollTo function
- Test and fix issues when
verticaloptions is set tofalse - Change the way the easing is computed. Probably with a clean Lerp function
- Implement different easing for each scene (it would add a nice organic effect
🤩 ) - Need a feature?