Slider parallax animations

Some slider components have an animation which reacts when the user move the cursor of the mouse. The plugin behind the animation is called parallax-js and is located in  app/modules/parallax-js folder.

This is how a slider item looks like with the necessary id, classes and attributes marked with bold:

<div class="dm__slider-item dm-prallaxScene" id="scene"><div class="dm__slider-item dm-prallaxScene" id="scene"> 
  <span class="dm__slider-img" style="background-image: url('images/model.png')"></span>
  <div class="dm__slider-caption dm__caption--parallax " > 
    <div class="dm__slider-title--container layer" data-depth="0.40"> <p class="dm__slider-title">Digital Media</p> </div> 

To kickoff a Parallax scene, select your parent DOM Element and pass it to the Parallax constructor.

var scene = document.getElementById('scene')
// or, if you use jQuery
var scene = $('#scene').get(0)

var parallax = new Parallax(scene)

In order to perform the animation, you will need to add an id called “scene” on the parent div where you want to apply the animation, then you will need to use the “layer” class preceded by the “data-depth” attribute which can contain a value from 0 to 1. This value reflect the element motion from your animation.

A depth of 0 will cause the layer to remain stationary, and a depth of 1 will cause the layer to move by the total effect of the calculated motion.

You can find more about this on: