Satisfying Black Fire Cursor Trail Animation
HTML-код
- Опубликовано: 25 ноя 2022
- Learn how to create a cursor trail animations that follows the cursor based on the relative position of the mouse with HTML, CSS, JavaScript.
Codepen: codepen.io/zainzafar/pen/oNypoEr
Gradient Generator: www.learnui.design/tools/grad...
Extra 🔥: People were curious on how to get that inverted effect I didn't include it as part of making it short so here's the version if you are interested in inverting colors
Codepen (Inverted Color Effect): codepen.io/zainzafar/pen/KKejxQg
#javascript #webdevelopment #codepen #animations
![Darren Waller - Who Knew (Her Perspective) [Official Video]](http://i.ytimg.com/vi/GytDjB8u6bM/mqdefault.jpg)
Perfect Video!! but now i can't press buttons or select text, what should I do?? Its like if the Mouse isn't working
By setting "pointer-events: none;" to .circle class should do the trick. Also updated codepen's CSS section, just in case you want to get an idea. Thank you for highlighting this.
@@codemorphism thanks for the quick response friend! I appreciate your content
You should have more than 150k subs. Your production quality is top notch
Thanks for sharing this. So cool!
Wow! Really nice effect! Thank you for the video!
I love it! Nice and concise tutorial too ^^
awesome video. clear and concise. gonna try and implement something similar to this on a project soon.
Subscribed my dude. Tutorial is short and easy to follow. No unnecessary things.
Keep up the good work.
thank you 🙌
Svelte made me love watching Vanilla JS content because it's so easy to apply it with it.
thank you very much! Great work!
🙌
+1 sub , short explanation , nice music in the background & i learned few things thanks to you
Thanks Man. The mouse trailer is really beautiful. Have implemented it in my portfolio. Once again thanx!!
how you did it please tell me
thank you for your work, i was searching about custom cursors on websites, but i did'nt find any of them. then i searched on yt and here i found youuuuuuuuu!
really good video. inspirational and short. one client will soon have such a cursor :)
A quick subscription just like the video 🙌
Crazy one ❤
It is amazing
Remember me dude. I subscribed😇
BTW, this was a helpful tutorial and please make more like it.❤️❤️🔥
Perfect Video
Perfect 👌🏼
Thank u.
Subscribed & liked 👍
Great content and really simple that ur simplicity and the way you highlights little things in ur video reminded me of a similar creator, Hyperplexed. Once again great content and you have successfully won my sub!
this comment made my day, thank you 🙏
you really need to make more video like this :D
For sure and thank you
NICE WORK
🫡
wow great
could you possibly ever make a app or program do the same thing so it dont not only work on a website?
I'm new here and i wonna subscribe just because of your quick response bro.
How to use it in the react. Since I am having many components in my file I slightly confused on how to use this in react. Help me!
Hi, Awsome tutorial.
Wanted to ask something, how can we delay the cursor following?
because I've created another simple small cursor and wanted this trailed cursor to follow that small cursor.
Thank you.
there’s .animate method that uses duration I believe and can help achieve the goal, I’ll try creating a code snippet that I can post the link for
looks so fun working on this kinda project
totally 💯
more like this plsss
I have posted another video 2 days, I hope it fits the bill
Will it work on scrolling ?? 😢
Really nice video.. I wanted to implement this in react using framer-motion but the nextCircle thing is kinda difficult to do and I am clueless. Any help on how to get the next Circle's coordinates in react?
I haven’t used framer motion but should be the logic
very nice
🙌
Bro, this is fantastic and exactly what I’m looking for. I’ve got a problem though. I’m using Webflow to build a site. How would I go about the injection of the code? Should I just create x amount of div blocks called ‘circle’?
I haven't worked with Webflow, but this code should work on any site that supports HTML, CSS, and JS
hey bro, were you able to get it done on webflow?
hey i love that cursor and i wanted to use it for obs on a scene where you cant see the regular cursor, do you have a e.g. python script for that or any other way to do this?
I am sorry but I don’t get what you mean by python script for this?
@@codemorphism for obs, open broadcaster software, but doesnt have to be a script
The second hyperplexed
Hello! I absolutely love this and want to add this to my framer website and was wondering if you could help me out with it.
havent worked with framer but if it allows custom script/css and some html, you can get the link for code in description
You skipped the part where your supposed to use backdrop filter to invert whats behind it, and how would you stop it from inverting the other circles?
Yeah that wasn’t in scope of the video but people liked so I created that too, it was in description, please check this out: codepen.io/zainzafar/pen/KKejxQg
Nice work dude!
Remember to give me a thumbs up when you reach a million.
hey bro, this is soo interesting. Not working on elementor. can you please make a video for
elementor users???
Can you make cursor like this
Great tutorial! I noticed an issue when I tried to use it on my site, it works well initially but when I scroll further down a long page the cursor doesn't follow the mouse down the page.
Setting "position: fixed" should handle this for you, since it was tutorial on how to replicate the behaviour, I didn't account for scrolling page. Thank you for the catch.
Here's the codepen with what you are looking for: codepen.io/zainzafar/pen/abKgBNX
@@codemorphism Thank you! more of these tutorials would be really appreciated.
@@codemorphism i have the same issue, position fixed doesnt solve it. what can i do?
@@watusi1988 can you share the code or at least give me reproducible version-of the code?
this is the only video i found to create this king of effect thanks for helping us.but when I tryed to run this on VS code it wont do anything.how can i fix it sir? (It is not working even when i just copy it from code pen)
can you provide the link that reproduces the issue probably a sandbox link or something
@@codemorphism unfortunatly i dont know how to do that but I can send you some screen shots of the code via Gmail is it fine?
You didn't add that inversing of colors feature when you go over items on the page, I added a few text elements and the circles were blocking me from seeing them
I wanted to but that would kill the short video purpose.
@@codemorphism I get it, but props to you, I definitely subscribed, you’re going places man, at least your account is, because your content deserves better exposure
@@Xenodinger No worries. There you go with inverted colors. Codepen: codepen.io/zainzafar/pen/KKejxQg
@@codemorphism Thank you very much, I know it will be harder for you to personally reply to comments as your channel grows, but I hope you keep up this energy
Why does it perfectly work on codepen, when i apply this effect on my own html, the first circle starts to cut off and looks unpleasant please let me know if anyone knows a way around this
can you share the link
Why does mouse scroll not work
Do you need a library for this? The .js part doesn't seem to be working with my html page, the dot stays at the upper left corner.
I have shared the link in the description, it should work out of the box, no library is required to run this
@@codemorphism Wouw thank you for the quick respose! I tried with the code from the description but it still doesn't seem to work. I get an error saying "uncaught type error: cannot read properties of null (reading 'style')" refering to line 47-48 in the js code.
@@lenamusatov3359 are you sure you are using the correct class names both in html and js?
@@codemorphism Omg It works now! I made a completly new file and tried again and it works now. I might have accedentally done something weird. But again thank you very much for your help and for the video! I realliy like this cursor effect, it's also so satisfying haha
Very nice! I made some adjustments to make it run in react, I solved a problem that I had when clicking on other elements (all the other elements of my project have z-index: 100;), anyway if it helps someone here I leave the code:
import React, { useEffect } from 'react';
import './style.css'
function MouseTrail() {
useEffect(() => {
const circles = document.querySelectorAll('.circle');
const coords = {
x: 0,
y: 0,
};
circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});
const bg = document.createElement('div');
bg.classList.add('bg');
document.body.appendChild(bg); // Agregamos el div bg al body
const animatedCircles = () => {
let x = coords.x;
let y = coords.y;
circles.forEach(function (circle, index) {
circle.style.left = circle.x - 12 + "px";
circle.style.top = circle.y - 12 + "px";
circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
circle.x = x;
circle.y = y;
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) *0.5;
y += (nextCircle.y - y) *0.5;
});
}
window.addEventListener('mousemove', (e) => {
coords.x = e.clientX;
coords.y = e.clientY;
animatedCircles();
});
}, [])
return (
{/* Agregamos el div bg en el renderizado */}
);
}
export default MouseTrail;
style.css :
.circle{
height: 24px;
width: 24px;
border-radius: 24px;
background-color: azure;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: difference;
z-index: 0;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1000;
}
I have another problem, when I scroll the "Mouse Trail" it stays away from the cursor :(
Fixed, literally 🤣 style.css = .circle {
position: fixed
}
Thanx bro. Your code was of great help to me.
why it always happen the thing i have built 2 years ago now youtube recommends me hey see this
what about that effect when cursor is not moving ...the effect in its static form
I wanted to keep the video short
Do you have a video on doing this with react?
It's literally the exact same bro
hi! I have a bug, that when i scroll down in the website, the default mouse and the animated mouse are separated, how can i fix that?
I have resolved issue using pageX and pageY insted of clientX and clientY.
thanks for updating
does it work or is it just for the site bc im looking for a cursor and this showed up
site only ofc
@@codemorphism sorry bc my friend send it wasnt site only
How do I download this and make it my pc's mouse cursor trail
You don't. It's a web design.
Just grt tutorials bro...i thing that i wann remove mouse arrow from circle.. i mean its works fine but circle display with arrow cursor so i wanna remove that display only circle.
This line (👇🏻) should get you going
* { cursor: none; }
@@codemorphism thank you so much....plz keep on posting these types of content.
Damn I don't know why but my mouse animation moves only horizontal and not vertical :'( Help!
Technically it shouldn’t, are you changing both x and y?
100 subs :)
wow thank you🔥
What's that software
What do you mean by whats that software? Are you talking about codepen.io
How would you implrmrnt this in react?
Not that I can’t implement but have you tried asking Chat GPT?
As the logic remains the same it’s just a library change
@@codemorphism I figured it out :)
Can it be add to wordpress elementor ?
haven’t played with elementor, PS its vanilla JS and CSS if elementor allows that you to do that should be fine so you’ll have to try it out yourself
@@codemorphism ok i will try thanks
can i get the source code of this Black Fire Cursor video???
you can use codepen link shared in the description
It is not working on my html file (vs code)?
You can checkout the codepen link shared in the description
yes I seen it but dosent work please help me sir @@codemorphism 😢
how can i use the cursor?
what do you mean?
if it does work how do i get it bc i have the zip
what do you mean you have a zip? I am not following
@@codemorphism i mean is it possible to apply it to actual pc
it's not working for me at all =( but i'm not good at coding
check this link: codepen.io/zainzafar/pen/abKgBNX and try following tutorial with detail code in the link
ruclips.net/video/DcUGqBXGaN4/видео.html
How can this mouse run in the background?
that’s a desktop app but can be achieved via WebGL in web as well
Your outro content hide the final code you edited 👎
I have completely removed the outro, thanks for pointing it out
when I refresh the page then the mouse is stuck in the top
on your site or on codepen link?