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