fantazer
6/20/2017 - 1:54 PM

PARALAX

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