How to create simple parallax scrolling effect using parallax.js
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.
Copyright 2024 ErrorGram