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.
Related
I'm being stuck in a problem
I'm creating something like this: https://www.fariasviolins.com/
My English is not good :3
Specifically, I'm creating a infinity layout, the layout will be moved according to the mouse position(The larger the position, the greater the speed), it means that when the mouse to directions, the layout will be moved. I have tried mousemove and it worked, but I also want the layout still move whenever the mouse on screen(even when the mouse not moving, the the speed will calculate by the position of the mouse), I have tried mouseover, but it didn't work as I expected. please help me huhuhuhhu, thank you so much
I think mousemove is the right way to go!
On the example website you mentioned, it looks like the speed depends on the distance between your mouse and the center of the page.
If you calculate the speed that way, the speed shouldn't change if you don't move your mouse. (Because the distance between your mouse and the center of the page doesn't increase either.)
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.
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.
Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They also turn the mouse into a magnifying glass that can sweep over the picture (the gold ring).
I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).
Looking at their source code, it seems they are using rather basic techniques to achieve this.
Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.
The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.
Here's a sorta minimal reconstructed example.
Another example where we don't hide the div overflow to reveal the entire thing as a square.
Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:
Power Zoomer
Featured Image
Zoomer
Cloud Zoom
Secondly, it's quite easy to achieve. Just load the full-size image, but give it a width smaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-position property to the corresponding scaled x,y coordinate that the user's mouse is currently on.
There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.
Visit http://codeblab.com/glass/ for an real life example and in depth explanation of this technique. Flash and CSS v3 have ample functionality to construct a round magnifying glass.
However, simulate-a-circle-with-overlapping-rectangles works on (many) more platforms.
(DISCLOSURE: codeblab.com is my personal hobby blog with some weak links to my work in The Netherlands.)
There is a full example of magnifying any sort of HTML, including HTML5 at http://www.aplweb.co.uk/blog/js/magnifying-glass/. Works cross-browser too - although rounded corners are a bit iffy on most browsers - so you are going to have to use a box rather than circle.
Here is how to works:
Duplicate the content you want to zoom
Place the duplicated content into another element and set the visible width/height and overflow hidden
Use JavaScript to move the duplicated content so that it moves by the zoom amount * mouse movement. Also move the visible div by the mouse movement.
That is pretty much it too it. There are lots of little things to look out for though to make it work on all browsers.
I don't know how Google does it, since the logo is no longer showing in my area; but this effect can be achieved by clipping the enlarged animated GIF over the regular image using canvas. Alternatively, it is also possible to create create a circular clipping using CSS border-radius (commonly used to implement rounded corners).
EDIT: I've hacked this up together to show the basic technique that you need if you used CSS border-radius: http://jsfiddle.net/yjBuS/
Looks like they're using two images, one for the logo and one for the zoom (the zoomed one is actually sliced, to run the animations separately...?) They probably detect if the mouse is over the normal logo, then show the yellow circle and attach it to the mouse position. Then showing the other image, shifting it opposite of the mouse. Or something similar.