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.
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
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.
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 😍
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.
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
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. ❤
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.
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
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!
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!
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
If you find it interesting, don't forget to subscribe to the channel to watch more interesting videos about programming and web design
awesome, i never seen this before in 15 Years of programming journey.
Thank you so much, I believe if you watch my other videos you will repeat this many more times 😁
@@lundeveloper 😄basically i always do
I think animated SVG mask can be used for this, GIF files are large and not scalable.
animated svg would be a much, much better solution
wish there’s a tutorial on that one..
You're helping people a lot. You're such a legend🔥🔥😍😍
Thanks for watching my content 😍
@@lundeveloper don't thanks me you're such a great person Arigato!🙏🙏❤❤
@@YakxyBoy are you japnese
If you apply this technique to slider design, what will it look like?
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.
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
Hey are you a designer?
@abusufyan1352 I am not a designer, but I want to branch out my skill set.
You are literally the most OP webdesign source! Thank you very much!
Genuinely the best yt channel
Baby wake up, lundev cooked a new video 🗣️🗣️🗣️
also possible with png for higher quality. just have a wide image with the frames back to back and animate the mask-position horizontal.
Danke!
Thank you so much 😍😍
3.55 MiB?! Dude...
Didn't even know that was possible 🫥 Great video as always 😊
☺️☺️☺️
Man, I'm really impressed on how you are great not only on CSS but Design in general too :O !! that's insane
I have saved your video for infinity
Wouah. Very nice. I am not a front end developer, but I must say that this is great!
Thank you for sharing.
This is genius! Very nice work!
You can also use animated webp instead of GIF.
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.
3.5Mb just for the GIf, OMG !
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 😍
Useless for real world application.
Animated SVG, APNG or WEBP are all a better option.
Header images requiring > 100kb is just asking for bad UX on slower connections.
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.
aitutorialmaker AI fixes this. Crazy Ink Animation Effect Video
I love this channel. Tutorials are professional
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
Ok brother 😍
Indeed ! Superb....keep uploading like this .... Its looking like a wow and I tried this effect in Taj Mahal ....looking so fascinating... thanks 🙏👍
this is amazing. you're the best!
Awesome effect and clear explanation. Thanks. 👍👍👍
You are absolutely legend bro
Thank you for watching my content 😍
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. ❤
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.
wowwwwwwww bro top level ✌🏼✌🏼
OMG 😱😱😱😱😱😱 so coolllllllllllll
wow Idea Thanks alot bro
Keep up the great work my friend.
just awesome
you are awesome no words for your creativity 🥰🥰♥
Insane content as always, can't consider using CSS without LunDev help 😘
Thank you, there's a lot more crazy things to come 😁
you're css king
wow it is soo easy but the effect is damn good
Professional idea bro thank u ❤
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?
just AMAZING ❤
And here I was thinking you were gonna scale the Png with linear transition. 😅 this is much better
bro you are just awesome
Amazing! That was new for me,
Thank you for your great content
Please make more tutorials about handling images
Wonderful.
Thanks for these tutorials!
Thanks for watching 😍😍😍
Awesome Bhai
That Amazing i love your Channel and i love your tutoriel really you take CSS for ather level
your a god for real
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
Simply amazing
❤ You're the Best... Great.!!!
Thanks for watching 😍
This is really good!
Thanks!
Thank you , that was Awesome
When he said we need to do animation. I became really attentive 😂😂😂.
It actually is possible to get videos with transparent backgrounds. Providing both HEVC and VP9 formats gives you chrome and safari coverage.
I LOVE THIS
Thanks brother 😍
Fantastic!
good technique 💯
Watching your videos, mesmerized, knowing I'll probably never use anything I see here 😅.
Anyway keep up the good work 👏🏻
Awesome 😎
I love your content thanks for sharing your knowledge for free thanks a lot 🙏
Really great. 👏
CoooooL!!!!!
❤love it
Awesome. How will it work for a video background?
Fantastic
So cool
Thanks sir.
holly shit that was beautiful
Subbed 🚀
Thank you 😍
excellent
Great demo, thanks for sharing.
Bro what extension do you use to test the responsiveness of the screen? Love your content btw ❤
Mobile simulator - responsive testing tool
@@samiredits001 Thankyou ❤️❤️
Where is that dramatic music for guessing wrong?
*farts*
thanks!
Hi! What chrome extension dis you use to view it in Iphone view at 3:29 ? Thanks
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!
Ink 🗣️💨💥💯💯‼️‼️💣💣🔥🔥🔥🦅🦅
Btw which responsive extension are u using here and thanks for the great content
I think it’s Mobile Simulator for Chrome
@Sprnrml btw can u know best extension for web development is u know then can u suggest me
@@COD_Warfare_Master-sair7 for front end checking and looking at styles, I personally use CSS Peeper a lot.
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!
At the video to gif conversion step, if you choose lower video parameters, the result will be less than 1mb
@@lundeveloper that's still 800kB too big...
thanks pal
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
Ohh.. thank you.
wow , thanks
awesome video! What's the responsive tool your using?
I would like to know that too 🙏🏼
This is mobile simulator in chorme
🔥🔥🔥
Oh my god, I never saw this in my 9 years as developer.
Greetings from Brazil!!
From Ukraine with love ❤
Awesom
Big fan brother ❤
Thank you brother 😍
bruhhh 🔥
goodjob
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.
btw: Videos can have transparent background. Just MP4 does not support it. Webm videos do support transparent backgrounds :)
This channel has some great content, but wow the audio is like listening to nails on a chalkboard.
Wow
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?
I love you bro ❤
Thanks bro 😍