L'effetto parallax (o parallasse) consiste nel far muovere due o più elementi, in funzione di un'azione, con velocità o direzioni differenti, così da dare l'impressione di movimento su più piani dfferenti.
In questi tab il codice è adattato da http://www.bootply.com/zrATdhAKBZ.
Bootstrap Parallax
Add Some Motion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.Keep Going
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.Bootstrap Parallax
.divider {
height:50px;
}
section {
height:500px;
padding-top:50px;
padding-bottom:50px;
overflow:auto;
}
.bg-1 {
background: url('img/example.jpg') no-repeat center center fixed;
color:#fff;
background-size:cover;
}
.bg-2 {
background: url('img/example2.jpg') no-repeat top center fixed;
color:#fff;
background-size:cover;
}
.bg-3 {
background: url('img/example.jpg') no-repeat bottom center fixed;
color:#fff;
background-size:cover;
}
#footer {
height: 60px;
background-color:#585858;
margin-top:50px;
padding-top:20px;
padding-bottom:20px;
}
#footer a {
color:#efefef;
}
/**
* Author: Heather Corey
* jQuery Simple Parallax Plugin
*
*/
(function($) {
$.fn.parallax = function(options) {
var windowHeight = $(window).height();
// Establish default settings
var settings = $.extend({
speed : 0.15
}, options);
// Iterate over each object in collection
return this.each( function() {
// Save a reference to the element
var $this = $(this);
// Set up Scroll Handler
$(document).scroll(function(){
var scrollTop = $(window).scrollTop();
var offset = $this.offset().top;
var height = $this.outerHeight();
// Check if above or below viewport
if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) {
return;
}
var yBgPosition = Math.round((offset - scrollTop) * settings.speed);
// Apply the Y Background Position to Set the Parallax Effect
$this.css('background-position', 'center ' + yBgPosition + 'px');
});
});
}
}(jQuery));
$('.bg-1,.bg-3').parallax({
speed : 0.15
});
$('.bg-2').parallax({
speed : 0.25
});