Custom Parallax with CSS & JavaScript
In this tutorial I am going to share simple jquery plugin to create Custom Parallax with CSS & JavaScript. It is An elegant approach to creating a modern smooth parallax scroll effect on background images using jQuery and CSS background properties.
Libraries
Include the jQuery Library on page.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> |
CSS
* { padding: 0; margin: 0; } body, html { height: 100%; margin: 0; font: 400 15px/1.8 "Lato", sans-serif; color: #777; } .parallax { position: relative; background-attachment: fixed; background-position: center 0; background-repeat: no-repeat; background-size: cover; /** * Default height */ height: 100%; } .caption { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; } .caption .border { background-color: #111; color: #fff; padding: 18px; font-size: 25px; letter-spacing: 10px; } h3 { letter-spacing: 5px; text-transform: uppercase; font: 20px "Lato", sans-serif; color: #111111; text-align:center; } .text { color: #777777; background-color: #ffffff; text-align: center; padding: 50px 80px; text-align: justify; } /* Turn off parallax scrolling for tablets and phones */ @media only screen and (max-device-width: 1024px) { .parallax { background-attachment: scroll; |
HTML
Add sample html to display basic Parallax effect
<div class="parallax" id="parallax-1" data-image-src="images/1.jpg"> <div class="caption"> <span class="border">SCROLL DOWN</span> </div> </div> <div class="text"> <h3>Parallax Demo</h3> <p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling.</p> </div> <div class="parallax" id="parallax-2" data-image-src="images/2.jpg" data-height="400px"> <div class="caption"> <span class="border">LESS HEIGHT</span> </div> </div> <div class="text"> <p>Scroll up and down to really get the feeling of how Parallax Scrolling works.</p> </div> <div class="parallax" id="parallax-3" data-image-src="images/3.jpg"> <div class="caption"> <span class="border">SCROLL UP</span> </div> </div> <div class="parallax" id="parallax-4" data-image-src="images/4.jpg"> <div class="caption"> <span class="border">COOL!</span> </div> </div> <div class="parallax" id="parallax-5" data-image-src="images/5.jpg"> <div class="caption"> <span class="border">COOL!</span> </div> </div> <div class="parallax" id="parallax-6" data-image-src="images/6.jpg"> <div class="caption"> <span class="border">END!</span> </div> </div> |
JS
$(document).ready(function(){ // Populate images from data attributes. $('.parallax').each(function(index) { var imageSrc = $(this).data('image-src') var imageHeight = $(this).data('height') $(this).css('background-image','url(' + imageSrc + ')') $(this).css('height', imageHeight) }) }) |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome plugin is developed by lautiamkok. Visit their official github repository for more information and follow for future updates.