Paralax
//https://github.com/pixelcog/parallax.js/ - doc
$ bower i --save parallax.js
script(src="bower/parallax.js/parallax.js")
// Для нужного блока раставить data
.main-section( data-parallax="scroll" data-image-src="https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg")
// второй вариант
http://markdalgleish.com/projects/stellar.js/docs/ - исходник
$(window).scroll(function() {
var st = $(this).scrollTop() /5; // коэффициент
$(".slogan").css({
"-webkit-transform" : "translate3d(0px, " + st + "%, 100px)",
"opacity" : 1-st/100 //прозрачность
});
});
<div data-stellar-background-ratio="0.5"> - к блоку с паралаксом с коэфф
$.stellar(); - подключить в Js
// Третий вариант
https://github.com/wagerfield/parallax
script(src="bower/parallax/deploy/parallax.js")
var scene = document.getElementById('scene');
var parallax = new Parallax(scene, {
relativeInput: true,
clipRelativeInput: true,
hoverOnly: true,
pointerEvents: true
});
#scene
.layer(data-depth="0.50")//!!!!!! add style .layer
//put content