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

Horizontal Parallax Scrolling from Scratch - No Plugin (jQuery)

提问by zero

Does anyone know were I can find a tutorial for how to do horizontal parallax scrolling via js form scratch (i.e. no plug-in)? Or can provide me with an example

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

I've spent tons of time Googling it, but could only find tutorials using plug-ins

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

The reason I want to do it from scratch is because I want a perfect understanding of how parallax truly works.

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

I don't mind using the jQuery libraryI just don't want to rely on a plugin for the effect.

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

回答by Pez Cuckow

A simple tutorial

一个简单的教程

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

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

You can apply that code to 5/6 elements (with different scaling) and create a great, simple parralax effect based on the users mouse.

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

Here is an example, thanks to Shmiddty: http://jsfiddle.net/4kG6s/1

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

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

“这是与@PezCuckow 答案中的代码相同的设置”

By scaling I mean something like this (edited from above)

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

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");
});

---

---

Without a library such as jQuery the parallax effect would be rather difficult to implement, you'd need to manually implement all the animation rather than using the features provided in the library.

如果没有像 jQuery 这样的库，视差效果将很难实现，您需要手动实现所有动画，而不是使用库中提供的功能。

That being said however an approximate guide is something like the below implements a very poor parallax effect where the backgrounds are moving at different speeds.

话虽如此，但是一个近似指南类似于下面的内容，在背景以不同速度移动的情况下实现了非常差的视差效果。

CSS:

CSS：

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

HTML:

HTML：

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

JS:

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

回答by Shmiddty

Here's a crudely simple implementation of parallax scrolling: http://jsfiddle.net/4kG6s/

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

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

setInterval(AnimateMe, 100);

While this implementation is animating the background-position, the concept remains the same. The foreground moves proportionally faster than the background, and there are layers stacked on top of eachother. Conceptually, that's as simple as it gets.

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

回答by Gurmeet Singh

The code from @PezCuckow's answer but without jQuery (i.e. purely in java script): http://jsfiddle.net/Gurmeet/s26zxcnf/1/

来自@PezCuckow 的答案但没有 jQuery（即纯粹在 Java 脚本中）的代码：http: //jsfiddle.net/Gurmeet/s26zxcnf/1/

HTML:

HTML：

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

JS:

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

};

};