Background Image Parallax Scrolling Effect with jQuery and CSS3
File Size: | 2.22 MB |
---|---|
Views Total: | 5679 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

With Html5, CSS3 and a little jQuery magic, we‘re able to create a simple famous parallax effect on the background images as you scroll the web page.
How to use it:
1. Create DIV elements with data-type="background"
attributes for the background images defined in the CSS. Create DIV element with data-type="content"
attributes for the text content. The html structure should be like this:
<div class="container"> <section> <div class="image" data-type="background" data-speed="2"></div> <div class="stuff" data-type="content">Your content goes here</div> </section> <section> <div class="image" data-type="background" data-speed="7"></div> <div class="stuff" data-type="content">Your content goes here</div> </section> <section> <div class="image" data-type="background" data-speed="6"></div> <div class="stuff" data-type="content">Your content goes here</div> </section> <section> <div class="image" data-type="background" data-speed="5"></div> <div class="stuff" data-type="content">Your content goes here</div> </section> <section> <div class="image" data-type="background" data-speed="3"></div> <div class="stuff" data-type="content">Your content goes here</div> </section> <section> <div class="image" data-type="background" data-speed="3"></div> <div class="stuff" data-type="content">Your content goes here</div> </section> </div>
2. The required CSS styles for the parallax effects.
.container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: 100%; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; position: relative; width: 100%; } .container section { width: 100%; height: 100vh; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; text-align: center; position: relative; overflow: hidden; background-color: #000; } .container section:nth-child(1) .image { background-image: url(1.jpg); } .container section:nth-child(2) .image { background-image: url(2.jpg); } .container section:nth-child(3) .image { background-image: url(3.jpg); } .container section:nth-child(4) .image { background-image: url(4.jpg); } .container section:nth-child(5) .image { background-image: url(5.jpg); } .container section:nth-child(6) .image { background-image: url(6.jpg); } .container section .image { background-attachment: fixed; -webkit-background-size: cover; background-size: cover; width: 100%; height: 100%; position: absolute; z-index: 500; opacity: 0.4; } .container section .stuff { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: 100%; width: 100%; max-width: 70%; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; z-index: 1000; color: #e67e22; margin: 0 auto; font-size: 26px; position: relative; } .container section .stuff:before, .container section .stuff:after { width: 100%; height: 1px; display: block; background-color: #d35400; content: ""; margin: 30px 0; }
3. Include the necessary jQuery library at the bottom of the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
4. The Javascript to active the background parallax scrolling effect.
function parallaxIt() { var $fwindow = $(window); $('[data-type="content"]').each(function (index, e) { var scrollTop = $fwindow.scrollTop(); var $contentObj = $(this); $fwindow.on('scroll resize', function (){ scrollTop = $fwindow.scrollTop(); $contentObj.css('top', ($contentObj.height() * index) - scrollTop); }); }); $('[data-type="background"]').each(function(){ var $backgroundObj = $(this); $fwindow.on('scroll resize', function() { var yPos = - ($fwindow.scrollTop() / $backgroundObj.data('speed')); console.log(yPos) var coords = '50% '+ yPos + 'px'; // Move the background $backgroundObj.css({ backgroundPosition: coords }); }); }); $fwindow.trigger('scroll'); }; parallaxIt();
This awesome jQuery plugin is developed by carmination. For more Advanced Usages, please check the demo page or visit the official website.