HomeОбразованиеRelated VideosMore From: VerkkoNet

Mouse Move animations in JS | JavaScript Tutorials | Web Development Tutorials

368 ratings | 23434 views
Learn to code Mouse Move animations in JS. This vide lesson will cover the mouse event handling and animation concepts in JS. Website: http://samsolomonprabu.com/ Donate & Support: https://www.verkkonet.com/downloads/donate.php?id=j9 Source code for "Mouse move animations in JS": https://verkkonet.com/downloads/index.php?id=j9
Html code for embedding videos on your blog
Text Comments (45)
Vishal Kashyap (2 months ago)
thank you bhai
VerkkoNet (2 months ago)
Thank you. Please do share with other too. Consider subscribing if not done already.
Vishal Kashyap (2 months ago)
nice bhai
Isoboye Dan-Obu (2 months ago)
Awesome!!
VerkkoNet (2 months ago)
Thank you. Please do share with others. Subscribe to our channel if not done already.
Kishor Shuvo (3 months ago)
clientX and clientY explain please
VerkkoNet (2 months ago)
We can get horizontal and vertical coordinate of mouse points by using clientX and clientY events. Top left corner is known as 0, 0 . This mean vertical zero is top most point (clientY) and horizontal zero is left most point (clientX).
윤대식 (3 months ago)
Error
VerkkoNet (3 months ago)
Check your code again. If you are not able to find it, check out the description for source code.
Keerthi Nandigam (3 months ago)
hey, it worked for me until the end. but, when I'm trying to add random colours, it's not working. why?
VerkkoNet (3 months ago)
Try it again. When you are not able to find out the solution, check the description for the source code.
superb ..
VerkkoNet (4 months ago)
Thank you. Please share with others too.
Biboy Lz II (5 months ago)
this is awesome but how can i remove the element after moving the mouse?
VerkkoNet (5 months ago)
You're welcome. Try to use native JS as much as possible. So that we learn many things in JS and we need not to depend on third parties. Cheers. Help us grow by sharing our channel with your friends and consider subscribing. Thanks.
Biboy Lz II (5 months ago)
wow thank you so much.. i used jquery in removing the circle by this code $("div").delay(500).fadeOut();. they're just the same but i preferred to use your code.. thanks a lot..
VerkkoNet (5 months ago)
Download the source code from the description if you still have any doubts.
VerkkoNet (5 months ago)
Replace the var circle into let circle and place the below code at the end of the function. setTimeout(function() { circle.remove(); }, 500); Circles will be removed immediately once it completes its job.
Mujib Khan (7 months ago)
its not downloadable why SIr
VerkkoNet (7 months ago)
It should be downloadable. Can you check whether your browser blocks it? Let me know still you face any issues.
Armine Khachatryan (9 months ago)
I like your codding, you explain very easy and step by step. It is very important for me. Thanks....
VerkkoNet (9 months ago)
What's your use case?
Armine Khachatryan (9 months ago)
do you have a video where you make a div by using screen coordinates
VerkkoNet (9 months ago)
You're most welcome. Subscribe to our channel and introduce to others.
Zzz (9 months ago)
What I do wrong? HTML <head> <title>Circle Animation in JS</title> <style type="text/css"></style> </head> <body> </body> CSS .circle { width: 20px; height: 20px; border: 1px solid #000; position:absolute; border-radius: 15px; } JS document.onmousemove = animateCircles; var colors = ['#ccc','#6cf','#eba13a'] function animateCircles (event) { var circle = document.createElement("div"); circle.setAttribute("class", "circle"); document.body.appendChild(circle); circle.style.left = event.clientX + 'px'; circle.style.top = event.clientY + 'px'; var color = colors[Math.floor(Math.random()* colors.length)]; circle.style.borderColor = color; circle.style.transition = "all 0.5 linear 0s"; circle.style.left = circle.offsetLeft - 20 + 'px'; circle.style.top = circle.offsetTop - 20 + 'px'; circle.style.width = "50px"; circle.style.height = "50px"; circle.style.borderWidth = "5px"; circle.style.opacity = 0; }
Keerthi Nandigam (3 months ago)
you have to give the css inside the head tag
VerkkoNet (9 months ago)
Download the source code from description area and check your source code is correct. If you still face any issues, let me know. Thanks.
WILLSON KING TIN LAW (10 months ago)
How to make the cursor to be able to click button?
VerkkoNet (10 months ago)
+WILLSON KING TIN LAW You're welcome. Please help us grow by sharing our channel with your friends and family
WILLSON KING TIN LAW (10 months ago)
I see, thanks for your detailed explanation! :D
VerkkoNet (10 months ago)
Add this piece of code at the end of animateCircles method: setTimeout(function() { circle.remove(); }, 500); Hover the button and wait till the animation finishes (i.e., 500 ms) and click. Although, It is not recommended to have these kind of animation in the user interacting areas. This video lesson is all about what you can do with mouse move. These kind of animations can be used in any section of the web page where user will not interact, but just view.
nikolassj (1 year ago)
Can I do this using notepad? Because it worked to some point and then it didn't wanna work anymore. I am trying to implement it on an existing website... HTML, school project
VerkkoNet (11 months ago)
+nikolassj You are always welcome. Don't forget to subscribe and she with others.
nikolassj (1 year ago)
Oh, when I scroll down on the website the animated circles stop following the cursor. They stay slightly above it, any suggestions? Sorry and thanks in advance~ Also now I can't click on links anymore :( Everything was easier without javascript, great tutorial nevertheless
nikolassj (1 year ago)
Oh my god. I typed one ' instead of " and that's why it didn't work. I am so sorry for troubling you and thank you for your fast reply. I love this video and I love your fast reply. Thanks a lot! =)
VerkkoNet (1 year ago)
+nikolassj you can use any code editor / text editor. If you are facing issues in following, take a look at the description for the source code.
simple code but very creative
VerkkoNet (1 year ago)
Thank you. Please share with others too
Alex Pawar (1 year ago)
Hey nice tutorial but I am unable to get rid of the scroll bars on side and bottom. can you tell me how to that?
body { overflow: hidden; }
Alex Pawar (1 year ago)
how to add overflow
VerkkoNet (1 year ago)
+Alex Pawar if you want to get rid off scrollbars, add overflow as hidden to the container.
vamshi (1 year ago)
Thank you very much...works like a charm
Mayank Rajput (1 year ago)
.style.transition is not working
Alain Barrios (7 months ago)
put transition in the css

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.