嗨,我想创建一种效果,使背景以不同的速度移动到鼠标上,以产生几乎像 3d 一样的效果。
这就是我想要做的,我发现了这个
有人可以向我解释或向我展示一些可以做到这一点的脚本吗?
你说的是视差效应。有许多现有的脚本和插件可让您执行此操作。例如,一个简单的搜索提示该页面列出了 7 个不同的 jQuery 插件。
基本前提是根据鼠标当前的位置,将碎片分割成层,通过JS独立移动,然后根据需要隐藏不同的区域。
这种效果的一个简单示例可能如下(请不要使用此代码,它不是很干净):
<div id="parallax">
<img src="img1.png" alt="background"/>
<img src="img2.png" alt="foreground"/>
</div>
$('#parallax').on('mousemove', function (e) {
$('img').eq(0).css('left', e.pageX);
$('img').eq(1).css('left', e.pageX * 2);
});
在这个简单的例子中,前景图像的移动速度是背景图像的两倍。如您所见,您只需将每一块分开移动即可获得所需的效果。
为什么不直接看那个页面源码中的js。它的 4 个图像绝对定位在鼠标移动事件中。
$(document).mousemove(function(e) {
var x = ((e.pageX/$(window).width())*100)*-1;
var y = ((e.pageY/$(window).height())*100)*-1;
var pos = (x/80*-1)+"% "+(y/80*-1)+"%";
var pos2 = (x/3+60)+"% "+(y/3+60)+"%";
var pos3 = (x/5+30)+"% "+(y/5+30)+"%";
var pos4 = (x/2+60)+"% "+(y/2+60)+"%";
$("#grid").css("background-position",pos);
$("#bottom").css("background-position",pos2);
$("#bottomoverlay").css("background-position",pos3);
$("#bottomblur").css("background-position",pos4); });