Page Animations With Javascript Tutorial

Поділитися
Вставка
  • Опубліковано 24 гру 2024

КОМЕНТАРІ • 896

  • @developedbyed
    @developedbyed  5 років тому +1899

    Should we do more animations?

  • @deeppanchal1332
    @deeppanchal1332 5 років тому +806

    VS code has so many useful shortcuts you can use. For example:
    m0 for margin: 0;
    p0 for padding: 0;
    df for display: flex;
    jcc for justify-content: center;
    aic for align-items: center;
    Hit tab after these shortcuts!!

    • @oswwwaldotc
      @oswwwaldotc 5 років тому +6

      Ty

    • @BloodyClash
      @BloodyClash 5 років тому +3

      :P i'm old school and prefer dreamweaver which also has all that shortcuts and maybe even moooooooore

    • @MaddoxSt33
      @MaddoxSt33 5 років тому +18

      Precisely that is not VS Code itself. It is because of Emmet you can add Emmet extension on any code editor and have that fun. :D

    • @MaddoxSt33
      @MaddoxSt33 5 років тому +12

      More than that there are more usable shortcuts which includes
      h1.header for
      h1#header for
      div>h1.class for
      div>h1+p for
      Well there are more but these are the most of the ones i use

    • @deeppanchal1332
      @deeppanchal1332 5 років тому +1

      @@MaddoxSt33 Nicee... I use that too

  • @azharuddin744
    @azharuddin744 5 років тому +180

    "Everything is zero, just like my life"
    I felt that

  • @juliocodes
    @juliocodes 5 років тому +56

    It always surprises me just how much of a difference a simple animation can make when done right!

  • @emaaadelgado
    @emaaadelgado 5 років тому +66

    I learn more code here than in my entire life :v because you, i have a new job! thanks for everything!

  • @abhishektyagi4428
    @abhishektyagi4428 5 років тому +65

    Sir Could you please make a video explaining the resources you use to learn or enhance your programming skills

  • @trevormuhoni8774
    @trevormuhoni8774 5 років тому +36

    Man I could watch your tutorials the whole day

  • @SamuelHumeau31
    @SamuelHumeau31 5 років тому +10

    For reducing the brightness of the image, you can juste add in the CSS " filter: brightness (80%) " on the image !

    • @neoTriny
      @neoTriny 4 роки тому +1

      can be used also ,background-blend-mode: ; ,property

    • @ValentinTruta
      @ValentinTruta 4 роки тому

      The best and compatible way(safari+iexplore) is to use multiple bg: background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('image.jpg');

    • @vinayakrajkhare1780
      @vinayakrajkhare1780 4 роки тому

      Hey can u help me ..my ja code is not doing anything like I have included the file but it's just like that no animations can be seen ..pls help

  • @soniauduma1640
    @soniauduma1640 4 роки тому +29

    watching this video in 2020, hearing you say "we are close to 100k'" when you are now close to 500k!

    • @sinaasghari6819
      @sinaasghari6819 3 роки тому +3

      @@fftvmedia23 now he is 562k isnt that good?

    • @sinaasghari6819
      @sinaasghari6819 3 роки тому +1

      @@fftvmedia23 now on 602k hahaa

    • @salaar_
      @salaar_ 3 роки тому

      @@fftvmedia23 its nov 8th 2021 and he is reaching 706k thats wow i think

  • @bravefart651
    @bravefart651 2 роки тому

    Complete beginner here. I like the way you put it all into one, rather than breaking it all up into sections and then trying to fit it all together, plus your voice isn't sleepy 😂 Keep up the good content 👍

  • @Mwtorres89
    @Mwtorres89 Рік тому

    I was kind of going through something tough and your flip-flop comment about the animation literally made my day 😂

  • @JS-ym1tp
    @JS-ym1tp 4 роки тому +6

    This is one of the best tutorials ever! I've been watching a lot lately and learned so many new tricks with CSS from watching this, plus the js animations I learned.

  • @Smahzy313
    @Smahzy313 3 роки тому

    Woooow, the :: after selector to create opacity just made my day :)

  • @sivamylapilli9497
    @sivamylapilli9497 5 років тому +2

    Nice the clarity u have is awesome sir

  • @mohammedalbj4268
    @mohammedalbj4268 4 роки тому

    the video is on point ...no bullshit ..no talking too much ...you got yourself a new happy subscriber

  • @danteDeveloper
    @danteDeveloper 5 років тому +12

    wow, I'm soooo impressed how you easily do publish this wonderful web page. Thanks a lot

  • @chorko696
    @chorko696 5 років тому +258

    "My mom used to throw these foot flops at me when I was a child"
    Dev Ed is Asian confirmed

  • @ЕленаБарсукова-ь3щ
    @ЕленаБарсукова-ь3щ 5 років тому +23

    You always make my day with your positive mood :D
    Thanks for staying awesome! And more animations please!!

  • @inesborges4857
    @inesborges4857 3 роки тому +5

    "I was fascinated by that motion" lol This guy is very funny. Weird but funny

  • @oliverilmjarv1340
    @oliverilmjarv1340 5 років тому +2

    love your videos, im more of a back end programmer but you help me get better with front end stuff aswell. Making stuff look pretty has always been my weakness

  • @TheGoat-hr2qf
    @TheGoat-hr2qf 5 років тому +3

    Your channel is growing fast, congrats for that!!

  • @bratwurst7774
    @bratwurst7774 5 років тому

    just wanted to say your videos keep me motivated even when im really frustrated cause my code was garbage.
    what i also like is your approach of showing the many things you can do with js and not just telling how to write an hello world program thx

  • @macek2383
    @macek2383 5 років тому +26

    The moment when u used z-index to pop-up the headline at 13:50. You should use rgba with build-in opacity. It wouldn't affect the text. The less z-index u use the happier u are with later project effects.

    • @n_fan329
      @n_fan329 5 років тому +4

      of maybe just change the sudo element to before and it will do the job , without the help of z-index

    • @milleniummoses
      @milleniummoses 5 років тому

      There's also "background-color:" "background-blend mode:"

    • @lucas.campora
      @lucas.campora 5 років тому

      How? 🤔

    • @milleniummoses
      @milleniummoses 5 років тому

      @@lucas.campora .hero: after { background-color: rgba (0,0,0, .5)} The ".5" is is just an example of a number less than 1 you can put in there.

    • @literallybiras
      @literallybiras 5 років тому +1

      No. I want to use z index, so in a few months i will be uzing z-index: 9999 cause its cool

  • @SoloAnn
    @SoloAnn 3 роки тому

    Thank you for existing Dev Ed ♥️

  • @wwt17
    @wwt17 5 років тому

    This guy! One of the best code youtubers there is!!!!

  • @CampossVictor
    @CampossVictor 4 роки тому +2

    More animation!! Please! This is so cool !!! From Brazil!

  • @orlakasali9755
    @orlakasali9755 4 роки тому +5

    Can't find either the timelinemax or tweenmax in the gsap library. Help me out, I really need this to work!

    • @SanjeebLama
      @SanjeebLama 4 роки тому

      Try this link:
      cdnjs.com/libraries/gsap/2.1.3

    • @pierre-louis2711
      @pierre-louis2711 4 роки тому +1

      @@SanjeebLama Thanks a lot dude

    • @SanjeebLama
      @SanjeebLama 4 роки тому

      @@pierre-louis2711 I am glad i could help.
      Good Luck!

    • @orlakasali9755
      @orlakasali9755 4 роки тому

      @@SanjeebLama Thanks so much!

  • @ankurharna1
    @ankurharna1 5 років тому +1

    Just came home after office.. I saw your premiere...made my day..

  • @kevint6878
    @kevint6878 5 років тому +4

    I love these videos. Your method of explaining what each and every thing does is awesome!

  • @gabrielesu
    @gabrielesu 5 років тому +1

    Awesome tutorial. One other cool thing I learnt here was the 'object-fit' css property for an image. I normally would create a div and make the image a background image and use 'background-size: cover' but this is waaaaay better. Thanks.

  • @nadin3amanda
    @nadin3amanda 3 роки тому

    Those who are here for the animation part for app.js 😅 14:10
    Thank you Mr. Dev Ed! I learned a lot

  • @mohamedshuaau632
    @mohamedshuaau632 3 роки тому

    My favorite teacher. I no longer search for something. I search specifically dev ed

  • @rasulali4690
    @rasulali4690 4 роки тому

    Damn bruh u r a diamond! This is so awesome, that u're not a regular boring developer. Floot flops throwing moment had me laughin so hard

  • @joel9909
    @joel9909 5 років тому +5

    This man is amazing. I am laughing and coding at the same time

    • @vinayakrajkhare1780
      @vinayakrajkhare1780 4 роки тому

      Hey can u help me ..my ja code is not doing anything like I have included the file but it's just like that no animations can be seen ..pls help

  • @bobdpa
    @bobdpa 5 років тому +45

    "Everything is zero...just like my life" lol 😆

  • @aqynbc
    @aqynbc 5 років тому +1

    love the feel good factor of your videos. If every body was like you, the world would be a better place ! we can hope! Please keep publishing.

  • @noxious7296
    @noxious7296 5 років тому +1

    Thanks For this wonderful tutorial and On behalf of those who don't want to comment yes we need More Animation tutorials.

  • @sirisiri2416
    @sirisiri2416 3 роки тому

    nice tutorials!
    Go on, great animations!
    little trick:
    instead of writing
    justify-content: center;
    align-items: center;
    just write:
    place-items: center;
    ;) good work

  • @deltondias5046
    @deltondias5046 4 роки тому

    smashing the like button before the video starts. Its becoming a habit because your content is always amazing.

  • @shloimesimchenager6898
    @shloimesimchenager6898 3 роки тому

    I might ask a js course from you for my birthday gift, great work filling my yt recommended

  • @azizkhujakhujaev2598
    @azizkhujakhujaev2598 5 років тому

    Woooow man I like this episode epically @0:36

  • @orincywhytedesigns
    @orincywhytedesigns 2 роки тому

    How are you this good? This tutorial is blowing my mind 🤯🤯

  • @PablxVillarreal
    @PablxVillarreal 4 роки тому

    Dude, your videos are awesome!

  • @kirankumaruppuganti
    @kirankumaruppuganti 5 років тому

    I really like the animations like this. Please continue doing these kind of video. Thanks

  • @Webtricker
    @Webtricker 2 роки тому

    You are incredible.Thank you for explaining Page Animations with JavaScript in such a simple and beautiful way. We want more animations tutorial video.

  • @hakbuddy5541
    @hakbuddy5541 4 роки тому

    The reason why i like your videos because in your video i get 2 things :
    1) Knowledge
    2) Entertainment (Bcz You are Too funny!)

  • @arpadgellertsiklosi3811
    @arpadgellertsiklosi3811 4 роки тому

    Hi, your personality is absolutely friendly and I have got a lot of motivation and information of your videos so thanks so much!

  • @deepanshusharma8321
    @deepanshusharma8321 4 роки тому

    you are the best teacher ever

  • @abicinemafood
    @abicinemafood 4 роки тому

    So I come across to one of your videos once in a while, because I have some tabs open and when I feel like I need to learn something new, I open one. And after a while of not watching your videos, when I see you doing a joke, I feel like I've missed that. Please don't stop making jokes :D

  • @smokinghot5373
    @smokinghot5373 5 років тому +1

    The value from this video alone is worth $10k

  • @were_on_the_sidelines4351
    @were_on_the_sidelines4351 3 роки тому +1

    what is the url of the picture that you used in the video

  • @mayankgupta5842
    @mayankgupta5842 5 років тому

    Yes Dev this is very useful and attractive animation..Please make more videos or GSAP animation tutorial series

  • @rennesinternet3872
    @rennesinternet3872 4 роки тому

    Man its the 1st JS page i really do, works fine with the version of Gsap includin all older Libs, i'm proud to have done it ! Many thanks for that ;)

  • @kartikmalik1783
    @kartikmalik1783 3 роки тому

    the sound of keyboard is sooo nice!!

  • @kareemjeiroudi1964
    @kareemjeiroudi1964 4 роки тому

    Man, I always hated frontend. Now you encouraged me to improve my frontend skills

  • @cesarp6761
    @cesarp6761 5 років тому

    I would suggest a video that starts showing the library (animation) and how it works.. instead of all the css training part.. OR if you really want to use 2/3 of the tutorial doing design, you can add a link to the starting point where the content of the 'title' of the video really starts.. and people decide if they want to do the filling or not.. cheers! great channel!

  • @vikassuthar9017
    @vikassuthar9017 4 роки тому

    just want to say thank you so much. every video of yours is awesome and it's helping me a lot.

  • @arghyabiswas3225
    @arghyabiswas3225 3 роки тому

    You have godlike animation skills
    I like your animation

  • @neriusshaqiri1514
    @neriusshaqiri1514 4 роки тому

    Really great content on all of your videos, learned quite a lot from these , thanks Ed .

  • @mickaellutin2591
    @mickaellutin2591 4 роки тому

    I watch your videos since yesterday and its so cool, animations looks so easy when you code !! (im a back end developper and i suxx in animation lol)

  • @maduenox
    @maduenox 5 років тому +1

    Inspirational the way you found out the love for animations hehe

  • @EmadElSammad
    @EmadElSammad 4 роки тому

    18:26 How did the code got suddenly organized like that after you hit save? Please anyone knows?

    • @pedromartins9049
      @pedromartins9049 4 роки тому +2

      VSCode has code formatting features built-in. It also has addons/plugins like Prettier+ that also do that in a slight different way. The shortcut for me is SHIFT-ALT-F. I don't rememeber if you need to activate anything. Good luck.

    • @EmadElSammad
      @EmadElSammad 4 роки тому +1

      The plugin called: ”Prettier”? What a great name. Will install it. Thank you very much for your reply!

  • @manamnice
    @manamnice 5 років тому

    Bro, I love your tutorials. Keep up the good work.

  • @its_just_me_
    @its_just_me_ 5 років тому +1

    86K subscribers!! Congrats mate!! ❤️Love from India 🇮🇳

  • @cubingwithabhinav8517
    @cubingwithabhinav8517 3 роки тому

    Wow animation. Looking excellent.

  • @akinpelumi717
    @akinpelumi717 3 роки тому

    I love how you teach and your animations and designs are awesome. keep up the good work Ed. More animation videos pls

  • @lzyrzkl3841
    @lzyrzkl3841 5 років тому +3

    My best tutor ❤️ love from India 🇮🇳 Thanku so much sir

    • @ViratKohli-jj3wj
      @ViratKohli-jj3wj 5 років тому +1

      Hi I am Virat Kohli Captain of Indian Cricket Team hahahahahahaha

  • @arnab92
    @arnab92 4 роки тому

    Thanks for introducing me to GSAP. I would certainly love more animation videos.

  • @Shikigami6
    @Shikigami6 5 років тому

    Thank you! Your videos are a huge impovement towards becoming a Web-Dev

  • @samasef821
    @samasef821 5 років тому +1

    I really enjoyed it. It was quite cool and you really spiced it with fun and I before I could realize, I had watched it all.
    thanks a lot!

  • @pedromartins9049
    @pedromartins9049 4 роки тому

    Between 21:27 and 21:28 the background with opacity is not aligned. Why? Thanks

  • @parahumanoid
    @parahumanoid 3 роки тому

    It's scary how quick he is with this. It's not complicated, but still, it goes to show just how much second nature it is to Ed. It's at the tips of his fingers. I am now in doubt if I'm overcharging for dev time. Anyone know, what is this kind of productivity worth per hour on the US market?

  • @moizkhalid2714
    @moizkhalid2714 5 років тому

    Love the easiness of coding..I know it is because of hard hours you put before creating the website again with smoothing effect.
    Big Fan

  • @SyncWithSrikanth
    @SyncWithSrikanth 5 років тому

    One of the best i have seen in recent times. Cool stuff

    • @vinayakrajkhare1780
      @vinayakrajkhare1780 4 роки тому

      Hey can u help me ..my ja code is not doing anything like I have included the file but it's just like that no animations can be seen ..pls help

    • @vinayakrajkhare1780
      @vinayakrajkhare1780 4 роки тому

      Js

  • @sovereignlivingsoul
    @sovereignlivingsoul 3 роки тому

    I use CSS for CSS, am looking into GSAP, also I owned a VW Westphalia and it was a great vehicle.

  • @shbita
    @shbita 5 років тому

    Thanks ED Mom for giving birth to Ed, and giving him the inspiration to be a magnificent designer (the method isn't important :)

  • @ShaunMeechan
    @ShaunMeechan 3 роки тому

    Man I hate being a noob at programming, even little details that aren't covered cause so much hassle for example when you drop the first tweenmin thing in at 1:35 mines doesn't have this 'integrity' or 'cross origin' thing that auto populates. Maybe these things are a given to the adept programmer but not beginners, it's so frustrating because most programming tutorials assume you already know these things when you don't, then you need to spend 40 mins trying to get it sorted when you have a deadline in 2 days SHEESH. Thanks for the video though you awesome!

  • @michaelcastillo4402
    @michaelcastillo4402 3 роки тому

    It is amazing. I love your designs.

  • @jasonesquivel7935
    @jasonesquivel7935 5 років тому

    It looks so cool yet very simple.

  • @iamhtmldeveloper
    @iamhtmldeveloper 4 роки тому

    Your techniques is awesome and more helpful for me....... Thanks bro for making different different types videos for us ):

  • @nicobonora4093
    @nicobonora4093 3 роки тому

    Awesome tutorial, as always!

  • @kuwago8633
    @kuwago8633 4 роки тому

    im just gonna bookmark your entire channel...

  • @suchanachakrabarti6783
    @suchanachakrabarti6783 5 років тому

    Thank you so much for such awesome tutorials...you are one of the best teachers here.

  • @firdavsdadakhanov5087
    @firdavsdadakhanov5087 3 роки тому

    your works are always unusual and impressive bro ))) like

  • @michaelmurimwa5269
    @michaelmurimwa5269 5 років тому +3

    Dude your whole vibe is like that guy from sillicon Valley Richard Hendricks

  • @alexrvalencia
    @alexrvalencia 4 роки тому

    Unfortunately I cannot support you on patreon, but what I can do it's give you a like, definitely subscribe, and last but not least important thank you for your videos, I appreciate them so much!

  • @joaquinfarfan9069
    @joaquinfarfan9069 3 роки тому

    love the videos you do man thank you for this!

  • @hussainabid6351
    @hussainabid6351 5 років тому +1

    Hey Dev Ed, I love your videos :)
    Can you make a complete guide like what equipments you are using to create videos on youtube and how you do the editings?

  • @ganeshacharya234
    @ganeshacharya234 4 роки тому

    If you want to see the animations being explained, start from 14:00

  • @benlowrey
    @benlowrey 4 роки тому

    thanks very much. great tutorials. big fan.

  • @911madza
    @911madza 5 років тому +14

    Any chance of WebAssembly crash course in the future?

    • @MuhammadAdnan-gx6rd
      @MuhammadAdnan-gx6rd 5 років тому

      Vue ?

    • @TechdubberStudios
      @TechdubberStudios 5 років тому

      that kind of tech is intended for advanced programmers, so there aren't any big chances you're gonna find WASM tutorials. it involves coding in a strong typed language such as c++, rust , c, etc. for things that are really processor intensive such as (embed browser crypto coin mining, video processing - see ffmpeg compiled to wasm library, and many others). The average joe looks for simple things to learn, so, again, I don't think you're gonna find any instructive tutorials about wasm. ;)

    • @911madza
      @911madza 5 років тому +2

      @@TechdubberStudios true that, its for heavily CPU intensive web stuff, like running entire game engines in web environment... its been around for a while, like unity and unreal engines have already used it.. sure thing, that its an overkill for like 99% of the web as of current state of 2019, but it might be the future, cause its so much faster and effective then JS due to its low-level approach... i believe companies will continuously seek for the ways to adapt their products to web, cause of cost effectiveness, accessibility and availability, data storing and back-ups, easier maintenance and updates, customization and scalability options, security concerns and so on...

  • @orincywhytedesigns
    @orincywhytedesigns 2 роки тому

    Watching this in the future, you have 723,000 subscribers 🥳🥳🥳🥳

  • @theamjolnir9641
    @theamjolnir9641 5 років тому

    These are some high quality guides!!!

  • @cnsnmy
    @cnsnmy 4 роки тому

    You make it very easy to learn and understandable! Thank you!

  • @milkdrom3da
    @milkdrom3da 2 роки тому

    You are so funny, an talented. Thanaks for posting this!

  • @thatguycheddar
    @thatguycheddar 5 років тому

    Keep these tutorials coming!! very dope!!!

  • @bamaadaa
    @bamaadaa 4 роки тому

    Now we want to see your VW Van!

  • @ssdheeraj6347
    @ssdheeraj6347 3 роки тому

    hey hi, I have a doubt in translate(-20%,-70%) at 11:57 can you please explain when you were doing it? Thank you

  • @MCsupernova22
    @MCsupernova22 5 років тому

    Animations are the best. Love how you teach!

  • @tylermorgan1468
    @tylermorgan1468 4 роки тому

    My mans got some crazy hair but i respect it 👊