Scratch的水平视差滚动 – 无插件(jQuery)

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

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

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

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

一个简单的教程

见: 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这样的库,视差效果将难以实现,您需要手动实现所有动画,而不是使用库中提供的function。

然而,尽管如此,近似指南是类似于以下实现非常差的视差效果,其中背景以不同的速度移动。

CSS:

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

HTML:

 

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

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

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

虽然这个实现是动画背景位置,但概念仍然相同。 前景按比例移动比背景快,并且有相互堆叠的图层。 从概念上讲,这很简单。

来自@ PezCuckow的答案的代码,但没有jQuery(即纯粹用java脚本): http : //jsfiddle.net/Gurmeet/s26zxcnf/1/

HTML:

 

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

};