How To Create Parallax Scrolling Effect Using jQuery


In this article, we will see how to create a parallax scrolling effect using jquery. Parallax scrolling is a website trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. Here we use a simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin.

So, let's see jquery parallax plugin, parallax scrolling div jquery, parallax animation, jquery parallax scrolling, jquery parallax effect, smooth parallax scrolling, horizontal parallax scrolling jquery.

Parallax.js is a dirt-simple parallax scrolling effect inspired by Spotify.com and implemented as a jQuery plugin.

Installation

download the package from GitHub. Then include the parallax.min.js file in the HTML file after jQuery.

Download and include parallax.min.js in your document after including jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/parallax.js"></script>

You can also use CDN instead of downloading files and use it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

 

Usage

Note: You must include <!DOCTYPE html> it on top of the document file.

Via data attributes

To easily add a parallax effect behind an element, add data-parallax="scroll" to the element you want to use, and specify an image with data-image-src="/path/to/image.jpg".

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>

 

Via JavaScript

To call the parallax plugin manually, simply select your target element with jQuery and do the following:

$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});

You will also need to set the height of the element and make it transparent, otherwise, you can not see the element.

.parallax-window {
    min-height: 400px;
    background: transparent;
}

Also, keep in mind that once initialized, the parallax plugin presumes a fixed page layout unless it encounters a scroll or resize event. If you have a dynamic page in which another javascript method may alter the DOM, you must manually refresh the parallax effect with the following commands.

jQuery(window).trigger('resize').trigger('scroll');

 

Using inner HTML for complex content

You can use the following syntax to enable complex content for the parallax:

<div class="parallax-window">
  <div class="parallax-slider">
    <span style="position:absolute; top: 400px; left: 400px;">Some Text</span>
	<p>Some other Content</p>
  </div>
</div>

Please note, that the div with class "parallax-slider" is essential here.

then need to initialize it through JS and provide the naturalWidth and naturalHeight options in order to be rendered correctly.

$('.parallax-window').parallax({
    naturalWidth: 600,
    naturalHeight: 400
  });

 This also makes it possible to use responsive images in the slider.

<div class="parallax-window">
  <div class="parallax-slider">
    <img src="/path/to/image.jpg" srcset="/path/to/image-400px.jpg 400w, /path/to/image-800px.jpg 800w, /path/to/image-1200px.jpg 1200w" sizes="100vw">
  </div>
</div>

 


You might also like :

RECOMMENDED POSTS

FEATURE POSTS