I'm trying to build a roulette to be controlled by the mouse, I'm not using canvas or svg but only CSS3 rotation and some jQuery.
What I want to achieve is when the mouse is over the roulette and he is clicked and holds down, I want the user to be able to rotate the wheel when he moves the mouse up and down.
I'm using the event.offsetY to get the position of the mouse and according to this position I'm moving the roulette with or against the clock.
The problem is that I think the mouse offset position is changing according to the rotation of the wheel, is their a way to keep the mouse offset position "real" with the document?
-Or-
Someone know a better idea to accomplish that?
Please see the code here: http://jsfiddle.net/MZxgp/ (works on chrome only)
Many thanks!
I used a overlay div that doesn't move to capture the mouse events (see jsFiddle)
I hope this helps
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.)
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.
Recently, I decided to delve into the world of HTML5 and the canvas and I have run into an issue that I cannot figure out how to solve.
I am using the zoom technique that was mentioned in this question, as I need to be able to zoom into a specific point.
However, the issue I have encountered is when you zoom into an area, and then perform a large mouse movement, and then zoom out. The entire viewpoint and objects become skewed. (Objects that were previously occupying the entire canvas, are now partially or sometimes not visible at all.)
I am assuming that the zoom in towards a point function is using the mouse position upon zooming out, which is causing these issues.
Here is a demo to get an idea of the issue: (again to reproduce, just zoom in move the mouse a reasonable distance and zoom out)
Not-Working Demo
This is working as designed. When you apply your context translation based on the mouse position it will zoom centered on that position.
To achieve the fixed zoom out behavior I think you want you need to set the mouseX and mouseY only on zoom in and then use the last mouseX/mouseY (or possibly the center of the canvas, or some point in between) for zoom out.
Updated JSFiddle
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.