How To Create Parallax Scrolling Effect Using jQuery
Tags: javascript, webdev, beginners, tutorial
Published: 2023-01-18 05:30:00

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>
```