There are lots of Javascript and jQuery plugins that makes our small task easy by providing simple and required functionality in our web application. parallax.js plugin is one of them which makes images scrolling effect beautiful in your website.

parallax.js is simple and easy to use jQuery plugin makes parallax scrolling effect in <div>, images. The plugin is inspired by Spotify.

Installation

To use parallax.js in your website, first download the package from GitHub. Then include parallax.min.js file in the html file after jQuery.

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

You can also use CDN instead of download file 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>

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

Usage

To simply create parallax effect, just create <div> tag as bellow:

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

Or initialise with jQuery code:

<script type="text/javascript">
    $(document).ready(function() {
        $('.parallax-window').parallax({
            imageSrc: '/path/to/image.jpg'
        });
    });
</script>

And then include bellow Javascript to start creating parallax effect.

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

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

Note: 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');

If your <div> tag is more complex, then use bellow HTML code

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

Then you will need to add bellow jQuery with the naturalWidth and naturalHeight options in order to be rendered correctly.

<script type="text/javascript">
    $(document).ready(function() {
        $('.parallax-window').parallax({
            naturalWidth: 600,
            naturalHeight: 400
        });
    });
</script>

You can also set responsive image.

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

Options

You can pass bellow options to change behaviour of the plugin. You can pass option with data-attribute in the <div> tag like data-image-src="" or pass the option in jQuery code like $('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});

Name Type Default Description
imageSrc path null Path of the image you wish to apply to the parallax effect
naturalWidth number auto Natural width and natural height of an image to speed up loading and reduce error when determining the correct aspect ratio of the image.
naturalHeight number auto
position xPos yPos center center Background-position css property that specify coordinates as top, bottom, right, left, center, or pixel values
positionX xPos center
positionY yPos center
speed float 0.2 The speed at which the parallax effect runs. 0.0 means the image will appear fixed in place, and 1.0 the image will flow at the same speed as the page content
zIndex number -100 The z-index value of the fixed-position elements. By default these will be behind everything else on the page
bleed number 0 You can optionally set the parallax mirror element to extend a few pixels above and below the mirrored element. This can hide slow or stuttering scroll events in certain browsers
iosFix boolean true iOS devices are incompatable with this plugin. If true, this option will set the parallax image as a static, centered background image whenever it detects an iOS user agent. Disable this if you wish to implement your own graceful degradation.
androidFix boolean true If true, this option will set the parallax image as a static, centered background image whenever it detects an Android user agent. Disable this if you wish to enable the parallax scrolling effect on Android devices.
overScrollFix boolean false If true, will freeze the parallax effect when "over scrolling" in browsers like Safari to prevent unexpected gaps caused by negative scroll positions.
mirrorContainer jQuery Selector body The parallax mirror will be prepended into this container.

This way, you can easily create parallax scrolling effect. I hope you liked the article and will help to add in your website. Also follow our Twitter page and like Facebook page.


Was this article helpful?

0 out of 0 person found this article helpful.

Leave a comment

OR

No Comments