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

Question

有谁知道我是否可以找到有关如何通过 js form scratch(即无插件)进行水平视差滚动的教程？或者可以给我一个例子

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

我想从头开始做的原因是因为我想完全了解视差的真正工作原理。

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

Answer 1

一个简单的教程

参见:http://www.egstudio.biz/easy-parallax-with-jquery/

您可以将该代码应用到 5/6 元素(使用不同的缩放)并根据用户鼠标创建一个很棒的简单视差效果。

这是一个例子，感谢Shmiddty : http://jsfiddle.net/4kG6s/1

"And here's the same setup with the code from @PezCuckow's answer"

通过缩放我的意思是这样的(从上面编辑)

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