Recreating PRO Ink Reveal In CSS
HTML-код
- Опубликовано: 5 июн 2024
- Recently someone asked me about the animations on arena.net and it turned out they were using mask-image to pull off this cool effect. The animation is easy enough to create, though creating the mask itself is a bit time-consuming!
🔗 Links
✅ Code from this video: github.com/kevin-powell/fancy...
✅ Inspiration for this video: arena.net
✅ My video on Intersection Observers: • Introduction to the In...
⌚ Timestamps
00:00 - Introduction
00:45 - The type of mask that you need for this effect
02:22 - The HTML and how we need to set things up
04:00 - The CSS to set things up
06:06 - Adding the mask
08:00 - Positioning the mask
09:15 - Understanding how the animation will work
11:20 - Creating the keyframes animation
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Never thought I would see GW2 and ArenaNet featured in your content. Those are ones of my favorite franchises and favorite videogame companies.
@@holodocprime it's actually thriving. released a lot of important content this year, including an expansion, and the active population has grown
The game got released on steam too. But awesome video! Thanks
@@holodocprime Not even close to
This animation shocked me, when I was 16. I had nothing with programming and stuff and wondered how this worked. And now, I am 27, and you open that secret for me. Thank you, Kevin!
was mask-image even available back then 10 years ago? xD
One thing to mention is that in Adobe After Effects you can export an animation as an image sequence. So you can create an animated splatter, which is what it looks like is the case here, and then make it black/white, and then export it as a bunch of images. Then all you need to do is pick out the frames of the animation you want--or you can just use the whole thing.
What do "image sequence" and "a bunch of images" mean in this instance? Is the export a single file, or are each of the images in the sequence exported to their own file? If so, that seems more troublesome. The approach Kevin shows here seems like the cleanest way you can accomplish this.
@@mykalimba no, doing what Peter said, but instead exporting it as a video instead and then simply embedding that is by far the easiest and cleanest way you can accomplish this.
@@danielbengtsson9833 Hmm, I might agree that using a video could be an "easiest" approach in some aspects, but there are so many other considerations that would steer me away from that: 1) Bandwidth - How large is that animation file, compared to the two images + mask image? 2) Fidelity - How does the visual quality of a frame of the video asset compare to that of the still images? 3) Versatility - With the approach Kevin demonstrates here, you maintain a low level of run-rime control over the animation parameters that I don't believe you have when the browser in playing back a video asset.
Maybe not as an image sequence, exactly, but you could certainly use a plugin to export it as if it was a sprite for a video game. That way you get to create a smooth animation with Ae, but still only having to work with a single image for the mask in the CSS, as shown in the video
@@mykalimba Make a 1-bit black and white PNG and use pngquant to get the smallest file size. Use 'mask-mode: luminance;' so that the white parts are visible because there is no transparency in your mask PNG. You can have a much higher number of pixels in your mask image this way (though some bad browsers have a limit) which allows more animation frames which means smoother animation so you get both bandwidth and quality optimisation.
Of course, most people are lazy and will make a 32-bit PNG with the default mask-mode of Alpha as the mask 🤦
Things I really do want to learn. Most tutorials only apply on being "login etc let's be productive, fashion website, shopping store."
We really need tutorials that tackle designs like these.
This animation is pretty mind-blowing. Thanks for making this tutorial.
Oooh its been more than 10 years since I saw this game... Seems like its still alive. I like those masking effects. Thanks for this video, I'll definitely abuse this new power you have bestowed unto us
We got a new expansion and steam release earlier this year, and a new player peek too. So yea, more than alive :D
Amazing! I never met mask-image in the code, and did't knew it even exist. Thank you!
Neat! Thank you for fleshing that out!
Their art is just amazing. Thanks for exlaining
Thank you! I've always wondered how they did that effect!
A lot of work, lot of thoughts and good contents. Thank you and all the best for next year.
Amazing. I will try it. Thanks to the King of CSS.
Woooow It's amazing!!! Thanks for shared! You're inspire me on the design much
Superb explanations as always!
Kevin you are awesome! Thanks for your explanations! Greetings from 🇧🇷
You're my best ever Instructor in developing my career in CSS and I always watch your videos, BUT in this video, I'm just watching you how you make things happens, that's mean I've spent around 14 minute just watching how things is done. I didn't have any income or learn new things as usual. I understand that it all depends on the design, but the question is what is the purpose from this video? If you're matching your channel creation purpose without exiting from the core of its goal((frontend dev.)) then i'll definitly will struggle while learning from you.
Sorry for the long message, but it from a heart of person that learned a lot from you and will always be thankful to you for what I've achieved because of you :)
You could use an expanding radial gradient or a bunch of clip paths as the mask as a much simpler and easier way to accomplish a similar effect
Oh no I got clickbaited by Guild Wars. But I was really happy that it was by someone who makes really good videos. I wondered how they do the website effects but now I want to do them myself even more. Thanks for the great tutorial.
Thanks, great video as always 😁
Hot tip, combine this masking effect with filter: drop shadow to add some "burnt edges" flair.
I learned something with this one. Very nice! Thank you! More tricks please :)
Okay now I HAVE to comment. I saw that Guild Wars Thumbnail and I was instantly in love. I can not believe someone outside of that bubble is talking about it hahaha
wow cool transition there
If you're using gsap, animating the mask position on scroll is super easy too with scrolltrigger!
thats cool for sure, thanks for that
I'm learning JavaScript soon be with you on CSS and HTML
Great!!! That's why you are the king.
great work like always keep going sir
This is really amazing
Is very impressive what you can do with something so "simple" as is css, along with the right tools. Thanks for sharing!
Nice effect !
Great video Kevin!
Very nice video, thnx for uploading.
Fantastic and interesting!
Thanks for the video 🔥! Have you published the video explaining the creation of masks on photoshop ? I couldn't find it :)
Cool effect!
IDK css do it like this wow applause
Very cool effect
awesome video but i think we really need some guidance on how to actually make the mask which you mention is the most time consuming process. I see many other comments here also facing this issue, would appreciate a guide or some directions on how us non-photo editors can accomplish and learn this process!
Love css and love GW2, what's not to like about this video?
CSS techniques like these are a fun hobby and I'm having a blast. Should I expect to apply them though?
This isn't something that would come up often, but like you said, it's fun :D
I'm planning on implementing this on a sample website for creative businesses like filmmakers that may want something like this on their website so as to land a sale. Lots of possibilities with this!
Hey Kevin, first of all congratz for your channel. Did you mention a video teaching how to do this mask but I didnt find it in your channel. Can you point it?
This is amazing!! Thank you Kevin!
Can I ask for some instructions on how to do “mask part” in Affinity Photo? I'm a beginner 😊
Thank you very much for help
Did you ever figure it out?
super something amazing I'm a beginner, but it blew my brain :), but I think it's better to use After Effect to paint the mask faster workflow. Thanks for the great tut
Amazing az always
Kevin have you explored Phaser for front end games? I know it’s different to css but still it’s cool the things you can do
I might take a look at it, thanks for the recommendation 😃
Just a quick thought I had before I saw the actual solution. Wouldn't be possible to get a very similar effect if you have a colored picture on the bottom, with a jagged picture (transparent edges) layered on top of it, and use mix-blend mode to get the intersection to be black and white, and then just move that picture? If you do it in about a second or so, I don't think it would show that much it's just an edge moving, specially if you do other things to it, like rotate it a bit as well.
Sort of a "poor mans" version of the solution.
Won't work with adding new elements to the scene though, only the colorchange.
On the one side I'm amazed by this effect and want to use it right away.
On the other side, my inner pagespeed optimization monkey is yelling "don't do it, don't you dare."
Buuuuut Javascript and onload events could prevent sudden changes by simply waiting for the image, as well as Intersection Observer and preloading the second image could help out, too.
Hmmm.... so interesting, so many use cases, yet so much work for one effect on only one single image...
But thank you Kevin for this amazing show case. Even those little things like using steps() is news to me and I love every little bit I can learn from your tutorials. 😊
What do you mean about pagespeed optimization? I mean, you only need to load two images and then some masks, is that really that bad? It's not like you are loading an entire video. I would think that loading a series of masks requires much less than loading a video; am I in the wrong here?
@@asdfasdfuhf Yes, you are actually right. I’m thinking of using this effect in the header image though, and as I saw Kevin’s 300+ KB PNG mask file I was like “that’s not gonna happen on mobile.”
But there are ways around that, as Kevin also mentioned. WebP or Avif could help with the file size, preloading as well, and of course not using this effect in the header. 😅
Great Video
mask-image property is very interesting
thanks kevin you are help me
Sir these animations are outstanding ,thank you for this tutorial.I request you to make a video on making mask image frame..thank you . -your youtube student.
it is so cool
Thanks for this amazing video. Please can you make a video on how use effectively css units like em, rem, px... I mean the best use case to use each one of them. Thanks
got you covered :D - ruclips.net/video/N5wpD9Ov_To/видео.html
@@KevinPowell Thanks a lot😃
Kevin, I'm really wanting to try this technique, but have no experience with editing photos. Can you provide a bit more information on creating the long png file (with multiple frames) or the masking process? Even providing a few relevant links would be very helpful.
Did you ever figure it out?
@dresan48 I figured out enough to satisfy my curiosity. Essentially, you can use an editing program to create a completely transparent background, then wherever you paint black over that background will become the mask that will allow your original image to change to the secondary image wherever you have painted black. I did a few streaks and saw that it worked, so I was satisfied. However, to do what Kevin does, you would need to use one of the photos as a point of reference when drawing the mask to ensure you are revealing the precise area you intend; this is the majority of the work he does in photoshop - I slowed down the video to .25 speed to get a better understanding. Hope you figured it out if you were also on the struggle bus too.
@@blakedavis229 thank you! this is very helpful. What tools did you use?
@@dresan48 I ended up using the free to download and use program "GIMP" which has similar features to Photoshop, helpful tutorials on their website to teach in-depth features, and a large enough user base that there are youtube "how to" videos. It's been so long since I fiddled with it, that I can't remember the exact process, but it wasn't too painful to figure out how to make it work. It worth mentioning that you should note the dimensions of the image you are wanting to mask if you want to do a stepped transition like Kevin shows in his video - if the original image is 100px wide and 50px in height, you can make a mask that is 300px wide and 50px in height and do a transition in 3 steps and scale upwards as desired. Tracking those dimensions will be critical if you want precision elements, like making a cactus appear as in the video. You can also look at the video info, as Kevin provides his files as a good point of reference, to use as proof of concept, and to play around with the mechanics without a huge time investment. I hope that gets you started in the correct direction. Good luck, you've got this!
OMG !!! I play the game and qlways wondered how they did it 😯😯😯
amazing
Hey Kevin! This is a great tutorial, super appealing to me as I have some video editing experience and did something similar to this with a video once! Thanks for the consistent great content, you are one of 4 or 5 channels I would definitely recommend someone check out. I have a question for you, I'm wondering where you stand on WordPress. I have avoided it until recently just because I keep seeing jobs available for it but I'm still... beyond skeptical however also desperate to get a job sooner than later( see bills and food, etc.) Would love some thoughts. Look forward to the next video!
-Strout
p.s.
I did use this to make a cool intro to a site
Is there a way to use a SVG mask instead of those transparent png frames?
you're cool man
I’m currently struggling with a reverse mask where I have a toggle and some images where the toggle moves back and forth to highlight the image that’s “checked. I want anything not within the toggles circle to be desaturated and only what’s enclosed in the toggle to be saturated, so it’s like a lens or a filter whet only what is underneath that circle has saturation. Used some filters and got close but not a clean curved cut. Hoping that I can use a mask and make an act with a cutout transparent circle and black box frame … tried a radial gradient that’s the same idea but I think how I’ve setup the html is wrong. Sigh. I’ll figure it out though!
Awesome video as always! Question: Can you please make videos of Sine Waves Shapes with code. As in, how to do a romboid, triangle, sphere, many many shapes. I'd really appreciate it so much!!!!
When math goes beyond the very basics, I tend to falter a little bit, so I'm not sure I'm the best one for that topic, lol.
I’d say look at clip-path property along with the polygon() function. You can just interpolate any function linearly, which means you can create basically any curve you want. Realistically you would want to use some CSS preprocessor though. I did this to draw squircicles (like an iOS icon).
Hello Kevin, can you also make those masks in figma? or do you know other apps besides photoshop that can make them?
Also thank you for your videos, i am pretty new in web design, i am currently doing a course and your videos helped me to build a passion for css.
I am wondering if you can mask in squares kind of "pixel" like for porfolio website
Hey kevin how did you make the mask in photoshop frame by frame?
CSS had evolved a LOT since I last played with it! Gamers, go check out Guild Wars 2, it's a thriving MMO and free to play!
Kevin, Thanks you so much for this video. I tried it and it works great. However, it didn't work in Edge browser. I added -webkit- in the mask property but still it didn't work in edge. Can you guide me how do I solve it? Thanks in advance!!
Could you not use a css filter layer that forces greyscale over it's areas then modify that via mask? This would remove the need for 2 images.
Superb! it is very nice effect. I couldn't find the link video of how to do the mask in photoshop. Would you mind to provide me a link? I would be greatly appreciated. ^ ^
Calling things *easy* does injustice to the work it took to think of the idea. This applies to anything.
Yep. This is a very, very creative use of relatively simple techniques. Much like a great artist can use a few brushes and paints to create a masterpiece. Kudos to whoever came up with the original idea.
Sponsored by Kevin Powell's knowledge, freely helping your front end career
if you explain your HTML, i never see an article element in use but instead sections. do you have a video about article semantic meaning? if not could you do a video about articles and usage?
Articles are for elements that can stand on their own in a different context. So, like, an actual article, but also a bit more than that. I don't think I have a video specifically on itnthough
Good stuff! But I am wondering how to achieve the scrolling effect of the ArenaNet website, anyone has any brief idea on that?
He adds a link at the end of the video that explains it.
With images containing some transparent parts, isn’t it better to use the .webp format?
Definitely would be smaller :)
I was the guy to ask that question!
Huh, Thank me later!
Wow
I think this is one of those: "Its hard to do, until you know how its done."
Is there a page or a way to find those mask already created? My skills with PS and that kind of stuff are = -5
Could you explain the mask image, I'm trying to figure it out. Are the dimensions of the mask the same as the image it is masking, your mask seems to go from top to bottom so I guess the height is some multiple of the image height. or am I thinking about this wrong?
I link to a video on the very basics of them in the description, but yes you want the same aspect ratio. Originally my mask had the same dimensions for each frame, but then I made it 1/10th the size so the file size for it wouldn't be incredibly big
lol, full screen 4k, on a decent PC, and this site is so sloooow, i would try with background movie maybe?
One thing: 13:01 - *Intersection* Observer, instead of _Observation_ Observer. 😉
Yeah... I always call it that for some reason, lol
@@KevinPowell I never thought it was already a habit, it seemed like a distraction at the moment. It sounds funny, like a job where you pretend to be doing something, _observing the observation_. 😆
Very observant of you.
@@metameme_yt Excellent one! 😆
Damn!
I just cant get the steps(24) part to work. When i add it to my code it does nothing everything stays the same. Any thoughts on why that might be? (I got it working to this part 10:08)
Okay i just figured it out. I used my own animation with 12 frames. But you need to put steps(11) not steps(12) because the first frame doesn't count. Maybe you explained it wrongly here (10:41) or i just didnt understand it right. Anyways great tutorial!
Sorry I should have been a little more clear on that part, I sort of brushed quickly over it when it's kind of important!
I'm really lost on your recommendation to watch a previous video about how make masks. You mention its the hardest part. I see other video's about css masking properties but none that I can find on how to make the long png you used for this video. Can you offer up a link? I've been searching for a while and I must not be using the right key words in my search
I believe he is referring to this video - ruclips.net/video/FCuNtCq3nRg/видео.html
Unfortunately it only really touches on the subject of applying masks and basic fundamentals. I does not teach us how to actually create masks, let alone a series of masking frames. There are several videos about masking images (for the purpose of touching up photography) but I can't find anything concrete about creating multiple frames or how to compile a masking animation. I would welcome any advice/help from the community.
What are the benefits of using this instead of a gif or web animation?
Isn't it using an image instead of a fixed width & height div bad because of layout shifts?
Because of the image loading in? You could give the image an actual width and height value to prevent that. Even if you resize the image with CSS after, it tells the browser the aspect-ratio, so it holds that space for it before the image loads in and no content shift :)
What's you thoughts on chat gpt
GW2
There are so many random ass website that look so cool yet are so random you wonder who they are even made for, or like how that company can even survive considering they are just one in a million
💝
😌✨🤯🤯
how can i make this png sequence inn photoshop?
How to create an image mask like this in Photoshop? if anyone knows please answer
Can anyone help me out on how to create the mask image?
At 1:36
kevin bro what is mask-animation class explain plz for my comments
hi, I download the code file to try it, but nothing happen, I have only the button " replay the animation "
with IE, chrome or firefox , it's the same, maybe someone know how to del with that ?
thx
some for me with Brave, it isn't working
hey guys, is there anyone who can suggest me any blog or video about how to create that mask that he created in this video in photoshop....
It's cool we can do this kind of stuff with CSS but it looks kinda janky. Its frustrating knowing this would perform better and be 100x easier to implement with a simple shader
Before watching - animated svg mask?
Why not using .webp instead of .png?
webp would've been better and I should have mentioned it during the video.