No video

Awesome Cursor Animation With CSS & Javascript!

  Рет қаралды 148,348

developedbyed

developedbyed

Күн бұрын

Пікірлер: 290
@mysterOrel7924
@mysterOrel7924 4 жыл бұрын
Ed i laughed so much when you kicked the cursor lmao
@anjumayoub9077
@anjumayoub9077 4 жыл бұрын
that kick was awesome LOL 😂
@geeknrd962
@geeknrd962 3 жыл бұрын
same. I didn't expect to laugh though.
@vimukthirajakaruna8827
@vimukthirajakaruna8827 3 жыл бұрын
Same 😬😂
@codeIMperfect
@codeIMperfect 3 жыл бұрын
This is one of those things that make you look stupid if you show them to someone, but are extremely funny
@onlyforyou9999
@onlyforyou9999 3 жыл бұрын
Yes mee too bro😁😁😂😂😂
@dawidepl7807
@dawidepl7807 4 жыл бұрын
When it take you 3 hours to make working cool looking navbar, and then you see guy making better in 2 minutes...
@nglx5846
@nglx5846 4 жыл бұрын
This comment made me laugh a lot but at the same time it hurted me HAHAHA
@dawidepl7807
@dawidepl7807 4 жыл бұрын
@@nglx5846 LMAO
@danielhughes3758
@danielhughes3758 4 жыл бұрын
Nothing wrong with that. Everything in programming takes much longer to learn than it does to implement once you really know it. I'm pretty certain it took him longer than 3 hours to get to this level with CSS 😉
@dawidepl7807
@dawidepl7807 4 жыл бұрын
@@danielhughes3758 Hah, true. For now I have big problems with designing :/
@HamzaKhan-qm5bl
@HamzaKhan-qm5bl 3 жыл бұрын
Ed has already admitted that he designs or works on his video cintent before shooting so defunitely he did not dk it in 2 mins. No one can if you don't have a planned design.
@imshubhamcodex
@imshubhamcodex 4 жыл бұрын
Bro I see your all videos, and some of them repeatedly. You always put smile on my face. You made me a web dev. but still I am in the process to achieve your's level. Love from India ❤️
@souravvashisht7153
@souravvashisht7153 2 жыл бұрын
bhai kitne progress hua ? :)
@devdude7607
@devdude7607 3 жыл бұрын
You never fail to inject your viewers with your humor! Best greetings ever!
@yoyoneel45
@yoyoneel45 4 жыл бұрын
You are just really amazing, I love your character and your tutorials are based on trendy websites which were what I needed for my assignment. I'm actually basing myself on 5 of your tutorials. I'm so glad to have found you.
@VictorBalaguera
@VictorBalaguera 3 жыл бұрын
I love you and I love this tutorial. With that said, when implementing and customizing this I found an interesting bug: if you have a site with multiple sections and so on, the custom cursor on scrolling will go up and down like crazy. While this is fun, it is not very useful. To fix this: 1. On css, change position: absolute to position: fixed; 2. on js: change e.pageX and e.pageY to e.clientX and e.clientY. That should do it.
@rohitb23
@rohitb23 3 жыл бұрын
Thanks. Why are you like the only person who noticed this? Lol I went to the comments expecting more and had to search through them.
@VictorBalaguera
@VictorBalaguera 3 жыл бұрын
@@rohitb23 anytime!
@buchke_bhai
@buchke_bhai 2 жыл бұрын
Thank You soo much man!
@infosandfacts7536
@infosandfacts7536 4 жыл бұрын
The music let’s me feel I am in a mega cool bar - chilling 😛
@heezy6640
@heezy6640 4 жыл бұрын
I can't wait for your JavaScript courses mate! Your content is top notch - much love from Australia!
@katarinakivimaa
@katarinakivimaa 10 ай бұрын
i'm actually obsessed with your videos thank you
@RameenFallschirmjager
@RameenFallschirmjager 4 жыл бұрын
Your channel is the MTV of programming youtubers!
@AccessCode101
@AccessCode101 4 жыл бұрын
14:37 "Ok, let's calm down everybody."
@codeIMperfect
@codeIMperfect 3 жыл бұрын
..we need to focus🤣🤣
@davidedelgatto5631
@davidedelgatto5631 4 жыл бұрын
I cannot wait to buy your JavaScript course
4 жыл бұрын
Especially that it doesn't work.
@Yourworstneighbour
@Yourworstneighbour 4 жыл бұрын
Just wanted to say that you're really amazing for sharing all our your great knowledge. In addition, for having a really good sense of humor to top it all off. In the future, when I get the chance to support you, I will! Hope you have a great day :)
@CodePhilipYT
@CodePhilipYT 4 жыл бұрын
This looks really awesome! I will try to recreate this
@shargenezangana9320
@shargenezangana9320 3 жыл бұрын
Your are a great teacher that keeps the experience entertaining but very informative. Thank you
@samanthkumar1332
@samanthkumar1332 4 жыл бұрын
your tutorial keeps me boosted! thank you @Dev Ed
@peternicholson26
@peternicholson26 4 жыл бұрын
This is excellent timing for a project I've got on at work. Champion
@hampusbeijer604
@hampusbeijer604 4 жыл бұрын
Dude your the best! You're funny, professional, and you just fkn rock. Keep going bro!!!!
@Daamilola
@Daamilola 4 жыл бұрын
Thanks, Ed. This is brilliant. Subscribed!
@kavorka8855
@kavorka8855 3 жыл бұрын
Your sense of humour is your strong point!
@valentineaglr6983
@valentineaglr6983 4 жыл бұрын
Thank you so much !! I was trying since this morning 😅
@cerealrakist7360
@cerealrakist7360 4 жыл бұрын
Dude you are so awesome!! Best personality I have ever watched!
@codingwithnamit8551
@codingwithnamit8551 3 жыл бұрын
I didn't know that we can use negative z-index! Btw helpful video👍
@thugartist9268
@thugartist9268 4 жыл бұрын
Best tutorials ever!. Ed, when you will make a Pyhon course, designed for total beginners? For sure I will buy it, because your teaching style is awsome.. :)
@heipadegdingamlesei
@heipadegdingamlesei 3 жыл бұрын
hahah finally a web dev that makes a tutorial enjoyable! way to go ed I was laughing so much at the sponsor joke
@becayebalde3820
@becayebalde3820 2 жыл бұрын
Thank you so much for this awesome and fun course!
@separatetraveler8226
@separatetraveler8226 3 жыл бұрын
It's really cool !! Thanks Dev Ed .
@patrikmelicherik9626
@patrikmelicherik9626 4 жыл бұрын
I was always wondered how this effect is made. Now I know that it's really easy.
@PabloPellegrini
@PabloPellegrini 4 жыл бұрын
0:19 I did not expect that xDDDDDD
@shreyaskshirsagar552
@shreyaskshirsagar552 2 жыл бұрын
Thanks, helped a lot !
@nubcops220
@nubcops220 4 жыл бұрын
I swear to GOD your soooo good i just click on your videos becuase I like your personality your amazing please never ever stop uploading plz
@flolegend6402
@flolegend6402 3 жыл бұрын
same here. I even watch videos that dont even concern me. Best KZfaqr out there 100%. Dev Ed> pewdiepie
@dequan300
@dequan300 4 жыл бұрын
Can't wait for the courses
@vasylbats2544
@vasylbats2544 4 жыл бұрын
I've worked on something similar recently. But I added position "fixed" to the tracking block at the top left corner. Then I changed transform-translate on "mousemove" with JS. I read somewhere on Stack overflow that it's better to change transform properties instead of top & left for the smooth transition effect. I used e.pageX and e.pageY as well but I got problems with transform on Y-axis on page scroll, so I had to change it to e.clientX and e.clientY. So the line of code looked like this: /* let translation = "translate(" + e.clientX + "px, " + (e.clientY + document.body.scrollTop) + "px)"; item.style.transform = translation; */ I am not sure if I've done it right but it works fine too :)
@richyrose99
@richyrose99 4 жыл бұрын
i really love your videos i always learn so much so thank you :)
@salekinrupak7055
@salekinrupak7055 4 жыл бұрын
Can't wait for your Js course Ed! 😍
@icalowallpapers280
@icalowallpapers280 2 жыл бұрын
the opening killed me 🤣🤣🤣🤣🤣🤣🤣🤣warap with the cursor
@x9wozz
@x9wozz 3 жыл бұрын
Instead of making items in nav turning their color to white you could just use backdrop filter to invert. Imho that would be cooler and wouldn't make longer text disappear. Cool nonetheless
@4MXW
@4MXW 2 жыл бұрын
thx u sir
@sythe263
@sythe263 3 жыл бұрын
Dude you are amazing !
@manuelpineda924
@manuelpineda924 4 жыл бұрын
I love your videos man! Thank you so much
@DavidElstob73
@DavidElstob73 4 жыл бұрын
Super cool tutorial, Ed. Add the cursor: pointer back on the hovered-links and it looks nice! :)
@developedbynick
@developedbynick 4 жыл бұрын
we need a javascript course. I have your html and css course, and I've watched it. now, we need a JS course ASAP
@developedbyed
@developedbyed 4 жыл бұрын
Working on it 😀
@developedbynick
@developedbynick 4 жыл бұрын
@@developedbyed Thanks for reading Dev. It's an honour
@jeffchow6722
@jeffchow6722 3 жыл бұрын
i spit my water when Ed kicked the cursor HAHA
@aparalyzedconch
@aparalyzedconch 4 жыл бұрын
XD Why is your desktop so clean, I'm jealous. Your tutorials rock by the way.
@rychei5393
@rychei5393 Жыл бұрын
Clicked like for that amazing intro!
@0bbie610
@0bbie610 4 жыл бұрын
Also. I'd probly just buy your javascript course because you're awesome. And very knowledgable
@seemasaharan9461
@seemasaharan9461 4 жыл бұрын
My favourite tech KZfaqr.
@MLGRicky
@MLGRicky 3 жыл бұрын
bro the squarespace ad had me dying! xD
@brigittavarga5525
@brigittavarga5525 3 жыл бұрын
Thank you so much for this! It‘s really helpful (and fun) :-)
@mirinbrahsickcuntbra
@mirinbrahsickcuntbra 2 жыл бұрын
I almost double tapped the sponsor part lol got me there
@mahammadalialkhasli9004
@mahammadalialkhasli9004 4 жыл бұрын
Perfect. You are amazing.
@anjumayoub9077
@anjumayoub9077 4 жыл бұрын
really excited for JavaScript 🔥😍
@jaredzuniga827
@jaredzuniga827 4 жыл бұрын
Love your tutorials!
@AshishNallana
@AshishNallana 3 жыл бұрын
Ed ... ❤️ I love the fun you make in between the videos😀😀😀😀
@livioangelim7604
@livioangelim7604 2 жыл бұрын
You are great, thanks for sharing!!
@jumaelahmed9995
@jumaelahmed9995 3 жыл бұрын
you are my fav dev Ed,❤️
@eng-ammaralsaiary545
@eng-ammaralsaiary545 3 жыл бұрын
I designed an entire cuberto website and it took me a whole month of continuous work at a rate of 9 hours per day
@jamil_mikael
@jamil_mikael 3 жыл бұрын
it's going great on my end , but the cursor won't move away from the side of the window object and its frustrating ...its at the border and going nowhere else !!
@dado9873
@dado9873 4 жыл бұрын
Thanks Ed for awesome video.
@sudheeps3584
@sudheeps3584 4 жыл бұрын
maaan!!!! ur amazing .. big fan of urs .. learnt most of my coding from ur channel ... keep on it doing ... also do a MERN stack video :P
@vskand
@vskand 4 жыл бұрын
Appreciated the tutorial, appreciated Brock Berrigan.
@lilykustova6359
@lilykustova6359 4 жыл бұрын
Great video! Thanks a lot!
@SvetaSveta-ms4hi
@SvetaSveta-ms4hi 3 жыл бұрын
Thanks a billion. You're amazing. Be happy 😍
@bobbychicano
@bobbychicano 3 жыл бұрын
LMFAO when you kicked the cursor
@Stoney_Eagle
@Stoney_Eagle 4 жыл бұрын
Your openings crack me up every time 😂
@reedbarber
@reedbarber 4 жыл бұрын
Ed, You're the Golden Child of WebDev. Awsome personality to boot! BTW, what Screen Recording software do you use? *Peace!
@gookanga
@gookanga 4 жыл бұрын
DevEd for president
@rishi76
@rishi76 4 жыл бұрын
That was Amazing,
@will2r
@will2r 4 жыл бұрын
ed u are god tier
@user-vt9co1pv4t
@user-vt9co1pv4t 4 жыл бұрын
When you watch exactly what you searched for and hear on the background the remixed song from your favourite movie. That's sooo good, lol
@DEEPAKKUMAR-xe2vb
@DEEPAKKUMAR-xe2vb 4 жыл бұрын
Waiting for blender 😍🔥
@mohammedamin3908
@mohammedamin3908 4 жыл бұрын
Will this thing allow any element on the web page to be clickable?
@biswajitmondal4263
@biswajitmondal4263 4 жыл бұрын
Please make a full detailed and exciting javascript and its frameworks i.e angular, react courses like html css.... i am very excited after joining this course
@hikarujamiemasamiya
@hikarujamiemasamiya 3 жыл бұрын
wtf you made me laugh from no where you genius thank you for your mom and dad
@Mahmoud-cn8il
@Mahmoud-cn8il 4 жыл бұрын
Thank you so much ^_^
@the_awakening_msaha5132
@the_awakening_msaha5132 4 жыл бұрын
1000 views in just 27 minutes... Yes I check yt notifications everyday for your latest videos. #my_gorgeous_teacher_on_the_internet
@shauryaveerchaudhry2163
@shauryaveerchaudhry2163 4 жыл бұрын
Like mentioned previously by others, you made an efficient navbar. Do you have a navbar which is responsive with minimal code as all responsive navbars require long codes
@telugucartoonsworld2565
@telugucartoonsworld2565 4 жыл бұрын
This is the only website of yours that i can do without seeing your video.
@psychologyfactstothinkabout
@psychologyfactstothinkabout 4 жыл бұрын
Make a loading icon so like the border of the icon is moving with blue like how google sign in has the blue thing moving, add that around the icon or a part of the icon shows the page is loading or doing something
@majedulislam1712
@majedulislam1712 4 жыл бұрын
You are awesome man I much more get pleasure to see your tutorials then others. By the way I have a question to you that "which laptop do you use? " 😜. because I'm going to have a new laptop but I'm confused for get a batter performance on my programming. I hope will you help me🙁 just by a reply
@developedbyed
@developedbyed 4 жыл бұрын
I do most of my work on a desktop. But any laptop will do fine with a decent ssd and a decent cpu.
@zubairjamil1632
@zubairjamil1632 4 жыл бұрын
Thank You Soo Much
@no_name_1998
@no_name_1998 4 жыл бұрын
Love you man...Thanks
@SwarupKumarKuila
@SwarupKumarKuila 4 жыл бұрын
I am from India , I love your Chanel, I learn many things from you , thank you soo much.
@djsquid1988
@djsquid1988 4 жыл бұрын
This is awesome, but when implemented it's really laggy when scrolling down a page (Chrome) any fix for that?
@nigelmoyes9798
@nigelmoyes9798 3 жыл бұрын
If you use clientX and clientY instead of pageX and pageY, the cursor will behave as expected.
@4MXW
@4MXW 2 жыл бұрын
Also what I needed to add was a box-shadow. So I don't see the "pixelated" kind of laggy border when I move the mouse too fast.
@codingwithkenny6492
@codingwithkenny6492 3 жыл бұрын
Rip Cursor, Now Ed will be known as the cursor tormentor LOL!!! :) But I like it!
@4MXW
@4MXW 2 жыл бұрын
14:47 so it changes to white, but this kind of blocks it... I died. Was so good after the "omg let's calm down everybody".
@taylortoast2
@taylortoast2 4 жыл бұрын
Very cool!
@swingkoala4020
@swingkoala4020 4 жыл бұрын
Hello, been here for quite a while. Your react things were deadly easy to understand as well as Grid / Flex. You made them SO EASY for me to understand. I'd like to see some BackEnd courses from you. {Express} Thank you for consideration!
@darkcodelab2866
@darkcodelab2866 4 жыл бұрын
Legends say that it is not easy to get a heart from Dev Ed.
@developedbyed
@developedbyed 4 жыл бұрын
The legend is true
@helentorok8592
@helentorok8592 4 жыл бұрын
You are awesome!! Thank you very much
@mdjamilkashemporosh
@mdjamilkashemporosh 4 жыл бұрын
what a shot man
@matigasurat510
@matigasurat510 3 жыл бұрын
Thank you for this tutorial. and it is awesome #fun
@NikhilAdiga
@NikhilAdiga 4 жыл бұрын
I lost it at that kick😂😂😂
@abinashmohanty4258
@abinashmohanty4258 4 жыл бұрын
Cursor: none; is not working on hovering over links and buttons. Please tell How to solve it?
@gradientO
@gradientO 4 жыл бұрын
Please do a video about *Deno* !!
@SAAARC
@SAAARC 4 жыл бұрын
Good content my man
@gabrielalejandromartinezla327
@gabrielalejandromartinezla327 4 жыл бұрын
How you learn or create this amazing stuffs!! Ed you're a great dev youtuber haha
@mihailodukic601
@mihailodukic601 4 жыл бұрын
Sup Ed the amazing Dev from Romania . Love from Serbia !!!
@hakurubappa9923
@hakurubappa9923 4 жыл бұрын
Pewdiepie of programming
@volkanongun1112
@volkanongun1112 4 жыл бұрын
Thank you
@bongamene3087
@bongamene3087 4 жыл бұрын
I actually love you!
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 946 М.
هذه الحلوى قد تقتلني 😱🍬
00:22
Cool Tool SHORTS Arabic
Рет қаралды 61 МЛН
Gli occhiali da sole non mi hanno coperto! 😎
00:13
Senza Limiti
Рет қаралды 22 МЛН
Please Help Barry Choose His Real Son
00:23
Garri Creative
Рет қаралды 23 МЛН
Люблю детей 💕💕💕🥰 #aminkavitaminka #aminokka #miminka #дети
00:24
Аминка Витаминка
Рет қаралды 724 М.
The secret to mastering CSS layouts
17:11
Kevin Powell
Рет қаралды 277 М.
Make Awesome SVG Animations with CSS // 7 Useful Techniques
12:20
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Рет қаралды 1,7 МЛН
Top 10 CSS Tricks You Didn't Know!
24:37
developedbyed
Рет қаралды 521 М.
Learn how to use Media queries & Container queries
34:33
Kevin Powell
Рет қаралды 65 М.
Javascript Animated Navbar Tutorial
26:47
developedbyed
Рет қаралды 143 М.
Incredible scroll-based animations with CSS-only
32:23
Kevin Powell
Рет қаралды 421 М.
Beginner Vanilla Javascript Project Tutorial
1:15:19
developedbyed
Рет қаралды 899 М.
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 168 М.
How to take control of Flexbox
16:01
Kevin Powell
Рет қаралды 130 М.
هذه الحلوى قد تقتلني 😱🍬
00:22
Cool Tool SHORTS Arabic
Рет қаралды 61 МЛН