Crazy Ink Animation Effect with CSS Only

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

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

  • @lundeveloper
    @lundeveloper  หลายเดือนก่อน +26

    If you find it interesting, don't forget to subscribe to the channel to watch more interesting videos about programming and web design

  • @learnwithshaheb
    @learnwithshaheb หลายเดือนก่อน +80

    awesome, i never seen this before in 15 Years of programming journey.

    • @lundeveloper
      @lundeveloper  หลายเดือนก่อน +7

      Thank you so much, I believe if you watch my other videos you will repeat this many more times 😁

    • @learnwithshaheb
      @learnwithshaheb หลายเดือนก่อน +3

      @@lundeveloper 😄basically i always do

  • @YakxyBoy
    @YakxyBoy หลายเดือนก่อน +22

    You're helping people a lot. You're such a legend🔥🔥😍😍

    • @lundeveloper
      @lundeveloper  หลายเดือนก่อน +1

      Thanks for watching my content 😍

    • @YakxyBoy
      @YakxyBoy หลายเดือนก่อน +1

      @@lundeveloper don't thanks me you're such a great person Arigato!🙏🙏❤❤

    • @Samarsinghvxs
      @Samarsinghvxs หลายเดือนก่อน

      @@YakxyBoy are you japnese

  • @ArifHossain-ws6zf
    @ArifHossain-ws6zf หลายเดือนก่อน +50

    I think animated SVG mask can be used for this, GIF files are large and not scalable.

    • @DamirSecki
      @DamirSecki 25 วันที่ผ่านมา +3

      animated svg would be a much, much better solution

    • @scept3r.studios
      @scept3r.studios 15 วันที่ผ่านมา +1

      wish there’s a tutorial on that one..

  • @MikeREVANA
    @MikeREVANA หลายเดือนก่อน +4

    Didn't even know that was possible 🫥 Great video as always 😊

    • @lundeveloper
      @lundeveloper  หลายเดือนก่อน +1

      ☺️☺️☺️

  • @xecol12
    @xecol12 หลายเดือนก่อน +8

    Baby wake up, lundev cooked a new video 🗣️🗣️🗣️

  • @waleedbinshabbir1542
    @waleedbinshabbir1542 หลายเดือนก่อน +4

    I thought I had no talent for designing recently and wanted to rectify it. I watched a lot of videos researched a lot. I thought this was a huge task at first but your videos gave me the push of encouragement I needed. Now I am confident that I can make beautiful websites thanks to you. I really want a figma tutorial plz. Love your videos

    • @abusufyan1352
      @abusufyan1352 หลายเดือนก่อน

      Hey are you a designer?

    • @waleedbinshabbir1542
      @waleedbinshabbir1542 หลายเดือนก่อน +1

      @abusufyan1352 I am not a designer, but I want to branch out my skill set.

  • @marvinbaun6874
    @marvinbaun6874 29 วันที่ผ่านมา +1

    You are literally the most OP webdesign source! Thank you very much!

  • @waltermelo1033
    @waltermelo1033 26 วันที่ผ่านมา

    Man, I'm really impressed on how you are great not only on CSS but Design in general too :O !! that's insane

  • @tt._.7857
    @tt._.7857 หลายเดือนก่อน +2

    Genuinely the best yt channel

  • @lundeveloper
    @lundeveloper  หลายเดือนก่อน +10

    If you apply this technique to slider design, what will it look like?

    • @diobrandoggo7471
      @diobrandoggo7471 หลายเดือนก่อน

      A simple slider transition would be kind of ink stroking up and down from right to left or vice versa. Kindof like caligraphy style I guess?? anw this is really SICK! like I will definitely send these to my designer.

  • @marcq1588
    @marcq1588 21 วันที่ผ่านมา

    Wouah. Very nice. I am not a front end developer, but I must say that this is great!
    Thank you for sharing.

  • @dontexist7039
    @dontexist7039 หลายเดือนก่อน +1

    it looks amazing. thanks man for details and ur ideas, wish u 1.000.000 followers. Lun Dev, what thing do u use for adaptivity in this video?

  • @marcelomagalhaes4508
    @marcelomagalhaes4508 29 วันที่ผ่านมา +1

    This is genius! Very nice work!

  • @Alima_khan1
    @Alima_khan1 หลายเดือนก่อน

    Indeed ! Superb....keep uploading like this .... Its looking like a wow and I tried this effect in Taj Mahal ....looking so fascinating... thanks 🙏👍

  • @2difficult2do
    @2difficult2do หลายเดือนก่อน +1

    Awesome effect and clear explanation. Thanks. 👍👍👍

  • @70morisika
    @70morisika หลายเดือนก่อน +5

    I have saved your video for infinity

  • @superpsychedelics436
    @superpsychedelics436 หลายเดือนก่อน +4

    Brother I really admire your work, I am creating a project using different master css properties that you've told , I will share the project with you :) , THANK YOU BRO

    • @lundeveloper
      @lundeveloper  หลายเดือนก่อน +1

      Ok brother 😍

  • @darahk88
    @darahk88 หลายเดือนก่อน

    I love this channel. Tutorials are professional

  • @vaxulNo1
    @vaxulNo1 29 วันที่ผ่านมา +1

    First of all, I really like your video and the idea of this effect. But please do a follow up with a real world scenario so newbies don't think it's okay to put a big GIF on a homepage. Performance matters. And you may want to use a real instead of a background image, since in real life in a content management system you want the editors to be able to change the image. Should work well with your approach. Thanks for sharing. ❤

  • @rgmazon
    @rgmazon หลายเดือนก่อน

    this is amazing. you're the best!

  • @gtavgraphicsdemo6987
    @gtavgraphicsdemo6987 หลายเดือนก่อน +1

    Insane content as always, can't consider using CSS without LunDev help 😘

    • @lundeveloper
      @lundeveloper  หลายเดือนก่อน +1

      Thank you, there's a lot more crazy things to come 😁

  • @saimoralam5647
    @saimoralam5647 24 วันที่ผ่านมา

    just awesome

  • @Volt1324-v3n
    @Volt1324-v3n หลายเดือนก่อน

    Watching your videos, mesmerized, knowing I'll probably never use anything I see here 😅.
    Anyway keep up the good work 👏🏻

  • @abdullahsufyan7823
    @abdullahsufyan7823 หลายเดือนก่อน

    you are awesome no words for your creativity 🥰🥰♥

  • @AbdelrahmanRamadan-cp5jx
    @AbdelrahmanRamadan-cp5jx 28 วันที่ผ่านมา

    Keep up the great work my friend.

  • @grischpel
    @grischpel หลายเดือนก่อน

    Danke!

    • @lundeveloper
      @lundeveloper  หลายเดือนก่อน +1

      Thank you so much 😍😍

  • @gandhirajs7055
    @gandhirajs7055 หลายเดือนก่อน

    wowwwwwwww bro top level ✌🏼✌🏼

  • @hifanci2506
    @hifanci2506 16 วันที่ผ่านมา

    OMG 😱😱😱😱😱😱 so coolllllllllllll

  • @Marghoob_Khan
    @Marghoob_Khan หลายเดือนก่อน

    When he said we need to do animation. I became really attentive 😂😂😂.

  • @김태훈-w3t7f
    @김태훈-w3t7f 12 วันที่ผ่านมา

    Wonderful.

  • @edge12340
    @edge12340 25 วันที่ผ่านมา

    you're css king

  • @ASulaymon
    @ASulaymon หลายเดือนก่อน

    just AMAZING ❤

  • @monsieur-khonar
    @monsieur-khonar หลายเดือนก่อน +11

    3.5Mb just for the GIf, OMG !

    • @lundeveloper
      @lundeveloper  29 วันที่ผ่านมา +1

      In the video I have chosen the best options for creating high quality gifs (image size, number of frames per second). If you choose other options during gif creation, it will be less than 1MB 😍

    • @Drakkarius
      @Drakkarius 26 วันที่ผ่านมา

      Useless for real world application.

  • @kaka_goat
    @kaka_goat หลายเดือนก่อน

    You are absolutely legend bro

    • @lundeveloper
      @lundeveloper  29 วันที่ผ่านมา

      Thank you for watching my content 😍

  • @joselife-on4029
    @joselife-on4029 หลายเดือนก่อน

    Simply amazing

  • @unknownboy8174
    @unknownboy8174 หลายเดือนก่อน

    Awesome Bhai

  • @carlibg
    @carlibg หลายเดือนก่อน

    ❤ You're the Best... Great.!!!

    • @lundeveloper
      @lundeveloper  29 วันที่ผ่านมา

      Thanks for watching 😍

  • @eslammostafa1247
    @eslammostafa1247 หลายเดือนก่อน

    Amazing! That was new for me,
    Thank you for your great content
    Please make more tutorials about handling images

  • @MustaPha-s4i
    @MustaPha-s4i หลายเดือนก่อน

    That Amazing i love your Channel and i love your tutoriel really you take CSS for ather level

  • @okforcoding
    @okforcoding หลายเดือนก่อน

    Professional idea bro thank u ❤

  • @betzybarragan
    @betzybarragan หลายเดือนก่อน

    Thanks for these tutorials!

    • @lundeveloper
      @lundeveloper  29 วันที่ผ่านมา

      Thanks for watching 😍😍😍

  • @keviincosmos
    @keviincosmos หลายเดือนก่อน

    Really great. 👏

  • @KRTECH2023
    @KRTECH2023 หลายเดือนก่อน

    I love your content thanks for sharing your knowledge for free thanks a lot 🙏

  • @Abdullah_WordPress_Expert
    @Abdullah_WordPress_Expert หลายเดือนก่อน +1

    wow Idea Thanks alot bro

  • @eioluseyi
    @eioluseyi หลายเดือนก่อน

    This is really good!
    Thanks!

  • @ahiamatagabriel5696
    @ahiamatagabriel5696 หลายเดือนก่อน

    I LOVE THIS

    • @lundeveloper
      @lundeveloper  29 วันที่ผ่านมา

      Thanks brother 😍

  • @adammarostica3016
    @adammarostica3016 หลายเดือนก่อน +2

    This is a really cool effect, but a 3.5mb image just kills it. Will have to try to compress it further to see if we can get it to a reasonable size. Even if it gets pixelated, that’s still a pretty cool effect.

  • @thegoldgamer6339
    @thegoldgamer6339 หลายเดือนก่อน

    your a god for real

  • @fernandobarros1911
    @fernandobarros1911 หลายเดือนก่อน

    Fantastic!

  • @davidedelpapa7706
    @davidedelpapa7706 29 วันที่ผ่านมา

    Awesome 😎

  • @MrTweaksGaming
    @MrTweaksGaming หลายเดือนก่อน

    bro you are just awesome

  • @MdR1328
    @MdR1328 26 วันที่ผ่านมา

    Cool idea and effect, not sure about the gif though ;D you probably don't want this on every refresh either. But I guess that for people to figure out and implement ;D

  • @XCanG
    @XCanG หลายเดือนก่อน +2

    If it comes to this, better use webp as it will be way smaller image (gifs are humongous in size and low quality due to 256 color quantization). And you could probably just use svg with filters to make something looks like ink. and animate it.

  • @ParticleCoders
    @ParticleCoders หลายเดือนก่อน

    ❤love it

  • @blakpulp1366
    @blakpulp1366 หลายเดือนก่อน

    And here I was thinking you were gonna scale the Png with linear transition. 😅 this is much better

  • @niktrillfingaz
    @niktrillfingaz 27 วันที่ผ่านมา +1

    also possible with png for higher quality. just have a wide image with the frames back to back and animate the mask-position horizontal.

  • @SanderBruggeman
    @SanderBruggeman 26 วันที่ผ่านมา

    So... Just CSS masking basically. Still a nice video about that subject though. I do have one request: I think it's common curtisy to always mention (at least in your video description) that you use an AI text-to-voice tool. No problem if you do, off course!

  • @thegraphickkia2098
    @thegraphickkia2098 หลายเดือนก่อน +2

    Bro what extension do you use to test the responsiveness of the screen? Love your content btw ❤

    • @samiredits001
      @samiredits001 หลายเดือนก่อน +2

      Mobile simulator - responsive testing tool

    • @thegraphickkia2098
      @thegraphickkia2098 หลายเดือนก่อน +1

      @@samiredits001 Thankyou ❤️❤️

  • @psenej
    @psenej หลายเดือนก่อน

    wow it is soo easy but the effect is damn good

  • @EmeliaNevaehSaniyao
    @EmeliaNevaehSaniyao 23 วันที่ผ่านมา +79

    aitutorialmaker AI fixes this. Crazy Ink Animation Effect Video

  • @ZubayerAurnab
    @ZubayerAurnab หลายเดือนก่อน

    Thank you , that was Awesome

  • @mouhamadihamza1183
    @mouhamadihamza1183 หลายเดือนก่อน

    Fantastic

  • @pedrogris
    @pedrogris หลายเดือนก่อน +7

    Awesome effect, but 3.5MB just for the mask animation (not counting the background image) is absolutely huge for web standards, you better not use that in you header section
    I'd suggest converting it into webp which also supports animation just as GIFs to try to shrink it a little bit
    Great and useful content, keep it up!

    • @lundeveloper
      @lundeveloper  หลายเดือนก่อน +3

      At the video to gif conversion step, if you choose lower video parameters, the result will be less than 1mb

    • @RayBellis
      @RayBellis หลายเดือนก่อน +3

      @@lundeveloper that's still 800kB too big...

  • @jasonl122
    @jasonl122 หลายเดือนก่อน +3

    This channel has some great content, but wow the audio is like listening to nails on a chalkboard.

  • @naingmintun4159
    @naingmintun4159 29 วันที่ผ่านมา

    Thanks sir.

  • @papatomicjusz
    @papatomicjusz หลายเดือนก่อน +12

    3.55 MiB?! Dude...

  • @TheMetalMag
    @TheMetalMag 28 วันที่ผ่านมา

    excellent

  • @chris-adams-tas
    @chris-adams-tas หลายเดือนก่อน

    Great demo, thanks for sharing.

  • @COD_Warfare_Master-sair7
    @COD_Warfare_Master-sair7 28 วันที่ผ่านมา +1

    Btw which responsive extension are u using here and thanks for the great content

    • @Sprnrml
      @Sprnrml 25 วันที่ผ่านมา

      I think it’s Mobile Simulator for Chrome

    • @COD_Warfare_Master-sair7
      @COD_Warfare_Master-sair7 25 วันที่ผ่านมา

      @Sprnrml btw can u know best extension for web development is u know then can u suggest me

    • @Sprnrml
      @Sprnrml 25 วันที่ผ่านมา

      @@COD_Warfare_Master-sair7 for front end checking and looking at styles, I personally use CSS Peeper a lot.

  • @caremyok
    @caremyok หลายเดือนก่อน

    good technique 💯

  • @chilljellyfish
    @chilljellyfish หลายเดือนก่อน +1

    awesome video! What's the responsive tool your using?

    • @זיואשכנזי
      @זיואשכנזי หลายเดือนก่อน +1

      I would like to know that too 🙏🏼

    • @lundeveloper
      @lundeveloper  หลายเดือนก่อน +1

      This is mobile simulator in chorme

  • @khouchanemahmoud9475
    @khouchanemahmoud9475 หลายเดือนก่อน

    So cool

  • @CraigMcNicholas
    @CraigMcNicholas หลายเดือนก่อน +20

    Animated SVG, APNG or WEBP are all a better option.
    Header images requiring > 100kb is just asking for bad UX on slower connections.

    • @dBradbury
      @dBradbury 18 วันที่ผ่านมา +1

      I get really odd vibes from this entire video - Using the free stock video without mentioning or adhering to the license, using a 3.5MB gif, what I presume to be an AI voice, and lots of comments that feel astroturfed with multiple coming from programmers who have supposedly been around for ~10 years? I understand the creator making a living, but this also seems not great for newer developers.

  • @풍월상신
    @풍월상신 หลายเดือนก่อน

    CoooooL!!!!!

  • @harshitpant07
    @harshitpant07 หลายเดือนก่อน

    Subbed 🚀

    • @lundeveloper
      @lundeveloper  หลายเดือนก่อน

      Thank you 😍

  • @ArifHossain-ws6zf
    @ArifHossain-ws6zf หลายเดือนก่อน +4

    You can also use animated webp instead of GIF.

  • @texodus_et6313
    @texodus_et6313 28 วันที่ผ่านมา

    Awesome. How will it work for a video background?

  • @codingwithsohail
    @codingwithsohail หลายเดือนก่อน

    Big fan brother ❤

    • @lundeveloper
      @lundeveloper  หลายเดือนก่อน

      Thank you brother 😍

  • @ffrreeaakk
    @ffrreeaakk หลายเดือนก่อน

    thanks!

  • @1More_Dreamer
    @1More_Dreamer หลายเดือนก่อน

    Ink 🗣️💨💥💯💯‼️‼️💣💣🔥🔥🔥🦅🦅

  • @imagineiffcom
    @imagineiffcom 28 วันที่ผ่านมา

    It actually is possible to get videos with transparent backgrounds. Providing both HEVC and VP9 formats gives you chrome and safari coverage.

  • @igoraguiar00
    @igoraguiar00 28 วันที่ผ่านมา

    holly shit that was beautiful

  • @vaibhavsoni2302
    @vaibhavsoni2302 หลายเดือนก่อน

    thanks pal

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt หลายเดือนก่อน

    wow , thanks

  • @ramakrushnapradhan1458
    @ramakrushnapradhan1458 หลายเดือนก่อน

    Ohh.. thank you.

  • @ernestorh6110
    @ernestorh6110 หลายเดือนก่อน

    🔥🔥🔥

  • @igorprooff2245
    @igorprooff2245 หลายเดือนก่อน

    From Ukraine with love ❤

  • @Code_guide
    @Code_guide หลายเดือนก่อน

    Awesom

  • @ipa_stor
    @ipa_stor 26 วันที่ผ่านมา

    playing with gif is sort of time killer🤣At this moment I'm trying(hope I could🤞) to bake a 3d animation in blender animation to multiple slides (aka gif or in your "step animation" video) and then use it in a touch gui(it not uses hover interactions so) to make a low-performance transitions and interactions(like if button 1 touched -> show slides 1-10, if scrolled -> 30-50 and etc) so this one timed perfectly:)) thanks again for your content wait every video

  • @MateusGuedes-b7m
    @MateusGuedes-b7m หลายเดือนก่อน +3

    Oh my god, I never saw this in my 9 years as developer.
    Greetings from Brazil!!

  • @AliSaeed-c6j
    @AliSaeed-c6j หลายเดือนก่อน

    goodjob

  • @nayaksarangbala
    @nayaksarangbala 29 วันที่ผ่านมา

    bruhhh 🔥

  • @sajibprime3
    @sajibprime3 หลายเดือนก่อน +9

    Where is that dramatic music for guessing wrong?

    • @DDeh351
      @DDeh351 หลายเดือนก่อน

      *farts*

  • @Fjonan
    @Fjonan หลายเดือนก่อน

    Very cool idea. Could this be possible without a gif by changing contrast on a static image that reveals the edges of the inkblot from white to black?

  • @jairocapua2956
    @jairocapua2956 26 วันที่ผ่านมา

    Hi! What chrome extension dis you use to view it in Iphone view at 3:29 ? Thanks

  • @AsafBilal-tn4ub
    @AsafBilal-tn4ub หลายเดือนก่อน

    I love you bro ❤

    • @lundeveloper
      @lundeveloper  หลายเดือนก่อน

      Thanks bro 😍

  • @Phitsaaa
    @Phitsaaa 27 วันที่ผ่านมา

    cool

  • @tedamy1698
    @tedamy1698 หลายเดือนก่อน

    Wow

  • @braveitor
    @braveitor หลายเดือนก่อน

    I suppose you can do something similar with animated svgs and the size would be much smaller than a gif that size with so many frames.