javascript - 从头开始水平视差滚动 - 无插件（jQuery）

Question

有谁知道我可以找到一个关于如何通过 js 表单从头开始（即没有插件）进行水平视差滚动的教程？或者可以给我举个例子

我花了很多时间谷歌搜索它，但只能找到使用插件的教程

我想从头开始做的原因是因为我想完全了解视差是如何真正起作用的。

我不介意使用jQuery 库，我只是不想依赖插件来获得效果。

Answer 1

一个简单的教程

见：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';
}

Answer 2

这是一个粗略简单的视差滚动实现：http: //jsfiddle.net/4kG6s/

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

setInterval(AnimateMe, 100);

虽然此实现为背景位置设置动画，但概念保持不变。前景的移动速度比背景快，并且层层叠叠。从概念上讲，这很简单。

Answer 3

@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";

};