Crazy Ink Animation Effect with CSS Only

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 204

  • @lundeveloper
    @lundeveloper  7 дней назад +25

    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 7 дней назад +64

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

    • @lundeveloper
      @lundeveloper  7 дней назад +6

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

    • @learnwithshaheb
      @learnwithshaheb 7 дней назад +3

      @@lundeveloper 😄basically i always do

  • @ArifHossain-ws6zf
    @ArifHossain-ws6zf 7 дней назад +38

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

    • @DamirSecki
      @DamirSecki 23 часа назад

      animated svg would be a much, much better solution

  • @CraigMcNicholas
    @CraigMcNicholas 7 дней назад +12

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

  • @YakxyBoy
    @YakxyBoy 7 дней назад +21

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

    • @lundeveloper
      @lundeveloper  7 дней назад +1

      Thanks for watching my content 😍

    • @YakxyBoy
      @YakxyBoy 7 дней назад +1

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

    • @Samarsinghxs
      @Samarsinghxs 7 дней назад

      @@YakxyBoy are you japnese

  • @waleedbinshabbir1542
    @waleedbinshabbir1542 7 дней назад +3

    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 6 дней назад

      Hey are you a designer?

    • @waleedbinshabbir1542
      @waleedbinshabbir1542 6 дней назад +1

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

  • @MateusGuedes-b7m
    @MateusGuedes-b7m 7 дней назад +3

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

  • @marvinbaun6874
    @marvinbaun6874 4 дня назад +1

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

  • @xecol12
    @xecol12 7 дней назад +7

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

  • @70morisika
    @70morisika 7 дней назад +5

    I have saved your video for infinity

  • @XCanG
    @XCanG 7 дней назад +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.

  • @waltermelo1033
    @waltermelo1033 2 дня назад

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

  • @dontexist7039
    @dontexist7039 7 дней назад +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?

  • @papatomicjusz
    @papatomicjusz 7 дней назад +10

    3.55 MiB?! Dude...

  • @monsieur-khonar
    @monsieur-khonar 6 дней назад +10

    3.5Mb just for the GIf, OMG !

    • @lundeveloper
      @lundeveloper  5 дней назад +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 2 дня назад

      Useless for real world application.

  • @MikeREVANA
    @MikeREVANA 7 дней назад +2

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

  • @marcelomagalhaes4508
    @marcelomagalhaes4508 5 дней назад +1

    This is genius! Very nice work!

  • @vaxulNo1
    @vaxulNo1 5 дней назад +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. ❤

  • @tt._.7857
    @tt._.7857 7 дней назад +2

    Genuinely the best yt channel

  • @2difficult2do
    @2difficult2do 7 дней назад +1

    Awesome effect and clear explanation. Thanks. 👍👍👍

  • @superpsychedelics436
    @superpsychedelics436 7 дней назад +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  7 дней назад +8

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

    • @diobrandoggo7471
      @diobrandoggo7471 6 дней назад

      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.

  • @Alima_khan1
    @Alima_khan1 6 дней назад

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

  • @ArifHossain-ws6zf
    @ArifHossain-ws6zf 7 дней назад +4

    You can also use animated webp instead of GIF.

  • @thegraphickkia2098
    @thegraphickkia2098 7 дней назад +2

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

  • @pedrogris
    @pedrogris 7 дней назад +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  7 дней назад +3

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

    • @RayBellis
      @RayBellis 6 дней назад +3

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

  • @adammarostica3016
    @adammarostica3016 6 дней назад +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.

  • @imagineiffcom
    @imagineiffcom 4 дня назад

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

  • @eslammostafa1247
    @eslammostafa1247 6 дней назад

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

  • @darahk88
    @darahk88 7 дней назад

    I love this channel. Tutorials are professional

  • @niktrillfingaz
    @niktrillfingaz 3 дня назад

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

  • @gtavgraphicsdemo6987
    @gtavgraphicsdemo6987 7 дней назад +1

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

    • @lundeveloper
      @lundeveloper  7 дней назад +1

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

  • @Volt1324-v3n
    @Volt1324-v3n 6 дней назад

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

  • @abdullahsufyan7823
    @abdullahsufyan7823 7 дней назад

    you are awesome no words for your creativity 🥰🥰♥

  • @rgmazon
    @rgmazon 6 дней назад

    this is amazing. you're the best!

  • @chilljellyfish
    @chilljellyfish 6 дней назад +1

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

  • @blakpulp1366
    @blakpulp1366 6 дней назад

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

  • @jasonl122
    @jasonl122 6 дней назад +3

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

  • @MustaPha-s4i
    @MustaPha-s4i 7 дней назад

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

  • @KRTECH2023
    @KRTECH2023 7 дней назад

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

  • @betzybarragan
    @betzybarragan 6 дней назад

    Thanks for these tutorials!

    • @lundeveloper
      @lundeveloper  5 дней назад

      Thanks for watching 😍😍😍

  • @AbdelrahmanRamadan-cp5jx
    @AbdelrahmanRamadan-cp5jx 4 дня назад

    Keep up the great work my friend.

  • @SanderBruggeman
    @SanderBruggeman 2 дня назад

    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!

  • @psenej
    @psenej 7 дней назад

    wow it is soo easy but the effect is damn good

  • @texodus_et6313
    @texodus_et6313 4 дня назад

    Awesome. How will it work for a video background?

  • @edge12340
    @edge12340 День назад

    you're css king

  • @joselife-on4029
    @joselife-on4029 7 дней назад

    Simply amazing

  • @MdR1328
    @MdR1328 2 дня назад

    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

  • @eioluseyi
    @eioluseyi 7 дней назад

    This is really good!
    Thanks!

  • @kaka_goat
    @kaka_goat 5 дней назад

    You are absolutely legend bro

    • @lundeveloper
      @lundeveloper  5 дней назад

      Thank you for watching my content 😍

  • @okforcoding
    @okforcoding 7 дней назад

    Professional idea bro thank u ❤

  • @saimoralam5647
    @saimoralam5647 3 часа назад

    just awesome

  • @sajibprime3
    @sajibprime3 7 дней назад +9

    Where is that dramatic music for guessing wrong?

  • @ASulaymon
    @ASulaymon 7 дней назад

    just AMAZING ❤

  • @carlibg
    @carlibg 5 дней назад

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

  • @chris-adams-tas
    @chris-adams-tas 6 дней назад

    Great demo, thanks for sharing.

  • @Abdullah_WordPress_Expert
    @Abdullah_WordPress_Expert 7 дней назад +1

    wow Idea Thanks alot bro

  • @Marghoob_Khan
    @Marghoob_Khan 7 дней назад

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

  • @keviincosmos
    @keviincosmos 6 дней назад

    Really great. 👏

  • @ZubayerAurnab
    @ZubayerAurnab 7 дней назад

    Thank you , that was Awesome

  • @Fjonan
    @Fjonan 6 дней назад

    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?

  • @gandhirajs7055
    @gandhirajs7055 7 дней назад

    wowwwwwwww bro top level ✌🏼✌🏼

  • @COD_Warfare_Master-sair7
    @COD_Warfare_Master-sair7 4 дня назад +1

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

    • @Sprnrml
      @Sprnrml День назад

      I think it’s Mobile Simulator for Chrome

    • @COD_Warfare_Master-sair7
      @COD_Warfare_Master-sair7 День назад

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

    • @Sprnrml
      @Sprnrml День назад

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

  • @davidedelpapa7706
    @davidedelpapa7706 5 дней назад

    Awesome 😎

  • @thegoldgamer6339
    @thegoldgamer6339 7 дней назад

    your a god for real

  • @unknownboy8174
    @unknownboy8174 6 дней назад

    Awesome Bhai

  • @ahiamatagabriel5696
    @ahiamatagabriel5696 6 дней назад

    I LOVE THIS

  • @lebonron
    @lebonron 7 дней назад +1

    One question though : why gif and not svg? Gif are larger file size that will effect performance. Can you do this with svg? Would be cool.

  • @MrTweaksGaming
    @MrTweaksGaming 6 дней назад

    bro you are just awesome

  • @holerisen
    @holerisen 3 дня назад

    btw: Videos can have transparent background. Just MP4 does not support it. Webm videos do support transparent backgrounds :)

  • @ipa_stor
    @ipa_stor 2 дня назад

    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

  • @braveitor
    @braveitor 7 дней назад

    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.

  • @MahdiPakdel-t4d
    @MahdiPakdel-t4d 6 дней назад

    ❤love it

  • @igorprooff2245
    @igorprooff2245 7 дней назад

    From Ukraine with love ❤

  • @TheMetalMag
    @TheMetalMag 3 дня назад

    excellent

  • @fernandobarros1911
    @fernandobarros1911 7 дней назад

    Fantastic!

  • @풍월상신
    @풍월상신 6 дней назад

    CoooooL!!!!!

  • @markobijelic6012
    @markobijelic6012 7 дней назад +1

    Hey man, i tried making it like you but the problem is that when i use mask-image it colors whole bg black and stays that way, how do i fix that? Thank you in advance.

  • @naingmintun4159
    @naingmintun4159 5 дней назад

    Thanks sir.

  • @sakarsr
    @sakarsr 6 дней назад +2

    wonderful animation using CSS only. Thank you for making this video. Good health.

  • @ramakrushnapradhan1458
    @ramakrushnapradhan1458 7 дней назад

    Ohh.. thank you.

  • @caremyok
    @caremyok 7 дней назад

    good technique 💯

  • @mouhamadihamza1183
    @mouhamadihamza1183 7 дней назад

    Fantastic

  • @ffrreeaakk
    @ffrreeaakk 6 дней назад

    thanks!

  • @Alex-y1v6d
    @Alex-y1v6d 7 дней назад

    is there a video explaining the early part of the video of the images disappering and appearing ?

  • @khouchanemahmoud9475
    @khouchanemahmoud9475 7 дней назад

    So cool

  • @vaibhavsoni2302
    @vaibhavsoni2302 7 дней назад

    thanks pal

  • @JoaoLucas-tw2pt
    @JoaoLucas-tw2pt 7 дней назад +1

    We could also do this with sprite images, like this:
    mask-image: url('path_to_sprite_image.png');
    animation: dye 1.3s steps(20) forwards;
    then the dye animation would just shift the mask-position bit by bit until it’s done at 100%.
    @keyframes dye {
    0% {
    mask-position: 0% -100px;
    }
    100% {
    mask-position: 100% 0%;
    }
    }

    • @bjol_Dg
      @bjol_Dg 7 дней назад

      Then you won’t get the animation that GIF gives

    • @JoaoLucas-tw2pt
      @JoaoLucas-tw2pt 7 дней назад

      yeah with gif it feels smoother however depending on the what you need both are good options

  • @igoraguiar00
    @igoraguiar00 3 дня назад

    holly shit that was beautiful

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 6 дней назад

    wow , thanks

  • @dip_ok01
    @dip_ok01 5 дней назад

    need full front-end development course 😢😢

  • @callmebroh
    @callmebroh 6 дней назад

    what the live server u use ?????? i like how browser showing responsive in mobile.......

  • @_cannachris
    @_cannachris 6 дней назад

    How could we use transparent animated images who are smaller then the most GIFs? APNG?

  • @harshitpant07
    @harshitpant07 7 дней назад

    Subbed 🚀

  • @kehindeodusanya7195
    @kehindeodusanya7195 19 часов назад

    Please, do the animation-timeline tutorial.

  • @leogt15
    @leogt15 4 дня назад

    What's that chrome extension he uses to toggle between mobile and desktop?

  • @Code_guide
    @Code_guide 6 дней назад

    Awesom

  • @josefkrajkar3095
    @josefkrajkar3095 7 дней назад

    Looks pretty awesome, however I noticed that the gif file is more than 3MB large. Any tips for optimization?

    • @lundeveloper
      @lundeveloper  7 дней назад +1

      Don't worry in the gif inage creation step, i chose the highest parameters. if you choose other parameters the size is only about 1mb

  • @twice9548
    @twice9548 7 дней назад

    Can i use this effect using GSAP and Scrolltrigger?
    Will try to add the gif animation while scrolling

  • @RaisaMahjabinProva
    @RaisaMahjabinProva 2 дня назад

    which extension you're using to view in different mobiles?