0

I'm attempting to create an effect that moves image sprites in a certain direction depending on the direction the mouse cursor is moving. I've looked into parallax scrolling but couldn't find much help. Any ideas on where I can find some more info or tutorials on objects relating to cursor movement?

For a better idea of what I'm talking about go to http://web-features.net/ and create a new layer that responds to mouse move.

Thanks

Brian
  • 2,687
  • 9
  • 37
  • 39

3 Answers3

3

Google is your friend. This is the only tutorial I could find specific to your problem, but I'm sure there are many more tutorials about doing things with mouse position in javascript.

Flauwekeul
  • 869
  • 7
  • 24
0

I don't know of any tutorials but check out the answer to this post :

Rotating an element based on cursor position in a separate element

That will get you started. Instead of rotating an element you can make changes to the background position.

Basically you want to imagine a right triangle where one end of the hypotenuse is the center of your element and the other is your cursor.

Using javascripts Math.atan2() you can pass in the y,x positions and it returns the angle in radians.

Is this enough info to get you going?

///////// Update /////////

Heres a demo I made for you also using css3 transitions : http://codepen.io/jeffpowersd/pen/ryBJz

Community
  • 1
  • 1
Jeffpowrs
  • 4,430
  • 4
  • 30
  • 49
-1

This helped me!

http://www.w3schools.com/css/css_image_sprites.asp

Hope this helps!

Also note, that when moving right on the image sprite, the css direction is negative. For example, 

#prev{background:url('img_navsprites_hover.gif') -47px 0;}

#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

On the hover, the image is moved 47px right and 45px down.

Raphael Rafatpanah
  • 19,082
  • 25
  • 92
  • 158
  • Also note, that when moving right on the image sprite, the css direction is negative. For example, #prev{left:63px;width:43px;} #prev{background:url('img_navsprites.gif') -47px 0;}. – Raphael Rafatpanah Feb 09 '13 at 22:57
  • That page explains how css sprites work and I believe the poster is asking how a sprite position can be dynamically changed relative to the mouse direction. – Flauwekeul Feb 09 '13 at 22:59