[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 946
  • Last Modified:

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
0
elliottbenzle
Asked:
elliottbenzle
1 Solution
 
Jason C. LevineNo 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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now