jquery - 如何做这个 jQuery/CSS 动画

Question

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

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

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

Answer 1

右键单击他们的页面显示很多 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 });

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

抱歉我的英语不太好

Answer 2

他们使用 html 中的 3 个不同图像 + 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+'%'});
});