Straight-forward parallax scrolling background images as an ES6 module
npm install parallax-scrollParallax
========





Straight-forward parallax scrolling background images as an ES6 module.
Features
--------
* Easily import as an ES6 module
* Plain old JavaScript; no jQuery
* Simple as heck and really tiny
* Looks pretty cool
Usage
-----
1. Install Parallax with npm:
``sh`
npm install --save parallax-scroll
2. Import the parallax function:
`js`
import parallax from 'parallax-scroll';
Alternatively, an old-school require() will work:
`js`
var parallax = require('parallax-scroll');
3. Create a new instance of Parallax, passing the constructor a selector, DOM element, or array of DOM elements, and optionally a hash of options, and then call the animate() function on the resulting object:
`js
const parallax = new Parallax('.js-parallax', {
speed: 0.2, // Anything over 0.5 looks silly
});
parallax.animate();
`
4. Write some markup for your parallax elements:
`html`
5. As well as some structural CSS:
`css
.o-banner {
/**
* You'll likely want to set a height for the elements, perhaps based on the
* viewport as in this example
*/
min-height: 70vh;
position: relative;
}
.o-banner__img {
position: absolute;
width: 100%;
left: 0;
/**
* Adjust the height (or width), and offset the element's position based
* on the aspect of your images
*/
height: 110%;
top: -5%;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
transform: translate3d(0, 0, 0);
}
``