CODEWITHSUNDEEP
jqueryhtmlcssanimationjquery-animate
dham84
dham84

Reputation: 37

How to do this jQuery/CSS animation

So, a client of mine saw this animation on this website (scroll to see the faces of the team and hover over them to see the animation) and wants me to do something similar (only with different colors). Problem is, I've no idea how they achieve it, I am somewhat new to these kind of things.

Does anyone know if that's a plugin or something. I took a look at their code and JS files and all I can see they use is a plugin called Parallax to do the particles animation, but that was all I could figure out.

Any help would be appreciated! Thanks in advance!

Upvotes: 2

Views: 124

Answers (2)

Mary Turkina
Mary Turkina

Reputation: 728

They use 3 different images in html + 5 in css style (background-image) and this script (I found it in script.js - use 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+'%'});
});

Upvotes: 1

user2733921
user2733921

Reputation: 76

Right click their page is showing lot of java scripts.

I think their using http://ricostacruz.com/jquery.transit for jQuery Transit - CSS3 transitions and transformations

Scroll down and their website shows lot of animations

rotate like this

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

moves around like this

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

many other code is there only look there once

sorry my english not very good

Upvotes: 2

Related Questions