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
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
Wow, that's a really easy way to do it. I saw much more complex methods before :P Thanks! To be correct: Video-Formats with transparent background actually do exist. For example, in DaVinci Resolve you can export in QuickTime DNxHR 444 12-bit and check "Export Alpha".
I don't have DaVinci Resolve installed, but maybe you can export to WebP also. I made a website with some animated WebP once. But can't remember how I made them 🤪
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!
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.
It's a shame that the spelling checking plugin says "LUNDEV": Unknown word. It should say something like "Hello, CSS God" as this would be more suitable for you. The grade of awesomeness can't be named, as it is too high and complicated to type out. Hoangho, keep that quality and tutorials coming. They are stunning, always and often with a surprising effect, at least to me. What do you mean with Slider at the end? A content slider with that type of effect, or unlock slider, not really sure what you mean here.
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.
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%; } }
Can we do the same using animation without using a gif, by using 60images , changing each with animation 1s steps(60) forwards ?. That way we can reverse the animation too if we want. Like for hovering effects and such. I dont know if it will work. Im just so curious
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.
Sir please help in my case i got Access to image at 'file:///C:/Users/PC/Desktop/background-animation/deb.gif' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app. This massage
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
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
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 you apply this technique to slider design, what will it look like?
Oh my god, I never saw this in my 9 years as developer.
Greetings from Brazil!!
Awesome effect and clear explanation. Thanks. 👍👍👍
Baby wake up, lundev cooked a new video 🗣️🗣️🗣️
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 😍
Wow, that's a really easy way to do it. I saw much more complex methods before :P
Thanks!
To be correct: Video-Formats with transparent background actually do exist.
For example, in DaVinci Resolve you can export in QuickTime DNxHR 444 12-bit and check "Export Alpha".
Thank for comment 😍
I don't have DaVinci Resolve installed, but maybe you can export to WebP also. I made a website with some animated WebP once. But can't remember how I made them 🤪
I have saved your video for infinity
Didn't even know that was possible 🫥 Great video as always 😊
☺️☺️☺️
this is amazing. you're the best!
Amazing! That was new for me,
Thank you for your great content
Please make more tutorials about handling images
Where is that dramatic music for guessing wrong?
Genuinely the best yt channel
I think animated SVG mask can be used for this, GIF files are large and not scalable.
Watching your videos, mesmerized, knowing I'll probably never use anything I see here 😅.
Anyway keep up the good work 👏🏻
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?
awesome video! What's the responsive tool your using?
I would like to know that too 🙏🏼
This is mobile simulator in chorme
Insane content as always, can't consider using CSS without LunDev help 😘
Thank you, there's a lot more crazy things to come 😁
you are awesome no words for your creativity 🥰🥰♥
wowwwwwwww bro top level ✌🏼✌🏼
wow Idea Thanks alot bro
I love this channel. Tutorials are professional
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
Professional idea bro thank u ❤
I love your content thanks for sharing your knowledge for free thanks a lot 🙏
Simply amazing
That Amazing i love your Channel and i love your tutoriel really you take CSS for ather level
This is really good!
Thanks!
Fantastic!
You can also use animated webp instead of GIF.
Great demo, thanks for sharing.
just AMAZING ❤
Thank you , that was Awesome
your a god for real
wow it is soo easy but the effect is damn good
Bro what extension do you use to test the responsiveness of the screen? Love your content btw ❤
Mobile simulator - responsive testing tool
@@samiredits001 Thankyou ❤️❤️
Fantastic
❤love it
Awesome Bhai
Hello, for responsive checking which tool you are using? It's seems me so interesting. Thanks.
thanks!
PLS tell me what that device extension is?
good technique 💯
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.
Animated SVG, APNG or WEBP are all a better option.
Header images requiring > 100kb is just asking for bad UX on slower connections.
CoooooL!!!!!
So cool
When he said we need to do animation. I became really attentive 😂😂😂.
thanks pal
From Ukraine with love ❤
🔥🔥🔥
Ohh.. thank you.
Subbed 🚀
Thank you 😍
This channel has some great content, but wow the audio is like listening to nails on a chalkboard.
It's a shame that the spelling checking plugin says "LUNDEV": Unknown word. It should say something like "Hello, CSS God" as this would be more suitable for you. The grade of awesomeness can't be named, as it is too high and complicated to type out. Hoangho, keep that quality and tutorials coming. They are stunning, always and often with a surprising effect, at least to me.
What do you mean with Slider at the end? A content slider with that type of effect, or unlock slider, not really sure what you mean here.
😍
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.
Wow
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.
is there a video explaining the early part of the video of the images disappering and appearing ?
Looks pretty awesome, however I noticed that the gif file is more than 3MB large. Any tips for optimization?
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
goodjob
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.
wow , thanks
Big fan brother ❤
Thank you brother 😍
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%;
}
}
Then you won’t get the animation that GIF gives
yeah with gif it feels smoother however depending on the what you need both are good options
Can i use this effect using GSAP and Scrolltrigger?
Will try to add the gif animation while scrolling
Can we do the same using animation without using a gif, by using 60images , changing each with animation 1s steps(60) forwards ?.
That way we can reverse the animation too if we want. Like for hovering effects and such.
I dont know if it will work. Im just so curious
I love you bro ❤
Thanks bro 😍
3.55 MiB?! Dude...
I've an Idea make hexagon grid with only css 🎉
Ink 🗣️💨💥💯💯‼️‼️💣💣🔥🔥🔥🦅🦅
Which extension are you using for checking device responsiveness??
I wanna it too
I discovered it's called Mobile simulator - responsive testing tool
What is the chrome extension that you used to check the responsiveness of css design?
Oh I actully found it it's called Mobile simulator extension
Could this be done with lottie files?
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.
What is means of Lun Dev Code 'Lun'
Can u teach tailwind css
.mov files can have transparency.
Why "Playback on other websites has been disabled by the video owner" ?
Isn't loading a gif that size awful for loading times? I usually wait to load giphy in my keyboard with those little guys.. let alone a 1.000x800 gif
bro, srsly? how large is that .gif file? hmm? what about one png with 10k pixels width and use steps for animation with background position movement?
3:28 Extension name please?
Found it: Mobile simulator - responsive testing tool
You are a bit special I didn't see these from other videos
Круто 👍
Sir please help in my case i got Access to image at 'file:///C:/Users/PC/Desktop/background-animation/deb.gif' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app. This massage
I think you can try using 'live server extension ' in vscode
@lundeveloper ooo thanks sir