Scratch的水平视差滚动 - 无插件（jQuery） [英] Horizontal Parallax Scrolling from Scratch - No Plugin (jQuery)

问题描述

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

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

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

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.

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

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

推荐答案

一个简单的教程

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

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

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

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

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

这里的设置与@ PezCuckow的答案相同

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

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

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

---

如果没有像jQuery这样的库，视差效果会要实现起来相当困难，你需要手动实现所有动画，而不是使用库中提供的功能。

---

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.

尽管如此，一个近似指南是一些东西如下所示实现了非常差的视差效果，其中背景以不同的速度移动。

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：

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

这篇关于Scratch的水平视差滚动 - 无插件（jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！