mickaelchanrion / Rolly
Licence: mit
Custom scroll with inertia, smooth parallax and scenes manager
Stars: ✭ 109
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Rolly
Ngx Scroll To
Scroll to any element to enhance scroll-based features in you app. Works for Angular 4+, both AoT and SSR. No dependencies.
Stars: ✭ 269 (+146.79%)
Mutual labels: scroll, smooth-scrolling
Mac Mouse Fix
Mac Mouse Fix - A simple way to make your mouse better.
Stars: ✭ 362 (+232.11%)
Mutual labels: scroll, smooth-scrolling
Locomotive Scroll
🛤 Detection of elements in viewport & smooth scrolling with parallax.
Stars: ✭ 4,231 (+3781.65%)
Mutual labels: parallax, smooth-scrolling
really-smooth-scroll
A script that smoothen scrolling in the browser
Stars: ✭ 21 (-80.73%)
Mutual labels: scroll, smooth-scrolling
Mos
一个用于在 macOS 上平滑你的鼠标滚动效果或单独设置滚动方向的小工具, 让你的滚轮爽如触控板 | A lightweight tool used to smooth scrolling and set scroll direction independently for your mouse on macOS
Stars: ✭ 7,772 (+7030.28%)
Mutual labels: scroll, smooth-scrolling
magic-scroll
Apple Magic Mouse scrolling effect for normal mouses
Stars: ✭ 43 (-60.55%)
Mutual labels: scroll, smooth-scrolling
Ngx Scrollbar
Custom overlay-scrollbars with native scrolling mechanism
Stars: ✭ 355 (+225.69%)
Mutual labels: scroll, smooth-scrolling
Vue Prlx
🔮 Vue.js parallax directive you were looking for (can animate translate & background-position)
Stars: ✭ 140 (+28.44%)
Mutual labels: scroll, parallax
Smooth Scrolling
smooth scrolling and parallax effects on scroll
Stars: ✭ 514 (+371.56%)
Mutual labels: parallax, smooth-scrolling
Motus
Animation library that mimics CSS keyframes when scrolling.
Stars: ✭ 502 (+360.55%)
Mutual labels: scroll, parallax
smooth-parallax
Smooth Parallax makes it a lot easier to move objects when the page scroll with ease.
Stars: ✭ 66 (-39.45%)
Mutual labels: parallax, smooth-scrolling
Simpleparallax.js
Simple and tiny JavaScript library that adds parallax animations on any images
Stars: ✭ 1,075 (+886.24%)
Mutual labels: scroll, parallax
Moveto
A lightweight scroll animation javascript library without any dependency
Stars: ✭ 2,746 (+2419.27%)
Mutual labels: scroll, smooth-scrolling
scrollxp
Alpine.js-esque library for scrolling animations on websites
Stars: ✭ 50 (-54.13%)
Mutual labels: parallax, scene
React Native Stretchy
🤸♀️A ReactNative scrollable stretchy header component
Stars: ✭ 216 (+98.17%)
Mutual labels: scroll, parallax
React Scroll Parallax
🔮 React components to create parallax scroll effects for banners, images or any other DOM elements
Stars: ✭ 1,699 (+1458.72%)
Mutual labels: scroll, parallax
React Native Parallax Scroll
Parallax scroll view for react-native
Stars: ✭ 385 (+253.21%)
Mutual labels: scroll, parallax
Lax.js
Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
Stars: ✭ 8,274 (+7490.83%)
Mutual labels: scroll, parallax
Materialviewpager
A Material Design ViewPager easy to use library
Stars: ✭ 8,224 (+7444.95%)
Mutual labels: scroll, parallax
rolly.js
Custom scroll with inertia, smooth parallax and scenes manager.
What is rolly.js?
rolly.js is a library written in javascript for building pages that moves smoothly.
This library offers 3 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…)
Checkout the demo!
Documentation
The documentation is available here: https://mickaelchanrion.github.io/rolly/
Getting started
Click to expand
Download rolly
$ npm install rolly.js
Or add it as a script:
<script src="https://unpkg.com/[email protected]<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/[email protected]<VERSION>/css/style.css
Initialize rolly
import rolly from 'rolly.js';
const r = rolly({
view: document.querySelector('.app'),
native: true,
// other options
});
r.init();
Examples
You will find some examples here.
Showcase
Some websites using rolly.js 😎
- Rolly's demo - from @mickaelchanrion
- Elua poke - Very first website using rolly.js - from @majdigital
- Maj digital's website - With a crazy diagonal scroll - from @majdigital
- PepperState landing page - 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
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?
Contributors
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].