@bonhomme/bonnie-parallax NPM

🐢 bonnie-parallax

A Javascript library.

Getting started

Install

NPM

npm i @bonhomme/bonnie-parallax

Browser

<script type="text/javascript" src="https://unpkg.com/@loupthibault/linkedlist@0.1.0/dist/linkedlist.umd.js"></script>
<script type="text/javascript" src="https://unpkg.com/@bonhommeparis/bonnie-parallax@0.1.0/dist/linkedlist.umd.js"></script>

Usage

// For install via npm
import {Parallax, BasicRule} from '@bonhomme/bonnie-parallax';

/**
 * // For install via browser
 * var Parallax = window.bonnieParallax.Parallax;
 * var BasicRule = window.bonnieParallax.BasicRule;
 */
 

const parallax = new Parallax({
  el: document.body
});

parallax.addRule(new BasicRule({
  query: '[data-prllx-item]'
}));

const render = () => {
  parallax.current = document.scrollingElement.scrollTop;
  requestAnimationFrame(render);
};

parallax.init();
parallax.setViewPort(window.innerWidth, window.innerHeight);
requestAnimationFrame(render);

...
<div data-prllx-item data-speed='0.9'></div>
<div data-prllx-item data-delta-start='10%'></div>
<div data-prllx-item data-delta-end='-10v'></div>
...