Тёмный

Awesome Cursor Animation With CSS & Javascript! 

developedbyed
Подписаться 940 тыс.
Просмотров 149 тыс.
50% 1

Опубликовано:

 

6 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 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 4 года назад
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 ? :)
@infosandfacts7536
@infosandfacts7536 4 года назад
The music let’s me feel I am in a mega cool bar - chilling 😛
@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.
@AccessCode101
@AccessCode101 4 года назад
14:37 "Ok, let's calm down everybody."
@codeIMperfect
@codeIMperfect 3 года назад
..we need to focus🤣🤣
@devdude7607
@devdude7607 3 года назад
You never fail to inject your viewers with your humor! Best greetings ever!
@RameenFallschirmjager
@RameenFallschirmjager 4 года назад
Your channel is the MTV of programming youtubers!
@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!
@heezy6640
@heezy6640 4 года назад
I can't wait for your JavaScript courses mate! Your content is top notch - much love from Australia!
@patrikmelicherik9626
@patrikmelicherik9626 4 года назад
I was always wondered how this effect is made. Now I know that it's really easy.
@katarinakivimaa
@katarinakivimaa Год назад
i'm actually obsessed with your videos thank you
@CodePhilipYT
@CodePhilipYT 4 года назад
This looks really awesome! I will try to recreate this
@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 :)
@Daamilola
@Daamilola 4 года назад
Thanks, Ed. This is brilliant. Subscribed!
@davidedelgatto5631
@davidedelgatto5631 4 года назад
I cannot wait to buy your JavaScript course
4 года назад
Especially that it doesn't work.
@hampusbeijer604
@hampusbeijer604 4 года назад
Dude your the best! You're funny, professional, and you just fkn rock. Keep going bro!!!!
@peternicholson26
@peternicholson26 4 года назад
This is excellent timing for a project I've got on at work. Champion
@shargenezangana9320
@shargenezangana9320 3 года назад
Your are a great teacher that keeps the experience entertaining but very informative. Thank you
@valentineaglr6983
@valentineaglr6983 4 года назад
Thank you so much !! I was trying since this morning 😅
@codingwithnamit8551
@codingwithnamit8551 3 года назад
I didn't know that we can use negative z-index! Btw helpful video👍
@samanthkumar1332
@samanthkumar1332 4 года назад
your tutorial keeps me boosted! thank you @Dev Ed
@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 RU-vidr out there 100%. Dev Ed> pewdiepie
@cerealrakist7360
@cerealrakist7360 4 года назад
Dude you are so awesome!! Best personality I have ever watched!
@heipadegdingamlesei
@heipadegdingamlesei 4 года назад
hahah finally a web dev that makes a tutorial enjoyable! way to go ed I was laughing so much at the sponsor joke
@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.. :)
@separatetraveler8226
@separatetraveler8226 3 года назад
It's really cool !! Thanks Dev Ed .
@kavorka8855
@kavorka8855 3 года назад
Your sense of humour is your strong point!
@becayebalde3820
@becayebalde3820 2 года назад
Thank you so much for this awesome and fun course!
@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 :)
@vskand
@vskand 4 года назад
Appreciated the tutorial, appreciated Brock Berrigan.
@DavidElstob73
@DavidElstob73 4 года назад
Super cool tutorial, Ed. Add the cursor: pointer back on the hovered-links and it looks nice! :)
@PabloPellegrini
@PabloPellegrini 4 года назад
0:19 I did not expect that xDDDDDD
@salekinrupak7055
@salekinrupak7055 4 года назад
Can't wait for your Js course Ed! 😍
@0bbie610
@0bbie610 4 года назад
Also. I'd probly just buy your javascript course because you're awesome. And very knowledgable
@icalowallpapers280
@icalowallpapers280 2 года назад
the opening killed me 🤣🤣🤣🤣🤣🤣🤣🤣warap with the cursor
@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
@MLGRicky
@MLGRicky 4 года назад
bro the squarespace ad had me dying! xD
@x9wozz
@x9wozz 4 года назад
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
@richyrose99
@richyrose99 4 года назад
i really love your videos i always learn so much so thank you :)
@anjumayoub9077
@anjumayoub9077 4 года назад
really excited for JavaScript 🔥😍
@mahammadalialkhasli9004
@mahammadalialkhasli9004 4 года назад
Perfect. You are amazing.
@aparalyzedconch
@aparalyzedconch 4 года назад
XD Why is your desktop so clean, I'm jealous. Your tutorials rock by the way.
@manuelpineda924
@manuelpineda924 4 года назад
I love your videos man! Thank you so much
@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
@shreyaskshirsagar552
@shreyaskshirsagar552 2 года назад
Thanks, helped a lot !
@brigittavarga5525
@brigittavarga5525 3 года назад
Thank you so much for this! It‘s really helpful (and fun) :-)
@DariaBrinza-w7u
@DariaBrinza-w7u 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
@sythe263
@sythe263 3 года назад
Dude you are amazing !
@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
@SvetaSveta-ms4hi
@SvetaSveta-ms4hi 3 года назад
Thanks a billion. You're amazing. Be happy 😍
@AshishNallana
@AshishNallana 3 года назад
Ed ... ❤️ I love the fun you make in between the videos😀😀😀😀
@jeffchow6722
@jeffchow6722 3 года назад
i spit my water when Ed kicked the cursor HAHA
@dado9873
@dado9873 4 года назад
Thanks Ed for awesome video.
@DEEPAKKUMAR-xe2vb
@DEEPAKKUMAR-xe2vb 4 года назад
Waiting for blender 😍🔥
@seemasaharan9461
@seemasaharan9461 4 года назад
My favourite tech RU-vidr.
@Stoney_Eagle
@Stoney_Eagle 4 года назад
Your openings crack me up every time 😂
@jaredzuniga827
@jaredzuniga827 4 года назад
Love your tutorials!
@rychei5393
@rychei5393 Год назад
Clicked like for that amazing intro!
@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
@livioangelim7604
@livioangelim7604 2 года назад
You are great, thanks for sharing!!
@lilykustova6359
@lilykustova6359 4 года назад
Great video! Thanks a lot!
@jumaelahmed9995
@jumaelahmed9995 3 года назад
you are my fav dev Ed,❤️
@gradientO
@gradientO 4 года назад
Please do a video about *Deno* !!
@rishi76
@rishi76 4 года назад
That was Amazing,
@SwarupKumarKuila
@SwarupKumarKuila 4 года назад
I am from India , I love your Chanel, I learn many things from you , thank you soo much.
@NikhilAdiga
@NikhilAdiga 4 года назад
I lost it at that kick😂😂😂
@telugucartoonsworld2565
@telugucartoonsworld2565 4 года назад
This is the only website of yours that i can do without seeing your video.
@Mahmoud-cn8il
@Mahmoud-cn8il 4 года назад
Thank you so much ^_^
@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!
@heyitzami442
@heyitzami442 4 года назад
What you did with the transition and the transition-property, you could have just set it as "transition: background 0.3s ease, transform 0.3s ease;"
@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
@helentorok8592
@helentorok8592 4 года назад
You are awesome!! Thank you very much
@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".
@tanercoder1915
@tanercoder1915 3 года назад
That music is mixed form a soviet movie 'Work romance'.
@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
@no_name_1998
@no_name_1998 4 года назад
Love you man...Thanks
@reedbarber
@reedbarber 4 года назад
Ed, You're the Golden Child of WebDev. Awsome personality to boot! BTW, what Screen Recording software do you use? *Peace!
@hikarujamiemasamiya
@hikarujamiemasamiya 3 года назад
wtf you made me laugh from no where you genius thank you for your mom and dad
@zubairjamil1632
@zubairjamil1632 4 года назад
Thank You Soo Much
@volkanongun1112
@volkanongun1112 4 года назад
Thank you
@untildawn5714
@untildawn5714 4 года назад
nice kick! never seen someone kicks a cursor :D
@SAAARC
@SAAARC 4 года назад
Good content my man
@kamal-ahmed
@kamal-ahmed 4 года назад
Your video editing skill is amazing. Please make a tutorial on it if you have some free time. And thank you very much for this awesome tutorial.
@mihailodukic601
@mihailodukic601 4 года назад
Sup Ed the amazing Dev from Romania . Love from Serbia !!!
@gabrielalejandromartinezla327
@gabrielalejandromartinezla327 4 года назад
How you learn or create this amazing stuffs!! Ed you're a great dev youtuber haha
@bongamene3087
@bongamene3087 4 года назад
I actually love you!
@matigasurat510
@matigasurat510 3 года назад
Thank you for this tutorial. and it is awesome #fun
@will2r
@will2r 4 года назад
ed u are god tier
@7ollock
@7ollock 4 года назад
DevEd for president
@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
@galalistationery9434
@galalistationery9434 4 года назад
hi sir I want to learn from you, you are a really great teacher
@codingwithkenny6492
@codingwithkenny6492 3 года назад
Rip Cursor, Now Ed will be known as the cursor tormentor LOL!!! :) But I like it!
@anjalibansal2726
@anjalibansal2726 4 года назад
great tutorial! :)
@mfmn6397
@mfmn6397 4 года назад
love your personality! hahaha
@taylortoast2
@taylortoast2 4 года назад
Very cool!
@hamzanasri9414
@hamzanasri9414 4 года назад
YOU ARE SO FUNNYYY, AND A VERY GOOD TEACHER!!!!
@R1vu3
@R1vu3 4 года назад
aight I'll waiting for the JS courses
@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 !!
Далее
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 965 тыс.
ПЛАН ПРОТИВОДЕЙСТВИЯ МЕДВЕДЮ.
00:28
Creating Custom Cursors - CSS Only, and JavaScript!
22:09
Learn Sass In 20 Minutes | Sass Crash Course
19:42
Просмотров 936 тыс.
Awesome 3D ANIMATION Javascript Tutorial!
35:11
Просмотров 683 тыс.
1 Trick To Creating Awesome Websites! (JS ANIMATIONS!)
26:51
Javascript Animated Navbar Tutorial
26:47
Просмотров 143 тыс.
Top 10 CSS Tricks You Didn't Know!
24:37
Просмотров 521 тыс.
Award Winning Animation With Only 20 Lines Of CSS?
6:59