How to Create a Simple Parallax Effect Using CSS and jQuery

Posted under :
Download the script Check the demo

Parallax effect for your website, yeap that will be awesome and have beautiful looking, you do need one? so pick this one, with this script you will know more how to build it and you can do more after it.

Again its just some lignes, easy to use and to understand the way it works, so let’s start!

So like the example demo, we will create the structure of out page

<section class="section-one">
  <div class="prlx-1"></div><!-- here is ou background image -->
  <h2>FIRST PARALLAX EFFECT IN .prlx-1</h2>
</section>
<section class="section-two">
  <p>No parallax effect here</p>
</section>
<section class="section-three">
  <div class="prlx-2"></div><!-- here is ou background image -->
  <h2>SECOND PARALLAX EFFECT IN .prlx-2</h2>
</section>
<section class="section-two">
  <p>No parallax effect here </p>
</section>

In this example, the parallax is working in the “section-one” and “section-three” so let’s some css for it, here is with height:300px and width:100% , change this how you want

*[class^="prlx"] {
  position: absolute;
  width: 100%;
  height: 300%;
  top:0;
  left:0;
  z-index: -1;
}

Inside those 2 sections, we have the 2 images to apply the parallax on it we called them prlx-1 and prlx-2, if you need another just keep the prlx- in the name of the class

.prlx-1{ background: url('../images/bg2.jpg') repeat; }
.prlx-2{ background: url('../images/bg.jpg') repeat; }

For now, they are just an images in the background, so we need to make that parallax effect (this is the point of this tutorial 😉 )
So, in this jQuery script, we will search for every div with the name starting with “prlx-“ and move that div with the image so it will be animated in scrolling action

$(document).ready(function() {
	$(window).scroll(function(){
		$('*[class^="prlx"]').each(function(r){
			var pos = $(this).offset().top;
			var scrolled = $(window).scrollTop();
	    	$('*[class^="prlx"]').css('top', -(scrolled * 0.5) + 'px');			
	    });
	});
});

This is it, this what all about, download the script and check more, so you can add it or change for what you need.



  • Hubert

    Hello. How can I add fourth section to this code with another image in background?

  • Looks like you declared a “pos” variable, but aren’t using it…

  • Giovan

    Tnks, that helped me.

Be notified for new scripts