How To Create a Parallax Scrolling Background Effect Using jQuery & CSS

In this quick tutorial I’ll show you How To Create a Parallax Scrolling Background Effect Using jQuery & CSS. Parallax scrolling is a web site trend where the background image is moved at a different speed than the foreground content while scrolling. Here I am going to introduce a plugin called parlx. It is an extremely lightweight jQuery plugin used to create parallax scrolling effects by altering the background position using CSS3 2D transformation.

Integrate Parallax Scrolling Background Effect Using jQuery & CSS

Follow below simple steps to add Parallax Scrolling Background Effect on your website.

Libraries

Include parlx.js tiny library on page to create Parallax Scrolling Background Effect.

<script src="parlx.js">script>

HTML

Created multiple html section entity with content and background images.

="front">
      
>Demo - Parallax Background
>
    
>
 
    
="parallax">
      
="Bg">Scott Webb
>
      
="bgimg" style="background-image: url(http://placeimg.com/1280/760/animal);">
        
="shadow">
>
      
>
    
>
 
    
="front">
      
>Parallax Background
>
    
>
 
    
="parallax">
      
="Bg">Ales Krivec
>
      
="bgimg" style="background-image: url(http://placeimg.com/1280/760/sport);">
        
="shadow">
>
      
>
    
>
 
    
="front">
      
>Parallax Background
>
    
>
 
    
="parallax">
      
="Bg">Sven Scheuermeier
>
      
="bgimg" style="background-image: url(http://placeimg.com/1280/760/nature);">
        
="shadow">
>
      
>
    
>
 
    
="front">
      
>Parallax Background
>
    
>

CSS

Add custom style-sheet for styling your html section for Parallax Scrolling Background.

JS

Finally Activate the parallax scrolling effect by calling the function on the parallax container on window load/resize/scroll.

<script>
(function($) {
  $(window).on("load resize scroll", function() {
    $('.bgimg').parlx();
  });
})(jQuery);
script>

See live demo and download source code.

See official github repository for more information and follow for future updates.Don’t forget to read license for using above plugin in your commercial project.

Related