Question

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

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

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

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

Answer 1

一个简单的教程

请参阅：http://www.egstudio.biz/easy-parallax-with-jquery/

您可以将该代码应用于5/6元素（具有不同的scaling），并根据用户鼠标创建一个简单的简单parralax效果。

以下是一个示例，感谢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";

};

Scratch的水平视差滚动 - 无插件（jQuery）

3 个答案: