How To Create Parallax Scrolling Effect Using jQuery

Websolutionstuff | May-04-2022 | Categories : Laravel PHP jQuery Bootstrap

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 parallax scrolling div jquery, jquery parallax plugin, parallax animation, parallax scrolling CSS, parallax scrolling jquery, 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 Post
Featured Post
PHP Access Modifiers Example
PHP Access Modifiers Example

In this example we will see PHP access modifiers example. In PHP default access modifier is public. PHP provide differen...

Read More

Sep-06-2021

How To Disable Specific Dates In jQuery Datepicker
How To Disable Specific Dates...

In this tutorial, we will see how to disable specific dates in jquery datepicker. The jQuery UI Datepicker is...

Read More

Jun-16-2022

Laravel orderBy, groupBy and limit Example
Laravel orderBy, groupBy and l...

In this article, we will see the laravel orderBy, groupBy, and limit examples. Here we will see different types of&...

Read More

Jan-27-2021

How to Create Bar Chart in Vue 3 using vue-chartjs
How to Create Bar Chart in Vue...

Hello, web developers! In this article, we'll see how to create a bar chart in vue 3 using vue-chartjs. Here, w...

Read More

Jul-31-2024