Горизонтальная прокрутка параллакса с нуля — без плагина (jQuery)

Простое руководство

См.: http://www.egstudio.biz/easy-parallax-with-jquery/

Вы можете применить этот код к 5/6 элементам (с разными scaling) и создать отличный простой эффект паралакса на основе пользовательской мыши.

Вот пример, благодаря Shmiddty: http://jsfiddle.net/4kG6s/1

«А вот та же установка с кодом из ответа @PezCuckow»

Под масштабированием я подразумеваю что-то вроде этого (отредактировано сверху)

var strength1 = 5;
var strength2 = 10;
var strength3 = 15;
$("html").mousemove(function(e){
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = ;
    var newvalueY = height * pageY * -1;
    $('item1').css("background-position", (strength1 / $(window).width() * pageX * -1)+"px "+(strength1  / $(window).height() * pageY * -1)+"px");
    $('item2').css("background-position", (strength2 / $(window).width() * pageX * -1)+"px "+(strength2  / $(window).height() * pageY * -1)+"px");
    $('item3').css("background-position", (strength3 / $(window).width() * pageX * -1)+"px "+(strength3  / $(window).height() * pageY * -1)+"px");
});

Без библиотеки, такой как jQuery, эффект параллакса было бы довольно сложно реализовать, вам нужно было бы вручную реализовать всю анимацию, а не использовать функции, предоставляемые библиотекой.

При этом, однако, приблизительное руководство выглядит примерно так, как показано ниже, реализует очень плохой эффект параллакса, когда фоны движутся с разной скоростью.

CSS:

#bg1, #bg2, #bg3 {
    background-image:url('stars.gif');
    height: 100%;
    width: 100%;
    position: absolute;
    left: 100%;
}

HTML:

<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>

JS:

while(true) {
  document.getElementById('bg1').style.left = (document.getElementById('bg1').style.left) - 4 + 'px';
  document.getElementById('bg2').style.left = (document.getElementById('bg2').style.left) - 10 + 'px';
  document.getElementById('bg3').style.left = (document.getElementById('bg3').style.left) - 20 + 'px';
}

Вот грубо говоря простая реализация прокрутки параллакса: http://jsfiddle.net/4kG6s/

function AnimateMe(){
    $("#background").css("background-position", "-=2");
    $("#middleground").css("background-position", "-=4");
    $("#foreground").css("background-position", "-=8");    
}

setInterval(AnimateMe, 100);

Хотя эта реализация анимирует положение фона, концепция остается прежней. Передний план движется пропорционально быстрее, чем фон, и есть слои, наложенные друг на друга. Концептуально это настолько просто, насколько это возможно.

Код из ответа @PezCuckow, но без jQuery (т.е. исключительно в java-скрипте): http://jsfiddle.net/Gurmeet/s26zxcnf/1/

HTML:

<div onmousemove="update(event)">
    <div id="background">
    </div>
    <div id="middleground">
    </div>
    <div id="foreground">
    </div>
</div>

JS:

var strength1 = 50;
var strength2 = 100;
var strength3 = 200;

var background = document.getElementById('background');
var middleground = document.getElementById('middleground');
var foreground = document.getElementById('foreground');

function update(e){
var pageX = e.clientX - (window.innerWidth / 2);
var pageY = e.clientY - (window.innerHeight / 2);
background.style.backgroundPosition = (strength1 / window.innerWidth * pageX * -1)+"px "+(strength1  / window.innerHeight * pageY * -1)+"px";
middleground.style.backgroundPosition = (strength2 / window.innerWidth * pageX * -1)+"px "+(strength2  / window.innerHeight * pageY * -1)+"px";
foreground.style.backgroundPosition = (strength3 / window.innerWidth * pageX * -1)+"px "+(strength3  / window.innerHeight * pageY * -1)+"px";

};