jQuery Parallax
A jQuery plugin to enable parallax background images. The code has been extracted from the Materialize CSS project and improved upon.
Installation
npm install @nsrosenqvist/jquery.parallaxUsage
Include script then run parallax() on an element that contains the images.
$('.hero').parallax();<div class="parallax-container"> <div class="parallax"><img src="images/parallax1.jpg"></div> </div>.parallax-container { position: relative; overflow: hidden; height: 500px; } .parallax { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .parallax img { display: none; position: absolute; left: 50%; bottom: 0; min-width: 100%; min-height: 100%; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); transform: translateX(-50%); }You can easily create a slideshow by adding multiple img elements and rotate with JavaScript.
// Slideshow hero images $('.parallax-slideshow').exists(function() { var slideshow = $(this).children('.parallax'); slideshow.children('*:gt(0)').hide(); setInterval(function(){ slideshow.children().first().fadeOut(1000).next().fadeIn(1000).end().appendTo(slideshow); }, 10000); });License
MIT
