rolly-smooth.js

v0.2.6

Published

2 years ago

Custom scroll with inertia, smooth parallax and scenes manager

Downloads

0High
0Medium
0Low

bonjour_paris_agency

scroll parallax animation scene smooth-scrolling scrollto rolly

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

Download rolly

$ npm install rolly.js

Or 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

[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?

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme