• Stars
    star
    344
  • Rank 120,138 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Custom scroll with inertia, smooth parallax and scenes manager


rolly.js


Custom scroll with inertia, smooth parallax and scenes manager.

Version MIT License

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/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 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 😎

Roadmap

  • Create documentation
  • 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?

Contributors