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.)
Related
This question has been probably asked many times but I can't actually find the answer nor here nor on Google. Probably I'm searching it with wrong words, so I decided to ask here on StackOverflow.
I'm using Hammer.js to handle the mobile gestures on the current website and what I'd like to do now is moving the divs horizontally as much as the thumb moves (like the Facebook's app gallery, for example).
I thought I can achieve it getting the coordinates X,Y of the point where the swipe event is recognized and then animate the move between the current viewport and the next "overflow hidden" div. What I'm missing is: which is the event listener that would listen at every thumb move so that I can calculate the distance in pixel between the current point and the starting point, automatically updating the value for the animate function?
the event you are looking for is touchmove
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
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.