Parallax Scrolling

Simple "parallax" scrolling effect
Parallax effect is when background content and content scroll at different speeds. With the Parlax plugin you can easily create a parallax effect in different web projects. With the available options, you can configure the parallax effect to your specific needs. You can set the height of the picture. If desired, you can turn off the parallax effect. With
responsive
оbject, you can use different settings for different resolutions.
For the whole functionality of Parallax Scrolling, see documentation.

How to use

1. Load jQuery and include Modal box plugin files
<link rel="stylesheet" type="text/css" href="dist/modal-box.min.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="dist/modal-box.min.js" type="text/javascript"></script>
2. Set up your HTML
<div class="image1" data-image="img/n1.jpg">             
    <strong>IMAGE 1</strong><br />             
    text text text text text text text         
</div>         
<div class="image1" data-image="img/n2.jpg">image 2</div>         
<div class="image1" data-image="img/n3.jpg">image 3</div>
<div class="image1" data-image="img/n4.jpg">image 4</div>
<div class="image1" data-image="img/n5.jpg">image 5</div>
<div class="image1" data-image="img/n6.jpg">image 6</div>
3. Call the plugin
<script type="text/javascript">   
    $(".image1").wgParallax();
</script>

Examples

disableParallax
$(".image1").wgParallax();
$(".image2").wgParallax({
    disableParallax:true,
});
View demo - disableParallax
height
$(".image1").wgParallax({
    height:250,
});
View demo - height
Theme
$(".image1").wgParallax({
    theme:'light', 
});
$(".image2").wgParallax({
    theme:'dark',
});
View demo - Theme
Github Download Documentation