How did they make the heads move on this page?

This is a cool effect and I'd like to know how they did it. Is it javascript? and if so how does it get the cursor position in relation to the heads?

http://www.technologywithpassion.com/about-us/team/

Thanks
LVL 4
elliottbenzleAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Jason C. LevineConnect With a Mentor No oneCommented:
Hi elliottbenzle,

It's a custom javascript they wrote based in jquery.  The links are at the bottom of the page.
0
 
Gurvinder Pal SinghCommented:
they are simply replacing the current image with another after a certain interval.

You can scroll down the source to see the various tools used to do the same
0
 
HainKurtSr. System AnalystCommented:
0
 
HainKurtSr. System AnalystCommented:
for each person they took 8 black & white and one color photo, total 9

for cristi for example: colored, center one:
http://s3.amazonaws.com/lateralmedia1/cristi_cc.jpg

others can be found by replacing cc with one of these
dir=['c','s','sv','v','nv','n','ne','e','se','s','c1','cc']

http://s3.amazonaws.com/lateralmedia1/cristi_c.jpg
http://s3.amazonaws.com/lateralmedia1/cristi_s.jpg
...
http://s3.amazonaws.com/lateralmedia1/cristi_c1.jpg
http://s3.amazonaws.com/lateralmedia1/cristi_cc.jpg

on mouse move they find the mouse x,y relative to each image... then for each image they change the src...
0
 
SaigonJeffCommented:
Can easily be done with a simple multi-image rollover behavior in Dreamweaver... All you need are the images for each face in the left forward and right position.

Here is a great tutorial to get you started.

http://www.stockvault.net/tutorials/dreamweaver-multible-rollovers

Let us know how you make out.
0
All Courses

From novice to tech pro — start learning today.