rolly.js
v0.4.0
Custom scroll with inertia, smooth parallax and scenes manager
0/weekUpdated 3 years agoMITUnpacked: 113.3 KB
Published by Mickael Chanrion
npm install rolly.jsrolly.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
$3
``bash`
$ npm install rolly.js
Or add it as a script:
`html`
$3
Create your scenes:
`html`
rolly.js
provides…
some delicious…
very delicious…
parallax effects ❤️
$3
Import the CSS of rolly: node_modules/rolly.js/css/style.css
Or from unpkg: https://unpkg.com/rolly.js@
$3
`js
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
- [x] Create documentation
- [x] Create some examples
- [ ] Fix the scrollTo function
- [ ] Test and fix issues when vertical options is set to false`
- [ ] 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?