https://github.com/mickaelchanrion/rolly

Custom scroll with inertia, smooth parallax and scenes manager
https://github.com/mickaelchanrion/rolly

animation parallax rolly scene scroll scrollto smooth-scrolling

Last synced: 5 days ago
JSON representation

Custom scroll with inertia, smooth parallax and scenes manager

• Host: GitHub
• URL: https://github.com/mickaelchanrion/rolly
• Owner: mickaelchanrion
• License: mit
• Created: 2018-12-18T14:14:36.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-17T17:05:46.000Z (11 months ago)
• Last Synced: 2024-04-25T08:02:46.336Z (7 months ago)
• Topics: animation, parallax, rolly, scene, scroll, scrollto, smooth-scrolling
• Language: JavaScript
• Homepage: https://rolly.maj.digital/
• Size: 4.11 MB
• Stars: 344
• Watchers: 5
• Forks: 12
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  


  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](https://rolly.maj.digital/)!

## Documentation

The documentation is available here: [https://mickaelchanrion.github.io/rolly/](https://mickaelchanrion.github.io/rolly/)

## Getting started

Click to expand



### Download rolly

```bash

$ npm install rolly.js

```

Or add it as a script:

```html

```

### Setup the markup

Create your scenes:

```html



  

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

    }

  

  


    
rolly.js

    
provides…

    
some delicious…

    
very delicious…

    
parallax effects ❤️

  


```

### 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@/css/style.css`

### Initialize rolly

```js

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](https://codepen.io/collection/AyEJzY/).

## Roadmap

- [x] Create documentation

- [x] Create some examples

- [ ] Fix the scrollTo function

- [ ] Test and fix [issues](https://mickaelchanrion.github.io/rolly/api/#vertical) 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?](https://github.com/mickaelchanrion/rolly/issues/new?labels=feature+request)

## Contributors

- [Mickael Chanrion](https://github.com/mickaelchanrion/)

- [MAJ digital](https://github.com/majdigital/)