如何做这个 jQuery/CSS 动画答案

【问题标题】：How to do this jQuery/CSS animation如何做这个 jQuery/CSS 动画
【发布时间】：2013-09-03 17:45:37
【问题描述】：

所以，我的一个客户在this website 上看到了这个动画（滚动查看团队的面孔并将鼠标悬停在他们身上查看动画）并希望我做类似的事情（只有不同的颜色）。问题是，我不知道他们是如何实现的，我对这些东西有点陌生。

有谁知道这是插件还是什么的。我查看了他们的代码和 JS 文件，我只能看到他们使用了一个名为 Parallax 的插件来制作粒子动画，但我只能弄清楚这些。

任何帮助将不胜感激！提前致谢！

【问题讨论】：

该页面需要几天才能加载
天哪，您的客户是怎么看到这个页面的？我真的不得不重新启动我的电脑，它让 chrome 崩溃了，太糟糕了 O.o
这是一个很棒的动画，但网站确实需要很长时间才能加载！我不知道，我想我将不得不为此收取更多费用哈哈。当我看到它时，我以为它是一个简单的插件，可以完成所有工作，我很傻。

标签： jquery html css animation jquery-animate

【解决方案1】：

他们使用 3 个不同的 html 图片 + 5 个 css 样式（背景图片）和这个脚本（我在 script.js 中找到它 - 使用 Chrome DevTools/sources）

$('.face').on('mousemove',function(e){
    var MyoffsetY = e.offsetY;
    var MyoffsetX = e.offsetX;

    if($.browser.mozilla){
        MyoffsetX = e.pageX - $(this).offset().left;
        MyoffsetY = e.pageY - $(this).offset().top;
    }


    var Top1 = (MyoffsetY/30);
    var Left1 = (MyoffsetX/30);
    var Top2 = MyoffsetY/5;
    var Right2 = 3-(MyoffsetX/35);
    var Top3 = 15-(MyoffsetY/10);
    var Left3 = MyoffsetX/10;


    $(this).find('img').eq(0).css({'top':Top1+'%','left':Left1+'%'});
    $(this).find('img').eq(1).css({'top':Top2+'%','right':Right2+'%'});
    $(this).find('img').eq(2).css({'top':Top3+'%','left':Left3+'%'});
});

【讨论】：

谢谢玛丽，我也看到了那个脚本，但什么也不懂哈哈，坏事是我正在开发的网站通过 php 在使用 wordpress 的查询中生成面孔，所以会有点难通过 CSS 添加图像，但我猜并非不可能。我什至在网站上联系了开发人员，看看他是否可以分享任何代码或其他东西，希望他回答！如果他愿意，我会分享。
我认为这个脚本只有助于在鼠标光标方向移动黑点（方向感知悬停效果） - 类似于 tympanus.net/codrops/2012/04/09/…。剩下的就是 css-rules background-position 图像在悬停 + 变换时的变化 - 你可以在 firebag 中看到它

【解决方案2】：

右击他们的页面显示很多java脚本。

我认为他们使用 http://ricostacruz.com/jquery.transit 用于 jQuery Transit - CSS3 过渡和转换

向下滚动，他们的网站会显示很多动画

这样旋转

$('.box').css({ rotate: '30deg' });

像这样移动

$('.box')
  .transition({ x: -40 })
  .transition({ y: 40 })
  .transition({ x: 0 })
  .transition({ y: 0 });

许多其他代码只在那里看一次

对不起，我的英语不太好

【讨论】：

谢谢！我错过了那个插件，我会和其他的一起看看！