In addition to being a great teacher, there's something very funny about this guy's presentation - there's a slight hint of self-deprecating humour and sarcasm (in a good way) which makes it unique, refreshing, and a joy to watch. Please don't change your style!
This is awesome! Thanks so much. One thing I’d love to see is a 3D model of the shoe so it looks less flat. Any plans on releasing content covering 3D objects on the web?
It always amazes me how something can seem extremely hard to make, but when you see how it is done, and break it down and take your time to learn how each line of the code works you realize it is not extremely hard anymore and you pick up a new trick to implement in your work, love your work Ed always something new to learn maybe i will use this when i make my mothers website, stay awesome Cheers
Dude, your videos and instruction is amazing. Keep it up! You're ability to break things down in an entertaining way really helps things stick. I'm super impressed. You blow any college professor I ever had out of the water.
Absolutely loved it. May be someday you'd do a video on doing such an animation on a react component, may be the same card so that we can understand how we're dealing with the same thing but for react ♥️
Oh boy! Your tutorials are really amazing and I'm easily been able to remember the syntaxes used in your videos. You always come up with unique and creative stuff.
Man! Thank you! I'm new on your channel and it's been great! And I've been binging watching your channel!! Keep it up with the awesome videos! I love the ones about css and js animations Cheers!
8:57 this is exactly how my senior developers use to explain things when they are upto something lmao Dude u just got a subscription just because of that 🤣
8:56 is like the best thing I have seen on the internet. It made me laugh alound man 🤣🤣. I saw it multiple time and each time it was more funny than before 😂
Stumbled across this by accident but loved your style. I always found javascript too much for my tiny mind but I'm actually going to give this a go. Great tutorial - you have a new subscriber
first of all thanks for this video, it was really useful. Second of all, this is by far the funniest video I've watched for you on RUclips. Keep up the good work, man.
First let me congratulate you for the channel. You have great way of explaining everything and the relaxed and funny comments are a great plus. This tutorial is so successful that LinkedIn is swarming of 3D cards. Keep up the great work.
its 01/20/2022 and it doesnt work properly. :/ the ${ } to refer the variable inside the css functions doesnt work, so i bashed my head trouble-shooting it until i found that i had to close quotes and use use plus sign, since the output is a string. something like: card.style.transform = 'rotateY(' + xAxis + 'deg) rotateX(' + yAxis +'deg)'; and the 'perspective: 1000px' value inside body{ } doesnt work either. i had to add a 'perspective(1000px)' as an attribute of the transform function in each element i wanted to pop out the screen. albeit all this changes i came with, in the end it is quite far from the visual result ed got in the video. mine is pretty bleh. hope its any config or plugin i dont have installed, cause i really wanted to reach some cool 3d effects like these :/ thanks note: im a noob, started out like 2 months ago.
I do graphics programming as well as web development and I like how this guy changes the perspective from orthographic projection to a model view projection. That's kinda sick but also priceless 😂.
@@daanbalm Hey Daan, thanks for sharing! I know react and have 2 years of experience as a MERN STACK developer. Just waiting coz now I want to play with some animation using framer motion or gsap and that's what he has included in his course 🙂
Perfect! This tutorial shows practicaly 80% of what i want to know...i thought i have to looking for 50 another videos to get to the point... so... thank you man
Hello, Dev ED! I am so happy that youtube recomanded me your videos! Wanted to start a course on Udemy for HTML and css but I changed my mind because I REALLY love how you explain the things! You are so good man! I will buy your bundle course right now and I hope I will not regret this! Cheers !!!!!
Price up your course. If I was a millionaire I could've bought your invaluable courses with million dollars. Your courses deserve to be priced higher. Don't undervalue them. So you make it free(don't worry since free courses are available) and if you want to put a price on it then please don't undervalue it. Love and respect
@@crazydev.2634 You are the one being obstacle . I wasn't talking to you. Don't waste my time. Be grateful that you are still alive or something. Delete your comment so that I can delete mine.
27:44 "perfect, very nice"?? are you sure? why don't you wrap that 'card.style.transition = "none";' into setTimeout(() => {}, 500); which will cause smoother "mouse enter" effect
In my case, it worked when I moved some CSS code into somewhere and added new CSS code. First, I moved "perspective: 1000px;" of ".body {}" into ".container {}". Second, I added "transform-style: preserve-3d;" to ".sneaker { }". Lastly, I created a new CSS code, ".info {}" and added "transform-style: preserve-3d;" to it.
Very good combination of learning, inspiration and humour :) I like the style. Some things I reacted on though is: * Why did you choose to have the card facing away from the user (mouse) ? * Why didn't you add the ease in, but shorter time, on the container so that the card would stop snapping on enter? * Is there a standard inside JavaScript to have the coordinates [y,x] instead of [x,y] as in other fields?
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
8:57 me and my classmates when the teacher leaves the classroom
xD
😂 Me and my friend actually did that once which makes your comment more funny
Wooooooonnnn love this! Do you have more material this way in your teacher course? Thank you very much
Lol exactly
LOL :D
It's extremely difficult to find tutorials for animations and effects that DON'T use a library. Please do more like this!
I had to use react-tilt
@Shoapeng Lee yeah but why would you use a library that includes 300 other things when you want only one thing in that library?
@@darkquaesar2460 that's why tree shaking exists
@@luppolomalvagio1831 fair enough
@@darkquaesar2460 i've made it mom, i've won an internet argument, look at me
Perhaps, in 8:56 the best explanation for the error in animation
Laughed a lot while he was doing it
😂😍😜
😂😂
I agree.
Preview of the Header designed for Lalla's ruclips.net/video/pLSRazTCDEQ/видео.html
1:19 My teacher before snatching the answer sheet.
Lol ..very true
Haha, how did you make your profile pic by the way?
@@DiganRoom I am a graphic designer. I used Adobe illustrator to create this picture.
@@vivek9746 ngl it's pretty shit (pfp)
@@vivek9746 Cool! You're really good, did you draw your picture?
Wow bro! You're so good you should have a youtube channel dedicated to this.
Preview of the Header designed for Lalla's ruclips.net/video/pLSRazTCDEQ/видео.html
lol
8:02 Explaining why he puts a 'card' div inside a 'container' div. Bookmarked
17:43 Javascript section
8:55 definitely the best part of the vid hahaha. Thank you for this kinda videos man!
i only know html and css but the javascript just makes sense Thanks Dev ed
So concise, to the point, and I had so much fun learning. 35 minutes went by so fast! Loved the tutorial Ed :)
In addition to being a great teacher, there's something very funny about this guy's presentation - there's a slight hint of self-deprecating humour and sarcasm (in a good way) which makes it unique, refreshing, and a joy to watch. Please don't change your style!
This is awesome! Thanks so much. One thing I’d love to see is a 3D model of the shoe so it looks less flat. Any plans on releasing content covering 3D objects on the web?
It always amazes me how something can seem extremely hard to make, but when you see how it is done, and break it down and take your time to learn how each line of the code works you realize it is not extremely hard anymore and you pick up a new trick to implement in your work, love your work Ed always something new to learn maybe i will use this when i make my mothers website, stay awesome
Cheers
To make it go in smooth you can use a setTimeout-Function in mouseenter to remove the Transition from CSS after 0.75 sec.
Dude, your videos and instruction is amazing. Keep it up! You're ability to break things down in an entertaining way really helps things stick. I'm super impressed. You blow any college professor I ever had out of the water.
*Covid-19* : Making Programmers Since 2020 🎓
One of the best teacher out there for sure, these videos about Js animation are my favorite!
Absolutely loved it. May be someday you'd do a video on doing such an animation on a react
component, may be the same card so that we can understand how we're dealing with the same thing but for react ♥️
Oh boy! Your tutorials are really amazing and I'm easily been able to remember the syntaxes used in your videos. You always come up with unique and creative stuff.
Man! Thank you!
I'm new on your channel and it's been great! And I've been binging watching your channel!! Keep it up with the awesome videos!
I love the ones about css and js animations
Cheers!
8:57 this is exactly how my senior developers use to explain things when they are upto something lmao
Dude u just got a subscription just because of that 🤣
7:07 this is how you know that you are learning from the right person no cap
Great tutorial. Ty so much
8:56 is like the best thing I have seen on the internet. It made me laugh alound man 🤣🤣. I saw it multiple time and each time it was more funny than before 😂
Your videos help me understand concepts that were only brushed over in the bootcamp I attended. I really needed a resource like this, thank you.
8:57 Local youtube webdev teacher has a sudden stroke mid tutorial. More info after this short commercial break...
Been a while since I've watched your tutorials. Your commentary is hilarious.
29:38 my frustrated ass when i try to do literally anything
i loved this video man your voice is so soothing and the design is amazing!
The jittery effect in the end was because you forgot to add transition on .purchase button. You added on purchase instead. Nice tutorial btw!
33:10 good catch
Stumbled across this by accident but loved your style. I always found javascript too much for my tiny mind but I'm actually going to give this a go. Great tutorial - you have a new subscriber
16:37 lmao "stretch out my bottom" that's nice XD
lmao
first of all thanks for this video, it was really useful.
Second of all, this is by far the funniest video I've watched for you on RUclips.
Keep up the good work, man.
A woman found dead on the side of a Houston road has been identified as a social media influencer: www.11alive.com/article/news/...
8:57 When a software engineer trying to dance
😂
First let me congratulate you for the channel. You have great way of explaining everything and the relaxed and funny comments are a great plus.
This tutorial is so successful that LinkedIn is swarming of 3D cards.
Keep up the great work.
Subbed: this was so cool! thanks for the share, great source to learn from, thanks again!!
No tutor to learn things from as long as you are here
I do like it.Everything is straight forward.Thanks
8:57 the best moment ever!!!
Ed is the Master of the JavaScript
27:25 to prevent the snapping effect add a setInterval({card.style.transition= 'none'}, 300);
Cannot believe I never came across you before. Your humor makes this stuff even more interesting. 'izz a shoee'. Good on ya mate
its 01/20/2022 and it doesnt work properly. :/
the ${ } to refer the variable inside the css functions doesnt work, so i bashed my head trouble-shooting it until i found that i had to close quotes and use use plus sign, since the output is a string.
something like:
card.style.transform = 'rotateY(' + xAxis + 'deg) rotateX(' + yAxis +'deg)';
and the 'perspective: 1000px' value inside body{ } doesnt work either. i had to add a 'perspective(1000px)' as an attribute of the transform function in each element i wanted to pop out the screen.
albeit all this changes i came with, in the end it is quite far from the visual result ed got in the video. mine is pretty bleh.
hope its any config or plugin i dont have installed, cause i really wanted to reach some cool 3d effects like these :/
thanks
note: im a noob, started out like 2 months ago.
Great video Ed! So excited about the React course!!!
This hair style.
We all have it nowadays
@@petropzqi true
I have the same 😂
effort on explaination at 8:57 is gold
8:57 Now I just want to try that glitchy effect.
This is first half hour video which I clicked out of curiosity and watched fully in one go
15:33 "This looks like me grades in school..." 😂 How to add shadows -> Describe your grades in rgba format
Hi! Nice techniques! You could use a short setTimeout to remove transition from the card when mouse-entering the container to smooth the entering.
This is the most amazing video I have ever seen in my god damn life
I do graphics programming as well as web development and I like how this guy changes the perspective from orthographic projection to a model view projection. That's kinda sick but also priceless 😂.
Waiting for react course 🔥🍻
ruclips.net/video/dGcsHMXbSOA/видео.html
its not a course I guess, but might help
@@daanbalm Hey Daan, thanks for sharing! I know react and have 2 years of experience as a MERN STACK developer. Just waiting coz now I want to play with some animation using framer motion or gsap and that's what he has included in his course 🙂
@@rutvikshah4589 sounds cool now I will also be waiting for that
@@rutvikshah4589 same, there is tons of reactjs courses out there, but not many include variety of js animation library working IN reactjs.
Am wait too
Perfect! This tutorial shows practicaly 80% of what i want to know...i thought i have to looking for 50 another videos to get to the point... so... thank you man
Hello, Dev ED! I am so happy that youtube recomanded me your videos! Wanted to start a course on Udemy for HTML and css but I changed my mind because I REALLY love how you explain the things! You are so good man! I will buy your bundle course right now and I hope I will not regret this! Cheers !!!!!
your videos are so easy to follow, and thanks for the tutorial really helpful
hair is 🔥
awesome tutoriol!!! thank u
when you do shortcuts, you should say what those are.
I am so lucky that you have a youtube channel. I get to learn a lot from you. Nice work!
8:56 hhhhhhhhh thats funny
When creativity meets code. Nice one.
Price up your course. If I was a millionaire I could've bought your invaluable courses with million dollars. Your courses deserve to be priced higher. Don't undervalue them. So you make it free(don't worry since free courses are available) and if you want to put a price on it then please don't undervalue it.
Love and respect
@@crazydev.2634 You are the one being obstacle . I wasn't talking to you. Don't waste my time. Be grateful that you are still alive or something.
Delete your comment so that I can delete mine.
That was amazing. Thanks for showing us the text in large size, it is really useful to see and understand the code better. Thank you very much.
8:56 You are welcome
Just found you for the first time. Learnt quite a lot and had a little laugh! Keep it up bro!!
16:37 XDDDDDDDDDDD
Luv u bro....... The way you explain itz very helpful...... Waiting 4 Flutter course
9:40 my life
dat animation 🔥
27:44 "perfect, very nice"??
are you sure? why don't you wrap that 'card.style.transition = "none";' into setTimeout(() => {}, 500); which will cause smoother "mouse enter" effect
Hi, I am a retired doctor, out of curiosity watched your latest post, then I spent till 1am. You are gifted genius. Keep up the good work. Bless you.
for some reason the translateZ not working !! hmmm
WHY U DO DIS?
In my case, it worked when I moved some CSS code into somewhere and added new CSS code. First, I moved "perspective: 1000px;" of ".body {}" into ".container {}". Second, I added "transform-style: preserve-3d;" to ".sneaker { }". Lastly, I created a new CSS code, ".info {}" and added "transform-style: preserve-3d;" to it.
@@Cho1279624 it worked with sneaker, but not with text :(
Great tutorial. Thank you. Looking forward towards the React course.
8:57 when your code is not working
i HAD to pause the video just to say u are so sweet AND like the best teacher ...please keep it coming!
Iz a shoe 😂😂😂
Thanks a lot Ed, just love your content bro. Keep doing great!
TIMES UP...MOTHER.ECT...🤣🤣🤣🤣
Pretty Neat and Awesome... In fact, this video makes you relax and wows our mind. Keep it up comrade!
Did anyone else start having a mild anxiety attack when he started copy-pasting code instead of using an array?
I just.. subscribed .. as soon as you explained why the container exists and the way you wobbled.. bro..
WOW! That's cool and simple. Nicely explained. Please do some more such animations. Thank you.
I learned a lot. It hammers CSS so beautifully in my mind
If translateZ isn't working for you, add "transform-style: preserve-3d;" to .card, .sneaker, and .info.
Its really amazing how better tutorials are when you add some humor like this
Seen hundreds of videos but this stuff that you created is crazy ( I mean damn Awesome ). Request yo to never stop making videos
8:57 my man giving some physical illustrations
This guy's ideas are just WOW
Keep up the good work bro
8:57 Seriousss looollllll love it
Super cool animation effects - love it! Learning so much here. Thank you!
Wow....Amazing 3D Animation... Feeling 😱🤯😇😍🤩
Very helpful tutorial keep doing more sir !🤗
ez nagyon király Ed, köszi!
Cmon edddd sooo exited for the react course, cant wait aha
use alt + Z for word wrap. It helps a lot
loved it !! please do more videos on animations
This is awesome! Very inspiring. Thank you for sharing this
That flicker effect demonstration was incredible! Bravo!
i was dying laughing when you started spazzing out at 8:45 HAHAHAHA
Very good combination of learning, inspiration and humour :) I like the style.
Some things I reacted on though is:
* Why did you choose to have the card facing away from the user (mouse) ?
* Why didn't you add the ease in, but shorter time, on the container so that the card would stop snapping on enter?
* Is there a standard inside JavaScript to have the coordinates [y,x] instead of [x,y] as in other fields?
Thank you Ed. your tutorials are awsome.