CSS用于制作许多背景以鼠标不同的速度移动

Question

您好我想创建一种效果，背景以不同的速度移动到鼠标，以产生几乎像3d的效果。

这就是我想要找到的found this

有人可以向我解释或向我展示一些可以做到这一点的脚本。

Answer 1

你所说的是parallax effect。有许多现有的脚本和插件可以让你这样做。例如，一个简单的搜索提示this page列出了7个不同的jQuery插件。

基本前提是将碎片分成多个层，这些层根据鼠标的当前位置独立移动，然后根据需要隐藏不同区域。

实施例

此效果的一个简单示例可能如下（请不要使用此代码，它不是很干净）：

HTML

<div id="parallax">
    <img src="img1.png" alt="background"/>
    <img src="img2.png" alt="foreground"/>
</div>

JS

$('#parallax').on('mousemove', function (e) {
    $('img').eq(0).css('left', e.pageX);
    $('img').eq(1).css('left', e.pageX * 2);
});

在这个简单的例子中，前景图像的移动速度是背景的两倍。如您所见，您只需将每个部件彼此分开移动即可获得所需的效果。

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