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
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.
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
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.
Related
Lets say that I have a player sprite, located at (player.x, player.y). On a mousemove event, I am capturing the cursor's position, which is (e.pageX, e.pageY). In the game, the player will be constantly moving, always towards the direction of the cursor. I am trying to find a way to to rotate the player sprite to always face the mouse cursor, and also move 10 pixels closer to the cursor every game tick. So far, this has me stumped. I have seen many examples of this online, and have tried all of them, but none seem to work. Any help that can be provided would be very much appreciated.
First of all, you must learn the basics of trigonometry. Without this knowledge, you will can't make something like you want.
Center of you image is the center of an circle. Knowing position of center and mouse position, you can calculate the angle. Calculated angle you can use to rotate image.
I am using threejs (r73). I use a PerspectiveCamera. My goal is to implement mouse interaction. For that purpose I want to use
TrackballControls.js . But I want a slightly different behaviour.
I want to rotate around the point that the user picked on the screen
I want to zoom in direction of the mouse position
For the second point I already found a "solution" at stackoverflow. The zoom works, but when I change the target vector of the control, panning and rotating does not work any longer.
Can anyone provide such an modified implementation of TrackballControls or help me with that?
EDIT
With the applied "solution" panning still works but rotating doesn't.
The idea from https://stackoverflow.com/a/16817727/2657179 also does not work.
In this 404 page, I can see the stars particle is moving as the mouse moving in different locations in the browser. I have no idea how to call this effect.
Can anyone provide a hint of the name of the effect and what is the right tool and how to achieve this? Thanks!
The stars and every layer on that example are not particles. They are fixed images using Parallax effect as you can see on the elements that compose the page under the div#container_layer.
This effect can be achieved from various ways. The most common, responsive and best optimised solutions use JQuery, such as this one: http://wagerfield.github.io/parallax/
Basically the way this works is by using a number of layers and incrementing or decrementing their absolute or relative position based on the mouse's co-ordinates.
Im using a parallax effect that moves a ball according to the users mouse position (http://webdev.stephband.info/jparallax/index.html). I am trying to figure out a way that the ball will also rotate. So it would appear that as the user moves their mouse over the area, the ball rolls across the screen.
I have found some javascript examples that show how to rotate an item on mouse click, I am just not skiled enough in js to put it all together.
here is a Jsfiddle that shows an example:
jsFiddle
This is more tangential advice than an answer, but in order to make the rolling ball look realistic, make sure that it rotates at a rate that is consistent with the ball's circumference. Otherwise it will look fakey.
This jQuery plugin might be useful.
I'm building a joke microsite for a company. They want a feature where the mouse cursor will randomly change position when the user hovers over a certain image.
Is this possible in Javascript? How would I implement it?
Thanks!
You can't... but you can - in a way.
What you can do to mimic this behavior is that you can hide the actual cursor with css cursor: none and then create an image representing the cursor which would look the same and would be placed in position of the real cursor. Then whe user would move the mouse you'd have to update the position of the cursor image and apply your random position changes as you wish - though be aware that when user will scroll outside of the browser content window (on the controls or outside the browser) they will get their mouse cursor back to real position and your cursor will be stuck in its last position.
The only way you could pull this prank out. Good luck with it and hope they'll enjoy it ;)
PS.
inverting the mouse movement direction can be funny as well :>
You can't move the mouse cursor.
You can move the page or the image relative to the position of the cursor, which might make it look like the cursor moved when it didn't?
You can change your cursor with invisible custom icon, and then make a fake cursor and move it.