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

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

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

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

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

最佳答案

一个简单的教程

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

您可以将该代码应用于 5/6 个元素(使用不同的 scaling )，并基于用户鼠标创建一个伟大而简单的视差效果。

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



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

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

关于javascript - 从头开始水平视差滚动 - 无插件 (jQuery)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12285146/