Hi guys I am workin on this web project and I need a div to follow the cursor on the screen. Now I've already found a piece of code online that does that but I need to make some tweaks to it. Only problem is...I am not experienced with Javascript or Jquery, hell this is the first time I've touched it. But that aside. What I want is that the circle follows the cursor but with a delay of 1 second and I want it to move a little "slower" and not at lightning speed. Ex. I move my cursor from the left side of the screen to the right side, after 1 second the div starts following the cursor and it must take the div about 2 seconds to go from the left side of the screen to the right side of the screen. Understand? Here is the existing piece (The div follows the cursor with no delay and at to much of a speed): http://codepen.io/bayron2304/pen/VKvOoZ Hopefully someone can help me out because I really need this to work! Thanks Edit: Also how do I solve the problem of the never ending scrollbar if the div comes to close to the bottom, top, left and right side of the screen?
BTW Is there also a possibility that the cursor is in the middle of the circle instead of on the top left? Thanks!
You can place it anywhere you want by changing (it should be in the middle now): margin-top:-32px; margin-left:-32px; Code (markup): https://jsfiddle.net/jvmravoz/9/ https://jsfiddle.net/jabnxgp7/8/
Had to use a bigger margin because my circle width and height is 900px but it works! Now this is my last question (hopefully). Is there a way to prevent the circle from creating and endless scroll without the use of overflow:hidden? Thing is, I need to be able to scroll on my website because it'll be a one page. Hope this is not to much of a pain in the *ss
Change body to the container div: https://jsfiddle.net/jvmravoz/11/ https://jsfiddle.net/jabnxgp7/9/ Then adjust the height to whatever (it's at 50% right now).