Liquid Image Transition With Javascript Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ธ.ค. 2024

ความคิดเห็น • 214

  • @Jayjay-cg2in
    @Jayjay-cg2in 5 ปีที่แล้ว +77

    Wth you didnt call us your gorgeous friends on the internet in the intro?! Unsubbing! Im kidding ofcourse. Thanks for another great video!

    • @developedbyed
      @developedbyed  5 ปีที่แล้ว +16

      Because you are gorgeous without me telling you! ( Imma say in in the next video )

    • @bobangogic
      @bobangogic 5 ปีที่แล้ว +9

      @@developedbyed you need to say it twice next time! 😂

    • @developedbyed
      @developedbyed  5 ปีที่แล้ว +8

      Lol

  • @developedbyed
    @developedbyed  5 ปีที่แล้ว +142

    Spoiler...I am actually the lady in the picture.

    • @npriyajit
      @npriyajit 5 ปีที่แล้ว

      really!!! 😂😂😂

    • @abdiqafarhashi8604
      @abdiqafarhashi8604 5 ปีที่แล้ว

      😂😂😂

    • @scept3r.studios
      @scept3r.studios 5 ปีที่แล้ว

      What?! 😂😂😂

    • @ErrorDebug
      @ErrorDebug 5 ปีที่แล้ว

      Ur beautiful

    • @abhishektyagi4428
      @abhishektyagi4428 5 ปีที่แล้ว +1

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

  • @catalintodoran4302
    @catalintodoran4302 5 ปีที่แล้ว +3

    You dont make sites and applications bro, u make art. Very nice and u got all my respect in what u do. Have a nice day !

  • @tejapraneeth4177
    @tejapraneeth4177 5 ปีที่แล้ว +4

    Never knew that my youtube recommendation could bring me to such a wonderful channel...
    Since morning I've been watching all your videos and what a work👏👏
    Thank you for sharing your knowledge... waiting for more videos

  • @citizengoose1342
    @citizengoose1342 5 ปีที่แล้ว

    i don't tend to subscribe, but bro, every single video you make is pure gold.

  • @tupapa7642
    @tupapa7642 2 ปีที่แล้ว

    oh my lord Ed, you always are doing amazing stuff!

  • @wwt17
    @wwt17 5 ปีที่แล้ว

    Dude, you are THE best! You're a great teacher. You should make some courses. Had you been my instructor for boot camp, I'd be a super coder. Now, after all is said and done, I will have to relearn everything better from you.

  • @MCsupernova22
    @MCsupernova22 5 ปีที่แล้ว +1

    Just joined the channel and watched so much of your content already! Love your videos. Please don't go inactive like all the TH-camrs I watch for dev

  • @shambhavibudholiya5347
    @shambhavibudholiya5347 4 ปีที่แล้ว

    YOUR channel is a place I visit each time I come to youtube!
    Thank You for the help buddy!
    You are AWESOME!!

  • @theamjolnir9641
    @theamjolnir9641 5 ปีที่แล้ว +2

    This is so lovely I'm including it in a project! Thanks Ed!

  • @amandhurwey7964
    @amandhurwey7964 5 ปีที่แล้ว

    whenever I need to be creative and I don't get anything, I just check out Dev Ed channel.

  • @godfreyaweror9850
    @godfreyaweror9850 5 ปีที่แล้ว +4

    11:20
    Ed: "That's kinda weird"
    also Ed: "I like that"
    hahaha

  • @jvj6640
    @jvj6640 3 ปีที่แล้ว

    Is nobody gonna talk about the intro chair parkour?
    Great vid!

  • @NikhilAdiga
    @NikhilAdiga 5 ปีที่แล้ว +2

    My favorite TH-camr!

  • @thandomaseko5781
    @thandomaseko5781 5 ปีที่แล้ว

    Dude, you my new guy.....thanks for all these tutorials bro. you the real MVP And Your energy is awesome

  • @elizabethe9567
    @elizabethe9567 3 ปีที่แล้ว

    been looking for this animation thank youuu

  • @noahedgeworth2493
    @noahedgeworth2493 5 ปีที่แล้ว

    Just started watching Dev Ed, and he is actually awesome! Keep up the great work.

  • @deanjames6997
    @deanjames6997 4 ปีที่แล้ว

    Thank you for your amazing tutorial from Korea !

  • @FarazKhan00
    @FarazKhan00 5 ปีที่แล้ว

    Your content quality only gets better

  • @amaanrehman1640
    @amaanrehman1640 3 ปีที่แล้ว

    Woooooooow!!!!! I was seeking for some html css project and that's there it was. I mean wow!!you made my day..thanq very much sir.❤

  • @warrior9096
    @warrior9096 5 ปีที่แล้ว

    Dude, you are the best! I discover lately your channel and I can't stop watching your great videos!
    Greetings from Poland!

  • @-baka9246
    @-baka9246 5 ปีที่แล้ว

    its really simple and effective .. great work my man

  • @eliam9461
    @eliam9461 5 ปีที่แล้ว +6

    Whaaaaaat AMAZING !!! Thank you for sharing, im a big fan form México 🇲🇽🇲🇽🤖🤖

  • @lauthtom
    @lauthtom 5 ปีที่แล้ว

    I just wanna say thank you, for sharing your knowledge with us. I´m such a big fan of your videos! Greetings from Germany

  • @oussemamiled4545
    @oussemamiled4545 5 ปีที่แล้ว

    Ma man, great job Ed as usual, this channel is gonna be hugeee

  • @munyetech
    @munyetech 5 ปีที่แล้ว

    wow i love this series about javascript

  • @zackmactavish
    @zackmactavish 4 ปีที่แล้ว

    Very nice. I had to start a server in order to get this to work. When I checked my console I had problems with the Cross-origin image. Thanks for this tut man!!!

  • @nickmaxwellambient6615
    @nickmaxwellambient6615 5 ปีที่แล้ว

    You are giving Will Riker a run for his money with that dramatic sit down at the beginning of the video :)

  • @mariadelcarmenperez3432
    @mariadelcarmenperez3432 ปีที่แล้ว

    Loveeeeeee it!! ❣

  • @thangjamkishorchand
    @thangjamkishorchand 5 ปีที่แล้ว

    Thank you so much for the tutorials Ed . I figure it out how to do it (after watching your video).Right now I am creating some demos to show off to the community, when it is done i will put a live demo link so you can critique :-) Thank you once again

  • @bienvenubadiat942
    @bienvenubadiat942 5 ปีที่แล้ว

    INTENSE LOVE IT!!!!!
    THANKS MAN

  • @sfartz-alexandra-scrum-master
    @sfartz-alexandra-scrum-master 5 ปีที่แล้ว +1

    Super fain, mulțumesc! Și clar îmi doresc sa mai faci video uri despre animații!

  • @thatguycheddar
    @thatguycheddar 5 ปีที่แล้ว

    Super Dope Tutorial!!

  • @StayHealthyWithDarya
    @StayHealthyWithDarya 5 ปีที่แล้ว

    Thank you very much for your great explanation and humour sense!

  • @calebrubalema
    @calebrubalema 5 ปีที่แล้ว +2

    Hahaa, I love the way you move your hands like every micro-second, Nice!!

  • @laurapaulino1710
    @laurapaulino1710 4 ปีที่แล้ว

    This was great! Thank You!

  • @oliverwu8837
    @oliverwu8837 5 ปีที่แล้ว

    So incredibly cool

  • @anuraghazra4772
    @anuraghazra4772 5 ปีที่แล้ว +2

    Most Modern And Funny Programming TH-camr

  • @jerryalmeida
    @jerryalmeida 5 ปีที่แล้ว

    WOW! Ilove it, thanks man.

  • @PrashantSingh-ml6lp
    @PrashantSingh-ml6lp 5 ปีที่แล้ว

    I just love the intro to your videos XD

  • @martin-1965
    @martin-1965 5 ปีที่แล้ว

    Love this and your style of teaching. Everyone should subscribe to this channel. Fun attitude and great tutorials !

  • @imdanli
    @imdanli 4 ปีที่แล้ว

    Awesome! Thank you man!

  • @michaelregalario2005
    @michaelregalario2005 5 ปีที่แล้ว

    Love this!

  • @uxui_mayur815
    @uxui_mayur815 5 ปีที่แล้ว

    I just wish more such cool transition effects with JavaScript! 💚

  • @NaniNana881
    @NaniNana881 5 ปีที่แล้ว

    thank you professor js

  • @abhishektyagi4428
    @abhishektyagi4428 5 ปีที่แล้ว +1

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

    • @abhishektyagi4428
      @abhishektyagi4428 5 ปีที่แล้ว +1

      @Amine Ben agreed but if you do not know what you need to study or practice in order to become a good developer how would you my question is what resources do you use to learn

  • @wahabuiux
    @wahabuiux 5 ปีที่แล้ว +10

    i am gona try and mess around to change it to scrolling effect rather than hover

    • @tandrei1364
      @tandrei1364 5 ปีที่แล้ว +1

      you did it ? i want to make this effect on scrolling too

    • @wahabuiux
      @wahabuiux 5 ปีที่แล้ว

      @@tandrei1364 no bro actually last night i tried i add exactly same code in the video but images were not showing its some kind of CORS error that saying i need to run the application through some server instead of C;

    • @MiguelGonzalez-eb9lj
      @MiguelGonzalez-eb9lj 5 ปีที่แล้ว

      ui_tuts I am having the same problem!

  • @0pubg
    @0pubg 3 ปีที่แล้ว

    these videos very good!

  • @dinoshanromeltar
    @dinoshanromeltar 5 ปีที่แล้ว

    I wish you so much success on youtube

  • @SOME5252SH
    @SOME5252SH 5 ปีที่แล้ว

    Would like to see more of these animations

  • @kemaldwiheldy4291
    @kemaldwiheldy4291 5 ปีที่แล้ว

    this is what I needed.. btw you should create a discord server.. awesome tutorial!

  • @manikandand2541
    @manikandand2541 4 ปีที่แล้ว

    thanks dude

  • @mohitaggarwal432
    @mohitaggarwal432 5 ปีที่แล้ว

    Love it.

  • @codewithme8526
    @codewithme8526 2 ปีที่แล้ว

    like always nive video, nice Content nice Job ❤️

  • @JamesKing-jc8uy
    @JamesKing-jc8uy 4 ปีที่แล้ว +2

    Just can't get the images to load no matter what I do, maybe it's a library version issue?

  • @RSTao77432
    @RSTao77432 5 ปีที่แล้ว

    Do the two images and the image map need to be the same size or aspect ratio, is a pretty cool effect

  • @theamjolnir9641
    @theamjolnir9641 5 ปีที่แล้ว +4

    I keep getting this error:
    hover.js:1 Uncaught TypeError: Cannot read property 'Scene' of undefined
    at new (hover.js:1)
    at app.js:1

    • @podcastdzfan
      @podcastdzfan 4 ปีที่แล้ว

      Me too , what's the solution?

    • @mohamoud123ify
      @mohamoud123ify 4 ปีที่แล้ว

      @@podcastdzfan 3rd person with the same problem

  • @RyanReevesNompton
    @RyanReevesNompton 5 ปีที่แล้ว

    I LOVE YOUR VIDEOOOS!

  • @Diamonddrake
    @Diamonddrake 5 ปีที่แล้ว +1

    That 3js dependency is a megabyte.

  • @paulharvey11
    @paulharvey11 3 ปีที่แล้ว

    I just saw this video tutorial- amazing!- I'm unsure which gsap I need as the tutorial was created a few years ago.. could you please tell me? thanks

  • @rorh6462
    @rorh6462 5 ปีที่แล้ว

    Is this too advanced for a beginner who's new to coding? This looks awesome.

  • @brandsupport6434
    @brandsupport6434 5 ปีที่แล้ว

    Niceeeee, u rock dude. :)

  • @aashayamballi
    @aashayamballi 5 ปีที่แล้ว

    Thanks for sharing your knowledge ... 😄😄😄

  • @pradumnkumar
    @pradumnkumar 5 ปีที่แล้ว

    I drop a like first and then start with the video.

  • @ravabat5841
    @ravabat5841 5 ปีที่แล้ว +1

    I like each your video)

  • @DragonSlayerAwesome
    @DragonSlayerAwesome 5 ปีที่แล้ว +1

    Hi Ed, I'm fairly new to JavaScript and I followed your tutorial step by step. I got it working! BUT only in Firefox... for some reason the images are not showing up in Chrome. Do you perhaps know what the reason could be?

  • @MiguelGonzalez-eb9lj
    @MiguelGonzalez-eb9lj 5 ปีที่แล้ว +1

    Ed, I keep getting a cors policy error when I use that hover.js thing how can I get passed it?

    • @hristijanjosifovski5304
      @hristijanjosifovski5304 5 ปีที่แล้ว

      Miguel you need to install Live Server Extension on Visual Studio Code, then start with „Go live“. All will be fine after that

    • @AbhishekTiwari-jq8lc
      @AbhishekTiwari-jq8lc 4 ปีที่แล้ว

      @@hristijanjosifovski5304 thnxc bro......was stuck at this for long

  • @ashishsoni2431
    @ashishsoni2431 5 ปีที่แล้ว

    Awesome

  • @marcovaleri7279
    @marcovaleri7279 5 ปีที่แล้ว

    You are the best, thanks :-)

  • @chokdeesam2365
    @chokdeesam2365 ปีที่แล้ว

    Ed, where can we find the tweenmax CDN now ? Thanks

  • @fiuzzii
    @fiuzzii 5 ปีที่แล้ว

    Thanks🔝

  • @Catkid622
    @Catkid622 4 ปีที่แล้ว +1

    My images are not showing what shall I do please need urgent help

  • @ManishKarki
    @ManishKarki 5 ปีที่แล้ว

    Sweet!

  • @mariadelcarmenperez3432
    @mariadelcarmenperez3432 ปีที่แล้ว

    What if I have multiple images? How could I apply the effect then? 🙈

  • @josephsimpson2903
    @josephsimpson2903 2 ปีที่แล้ว

    my images wont show up and gsap has curly line at the bottom, any help?

  • @edisvelicanin8854
    @edisvelicanin8854 5 ปีที่แล้ว

    would look cooler if you use the same picture, where one would be grey and the other one colored. great tutorial.

  • @andywang1352
    @andywang1352 5 ปีที่แล้ว

    awesome

  • @sarath_sajan
    @sarath_sajan 5 ปีที่แล้ว

    The way you said "pretty cool" at 10:12 sound so similar to how bernardo bacalhau says it...
    It makes me wonder, whether you happen to be a Portugese?

  • @bkcy18
    @bkcy18 3 ปีที่แล้ว

    Can this be used as a carousel animation?

  • @irekahsila
    @irekahsila 5 ปีที่แล้ว

    Thank you man, make more JS videos pls

  • @soumitamukherjee7074
    @soumitamukherjee7074 4 ปีที่แล้ว

    Would you make a tutorial on framer motion?? I really enjoy all your stuff. It's very engaging and one can easily learn from your video tutorials.. Keep up your good work! 😊

    • @_.sunnyraj._
      @_.sunnyraj._ 4 ปีที่แล้ว

      Nothing will happen from these things Learn Backend LOL

  • @saumyaverma9581
    @saumyaverma9581 5 ปีที่แล้ว +1

    This guy is little cute and funny...i love your content and I'm learning so much from you ..Thank you ....& Big clap for you!!

  • @firdeusx
    @firdeusx 5 ปีที่แล้ว +1

    2:33 how did you do that
    That it showed up that fast

    • @karimezzirati738
      @karimezzirati738 5 ปีที่แล้ว +2

      It's an extension on the editor! It's called Emmet, all you do is type in a "!" and then hit tab and it generates all of it for you :)

  • @johnmp8975
    @johnmp8975 5 ปีที่แล้ว

    Thank you for this video! Have you experimented with the next and previous methods and how you can use it? In github page it doesn't show any example with these methods.

  • @undefined456
    @undefined456 4 ปีที่แล้ว

    why the images appear on the live server only and not the normal url of the html text?

  • @rishabh55
    @rishabh55 5 ปีที่แล้ว

    Will see it

  • @Mahdi_Ashouri
    @Mahdi_Ashouri 4 ปีที่แล้ว

    hi Dev i did this project and i have a little problem. this lib dont let us to know whats image currentlyis is showing i check lib and portotype and i think about this so much but i dont find best way of this just some ugly ways can u check it please

  • @EE-xe3zy
    @EE-xe3zy 5 ปีที่แล้ว

    Is there any possibility of using these image transitions for an image slideshow (instead of using them for a 2-image hover effect)? Any help you be appreciated!!

  • @rysik2x
    @rysik2x 5 ปีที่แล้ว

    Good afternoon, tell me, is there a similar effect? only with polygonal extinction?

  • @davidbrownsom1936
    @davidbrownsom1936 5 ปีที่แล้ว

    You videos has really helped me this few months but this particular video of yours is very cool but I get an error telling me that the hoverEffect not found, how can I solve the problem. Thanks

  • @CristianAlexandruRadu
    @CristianAlexandruRadu 5 ปีที่แล้ว

    Haha, great tutorial.
    I just subscribed to your channel 😱

  • @maciejmyslinski7820
    @maciejmyslinski7820 5 ปีที่แล้ว

    Like for the beginning :D

  • @eliasredux3616
    @eliasredux3616 4 ปีที่แล้ว

    i love you thanks

  • @MuhammadAdnan-gx6rd
    @MuhammadAdnan-gx6rd 5 ปีที่แล้ว

    Nice

  • @frasergough8169
    @frasergough8169 5 ปีที่แล้ว

    ANY HELP? this is my message error: from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: I have tried all different browser platforms like chrome, firefox etc and still nothing showing.

    • @DreamingDolphing
      @DreamingDolphing 5 ปีที่แล้ว

      Run not HTML, open index.html through live server extension for VS Code

    • @frasergough8169
      @frasergough8169 5 ปีที่แล้ว

      @@DreamingDolphing cheers for the response, how do i do this?

    • @DreamingDolphing
      @DreamingDolphing 5 ปีที่แล้ว

      @@frasergough8169 Install extension for VS Code marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

  • @codinghag7137
    @codinghag7137 5 ปีที่แล้ว

    Cool

  • @rysik2x
    @rysik2x 4 ปีที่แล้ว

    Hello, please tell me how to replace the hover effect with animation on, on slide show?

  • @swssdev9163
    @swssdev9163 5 ปีที่แล้ว

    Is it possible to transition the images on custom events?

  • @bondersful
    @bondersful 5 ปีที่แล้ว

    Great stuff! Thank you for this quick and easy tutorial. My only concern is that whenever I am inserting an image this way it is being stretching by its width... :/ Do you know maybe how to prevent that? I would like to keep its aspect ratio wile changing the resolution of the screen

  • @chandlerkenworthy3185
    @chandlerkenworthy3185 5 ปีที่แล้ว +1

    My chrome is failing to load all the images with this error: Access to image at 'file:///D:/Web_Development/Juice%20Company/disc.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. what's up?

    • @ahmedfarrag2602
      @ahmedfarrag2602 4 ปีที่แล้ว

      me too what is the wrong?

    • @mrtyshk2
      @mrtyshk2 4 ปีที่แล้ว +1

      @@ahmedfarrag2602 try to use files on the server instead of local disk