simpleParallax, the easiest way to get parallax effectssimpleParallax - a jQuery plugin for parallax effects

the easiest way to get a parallax effect with javascript

Star
simpleParallax image
simpleParallax image
simpleParallax image
simpleParallax image
simpleParallax image
simpleParallax image

simpleParallax is a very simple and lightweight jQuery plugin that improve your website with parallax animations on your images.

Where it may be laborious to get results through other plugins, simpleParallax stands out for its ease and its visual rendering. The parallax effect is directly applied on image tags, there is no need to use background images.

Any image will fit. Try it out!

Installation

Install with Package Managers

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

simpleParallax can be import this way

import 'simple-parallax-jquery';

CDN links

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-jquery@3.0.0/src/simpleParallax.min.js"></script>

Initialization

Giving the following HTML:

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

Simply add the following jQuery code:

window.onload = function() {
  $('.thumbnail').simpleParallax();
}

Settings

nametypedefaulthint
orientationstringuptop - right - bottom - left
scaleint1.2need to be above 1.0 - no effect if overflow setting is set to true
overflowbooleanfalse
delayint0the delay is in second
transitionstring'cubic-bezier(0,0,0,1)'transition can be any CSS transition
breakpointint768the breakpoint is in pixel

Examples