Oh no, why another parallax script? Do we really need it?

There are many parallax scripts but none of them was satisfying my personal needs:

• No dependencies
• No background positioning and heavy obtrusive DOM manipulations
• Build only for modern devices without internal hacks
• Modern and flexible api being thought mainly for ajax applications
• Modern and clean ES6/2015 source code

So I decided to make my own and you can be free to use it or simply ignore it and move forward to the next one!

• demo

$ npm install scroll-parallax --save
# or
$ bower install scroll-parallax --save

Once you have included the script in your page, you should wrap your parallax images in a wrapper having an height, position:relative or absolute and overflow: hidden The images will be stretched to fit always the whole wrapper size

<figure style="position: relative; height: 300px; overflow: hidden;">
  <img class="parallax" src="path/to/the/image.jpg" />
</figure>

The Parallax api is really simple and the following snippet should be enough:

var p = new Parallax('.parallax').init()

The options available are only 4 at moment:

You can set the Parallax options in this way:

var p = new Parallax('.parallax', {
  offsetYBounds: 50,
  intensity: 30,
  center: 0.5,
  safeHeight: 0.15
}).init()

Each image could be configured using custom Parallax options (except for the offsetYBounds) overriding the defaults:

<figure>
  <img class="parallax" data-center="0.8" data-intensity="50" src="path/to/the/image.jpg" />
</figure>
<figure>
  <img class="parallax" data-center="0.2" data-intensity="10" data-safe-height="0.2" src="path/to/the/image.jpg" />
</figure>

Each Parallax instance has some useful methods that could be used to adapt it to your application needs

Initialize the parallax internal event listeners. The listeners to image:loaded and images:loaded should be set before this method gets called

The on method allows you to listen the internal Parallax events from the outside.
Currently it supports:

• image:loaded: when a parallax image gets completely loaded
• images:loaded: when all the images get loaded
• draw: when a parallax image comes in the viewport and gets moved
• resize: when the parallax images get resized
• update: when the page is scrolling and the script has updated all the visible images

p.on('image:loaded', function(image){
  // do something with the image tag
})

Stop listening an internal Parallax event

var fn = function (image) {
    // do something with the image tag just drawn
    p.off('draw', fn) // stop listening the draw event
  }
p.on('draw', fn)

Refresh the position of the images visible in the viewport

// do extremely heavy dom updates
p.refresh()

Add new images to the parallax instance

// inject new images
p.add('.parallax-2')

Remove images from the parallax instance

p.remove('.parallax-2') // remove the images from the parallax
// and also from the DOM...

Destroy the parallax instance removing all the internal and external callbacks to its internal events

p.destroy() // the parallax is dead!

$ ./make # or also `$ npm run default`

$ ./make build # or also `$ npm run build`

$ ./make test # or also `$ npm run test`

$ ./make serve # or also `$ npm run serve`

$ ./make watch # or also `$ npm run watch`