Designy code

Installation

Install with Package Managers

//npm
npm install simple-parallax-js
//yarn
yarn add simple-parallax-js

import simpleParallax from 'simple-parallax-js';

CDN links

<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@4.0.0/dist/simpleParallax.min.js"></script>

Initialization

<img class="thumbnail" src="image.jpg" alt="image">

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);

Settings

• orientation – string

  Choose the direction of the parallax effect.

• scale – int

  The higher the scale setting is set, the more visible the parallax effect will be. In return, the image will lose in quality.

• overflow – boolean

  By default, the image is scaled to apply a parallax effect without any overflow on the original image container. If overflow is set to true, the image will be translated out of its natural flow.

• delay – int

  When a delay is set, the translation of the image will continue to to perfom when the user stop scrolling. That gives a very nice effect.

• transition – string

  The transition works closely with the delay setting. The transition will add CSS efect to the delay setting.

• breakpoint – int

  Choose the minimum breakpoint (in pixel) from where simpleParallax will be initialized

Examples

• Basic config

  

  var image = document.getElementsByClassName('thumbnail');
  new simpleParallax(image);

• with a different direction

  

  var image = document.getElementsByClassName('thumbnail');
  new simpleParallax(image, {
      orientation: 'left'
  });

• with a higher scale

  

  var image = document.getElementsByClassName('thumbnail');
  new simpleParallax(image, {
      scale: 1.5
  });

• with overflow

  

  var image = document.getElementsByClassName('thumbnail');
  new simpleParallax(image, {
      overflow: true
  });

• with delay and transition

  

  var image = document.getElementsByClassName('thumbnail');
  new simpleParallax(image, {
      delay: .6,
      transition: 'cubic-bezier(0,0,0,1)'
  });