Welcome, on board. Math.floor method is used to round down the decimal numbers. Say for e.g., the given number is 12.34 (or) 12.99, the result would be 12. In simple words, it just ignores the decimal part. Hope it helps.
Do you think it's possible to do something like this but use the circles to create an opacity? An example would be having an initial div with a background img and then an inner div with a black background. Then where the mouse hovers make the black background have 0 opacity in a small circle around the mouse?
This works but as soon as I start scrolling down the circle doesn't follow my cursor anymore, I have to scroll back up for it to follow . Please help me
Great content ! Helped me a lot. Just 1 problem. I have a navbar in my page, and "onmousemove" has disabled the navbar links. How do I fix that ? How do I disable the onmousemove effect from the navbar? Thanks in advance!
You can fix it by using setting higher values to z-index for the navbar. Anyways, I'm not sure whether it will work or not since I don't know how you designed your page. Give it a try and let me know. We will sort out the issue. BTW, thanks for the appreciation.
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.
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..
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.
I just wanted to know is there any performance issue if I use document.body.removeChild(circle); Instead of circle.remove(); in the setTimeout function
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
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! =)
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
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.
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).
Remember to remove the elements after they've been rendered. Something like:
setTimeout(() => {
circle.remove();
}, 300);
Thanks for this optimisation. This will prevent us from polluting the DOM from so many elements.
hey it's so useful, Thanks a lot man, God bless you 😇
Awesome 👍👍👍
Thanks for the animation.
Short, simple, and best.
Woah clean and slick effect! Would be really helpful for the video if you show the effect at the start of the video though.
Thanks! Will do from the next videos!!
I like your codding, you explain very easy and step by step. It is very important for me.
Thanks....
You're most welcome. Subscribe to our channel and introduce to others.
do you have a video where you make a div by using screen coordinates
What's your use case?
instead of circles whether any name or current time or any specific text can be move along with the cursor when mouse moves?
This works but as soon as I start scrolling down the circle doesn't follow my cursor anymore, I have to scroll back up for it to follow
Share your code and we will take a look into it. Will help you ASAP.
Thanks,
simple code but very creative
Thank you. Please share with others too
Thank you very much...works like a charm
The best tutorial!!! Thanks
what if i want to make an logo besides of circle or any other shapes ,where my mouse pointer is moving!!
I want to move powder or dust or particles on the background image and display the background image on mouse hour effect is it possible?
You can do whatever you want. Just take the logic from this video and apply in whatever effect you want.
It can only be used in the first section.
how can i use it for full webpage
Use the below piece of code to make it work:
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
circle.style.left = (event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0)) + 'px';
circle.style.top = (event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 )) + 'px';
@@VerkkoNet 💙
Best animation
Thank you
Nice code. New subscriber👌💪 but can you explain Math.floor?? I dont understand that. Nice video btw.
Welcome, on board.
Math.floor method is used to round down the decimal numbers. Say for e.g., the given number is 12.34 (or) 12.99, the result would be 12. In simple words, it just ignores the decimal part. Hope it helps.
@@VerkkoNet thnx this helps a lot👍✌
Do you think it's possible to do something like this but use the circles to create an opacity? An example would be having an initial div with a background img and then an inner div with a black background. Then where the mouse hovers make the black background have 0 opacity in a small circle around the mouse?
Anything can be done through programming. If you want to have something like that, you can contact our paid live support team to help on the topic.
I am also thinking about something like that ! , Have you found your answer ?
@@deepgandhi9753 unfortunately I have not. I didn't focus much on it because I am in school and have been busy with homework
This works but as soon as I start scrolling down the circle doesn't follow my cursor anymore, I have to scroll back up for it to follow
. Please help me
Contact our live support. We will help you to fix the problem.
Contact our live support, we will help you fix the problem.
Great content ! Helped me a lot. Just 1 problem.
I have a navbar in my page, and "onmousemove" has disabled the navbar links.
How do I fix that ?
How do I disable the onmousemove effect from the navbar?
Thanks in advance!
You can fix it by using setting higher values to z-index for the navbar. Anyways, I'm not sure whether it will work or not since I don't know how you designed your page. Give it a try and let me know. We will sort out the issue. BTW, thanks for the appreciation.
@@VerkkoNet Thanks a lot again! It worked !! Keep uploading such quality content. :)
@@amanbhatnagar2819 Sure.
hey, it worked for me until the end. but, when I'm trying to add random colours, it's not working. why?
Try it again. When you are not able to find out the solution, check the description for the source code.
Awesome!!
Thank you. Please do share with others. Subscribe to our channel if not done already.
how to apply in a whole HTML page..it's showing in particular section
Use the below piece of code:
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
circle.style.left = (event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0)) + 'px';
circle.style.top = (event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 )) + 'px';
this is awesome but how can i remove the element after moving the mouse?
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.
Download the source code from the description if you still have any doubts.
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..
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.
I just wanted to know is there any performance issue if I use
document.body.removeChild(circle);
Instead of
circle.remove();
in the setTimeout function
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
+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.
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! =)
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 You are always welcome. Don't forget to subscribe and she with others.
superb ..
Thank you. Please share with others too.
How to make the cursor to be able to click button?
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.
I see, thanks for your detailed explanation! :D
+WILLSON KING TIN LAW You're welcome. Please help us grow by sharing our channel with your friends and family
Wow man
Thank you :)
nice bhai
thank you bhai
Thank you. Please do share with other too. Consider subscribing if not done already.
Magic Pure Magic!!
Thanks. Share with others too.
Pretty effect
Thanks dear friend. Share with others too.
its not downloadable why SIr
It should be downloadable. Can you check whether your browser blocks it?
Let me know still you face any issues.
.style.transition is not working
put transition in the css
Pls help now I can't click anything :(
Edit: NVM saw it on the comment Thanks bro
clientX and clientY explain please
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).
change opacity to some value but not zero
Could you please share the reason? So that we can discuss and learn something new.
Error
Check your code again. If you are not able to find it, check out the description for source code.