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.
parallax-background



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.

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



CSS

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

<style>
 
html, body {
  font-family: 'Dosis', sans-serif;
  padding: 0;
  margin: 0;
}
 
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
 
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
 
h3 {
  padding: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: bold;
}
 
 h1 { text-align:center;}
 
.Bg {
  z-index: 1000;
  color: #ffffff;
}
 
.parallax {
  z-index: 10;
  position: relative;
  height: 400px;
  overflow: hidden;
}
 
.front, .parallax {
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  min-height: 200px;
}
 
.bgimg {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
}
 
.shadow {
  background-color: #000000;
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 0.4;
}
    </style>

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.

DEMO | DOWNLOAD

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.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.