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>
Top comments (0)