馃攳
Create a cool color-fill animation with CSS - YouTube
Channel: Kevin Powell
[0]
recently someone asked me how the
[1]
animations were done over at arena.net
[4]
so I went to take a look and after
[5]
seeing them I wondered the exact same
[7]
thing so I dove into the code to take a
[9]
look at what was going on and it turns
[12]
out that they were using mask image and
[14]
that was a bit of a coincidence because
[15]
I've just recently put out two videos on
[17]
mask image but they're nothing like this
[19]
and I never would have thought of using
[21]
mask image in that way but it turns out
[24]
it's actually kind of easy to do with it
[26]
so let's take a look at how we can use
[27]
it to do this type of cool effect
[30]
[Music]
[32]
hello my front end friends thank you so
[33]
much for coming to join me once again
[35]
and if you're new here my name is Kevin
[37]
and here at my channel I help you fall
[38]
madly deeply in love with CSS and today
[40]
we're going to be doing that by taking a
[41]
look at another awesome use case for
[44]
mask image so jumping over to their site
[46]
there was one problem that definitely
[47]
did come up that I had to figure out a
[49]
way to do but to show you I just poked
[51]
around in their Dev tools and I found
[52]
they had these two images that were
[53]
overlaying each other using position
[55]
absolute so that makes a lot of sense to
[57]
be able to do that type of thing where
[59]
you use their mask to hide one of them
[61]
and then show it to make it look like
[62]
the colors are splashing out but then I
[65]
was like well how did they do that and
[66]
eventually I found this mask and let's
[68]
open that one and this is the mask they
[70]
had and I went oh so we basically this
[73]
is the hard part was making all the
[75]
frames that you want to be able to do it
[76]
and basically each one of these things
[78]
along the way that we see on the screen
[80]
now if we zoom in like each one of those
[81]
is another frame along the way and so I
[84]
went to photoshop and I started making
[86]
it now you don't need to use Photoshop
[88]
there's other tools that we could use
[89]
for the same type of thing just know
[91]
that these white areas are are actually
[92]
transparent on here if you want to know
[94]
more about making image masks you can
[96]
check out my previous video where I
[97]
looked at sort of the basics of how they
[99]
work
[100]
but you need to go frame by frame to do
[102]
this and after a few failed attempts the
[104]
other thing I realized that they did
[106]
that makes this look really good is sort
[108]
of keeping some areas not painted I
[110]
think is really nice but I really like
[112]
this bird here as well where the bird
[115]
wasn't there and then it comes in after
[117]
so I definitely wanted to do something
[119]
like that I think it adds a nice little
[120]
bit of interest and I think it also
[122]
helps having the white background that
[123]
you sort of go into
[125]
after having done three of these the
[128]
last one I did sort of get a little bit
[130]
quick with with certain parts of it but
[131]
I think it definitely turned out the
[132]
best and so it's that third one that
[134]
we're gonna be looking at the hard work
[135]
is definitely creating all the frames
[137]
for your mask the easy part is actually
[139]
getting it to work which we're going to
[141]
be focusing on right now so moving that
[143]
off to the side and let's go over to my
[144]
own where we're starting with nothing I
[146]
just have this mask container that we're
[148]
going to need just because we need some
[149]
position absolute things so it makes
[150]
life a little bit easier to do it this
[153]
way now in here we need to have the two
[155]
images and they actually did it both
[156]
with background images there's no reason
[159]
that they can't just be images of the
[160]
themselves or one div that's an image
[162]
and one div that is with a background
[165]
image but I actually found it easier to
[167]
have the one of them is an actual image
[170]
because then it sets the size for what
[172]
you want instead of having to use any
[174]
sort of weird sizing stuff we throw our
[175]
image in here and for me I'm going to do
[177]
this as my black and white image because
[178]
I want to start with my black and white
[181]
image we're going to show the other one
[182]
which is going to be overlaid on top but
[184]
completely Hidden Away by our mask and
[186]
when the animation runs it will load it
[187]
in so it might even be easier to do this
[190]
with an actual like two images one for
[192]
each of them but in this case I'm
[194]
actually going to do this one here with
[196]
a div instead of an image just to show
[198]
you that if you are doing that how the
[200]
positioning of it would work to get it
[201]
to function properly because you might
[203]
need things set as background images if
[204]
you need text or something on top of
[206]
them as well though with the absolute
[207]
positioning anyway we'll do it with the
[209]
div just to sort of make it a little bit
[211]
more complex but just to show you that
[213]
it's pretty easy to do anyway but you
[215]
need these two images and then you need
[217]
to have the mask that's going to
[218]
transition between the two of them
[220]
that's sort of the the things that we
[222]
need to have before you can actually get
[223]
this to work so yeah we're going to
[224]
switch that image out for a div like
[227]
this we'll hit save and we just have our
[228]
black and white image to start with and
[230]
we can get started on this and jump into
[232]
the CSS because as far as this goes
[234]
that's all we need you can see I did put
[235]
a replay animation here which we're
[237]
going to use afterward just to make like
[239]
easier to replay the animation to make
[241]
sure things are working and so let's
[242]
jump on over to my CSS where there's
[244]
nothing related to my mask in here yet I
[246]
just have my button styled and some
[249]
little things actually the image Max
[251]
with 100 here because I'm using an
[253]
actual image would be important but I'm
[255]
assuming you're already doing that
[256]
anyway and then we can come in here and
[258]
we're going to do my mask container and
[260]
on that we need a position of relative
[263]
because we will be doing absolute
[265]
positioning on the pieces that are
[267]
inside of it uh then we're going to come
[269]
in let's come in first with my color
[271]
image we called it I think
[274]
we did call it that perfect so my color
[275]
image let's start by coming in with this
[278]
and making sure we can get it lined up
[279]
properly so my color image is going to
[281]
be a position of absolute and let me add
[284]
my background on here so background
[286]
image and as we saw we already have one
[289]
ready so we'll put that on really fast
[290]
so with my image being there we don't
[293]
actually see it yet because this div it
[295]
has nothing inside of it we just have a
[297]
blank div right there and because it's a
[299]
blank div it has no height or width but
[301]
we are using position absolute so we can
[303]
use an inset of zero on that to have it
[306]
fill up the entire space the problem is
[308]
my image is really big I probably could
[310]
have optimized my images here a little
[312]
bit we're just going to set a background
[313]
size of cover on there though to
[316]
actually have it be the right size and
[318]
now because this div the mass container
[322]
its size is being set by this image in
[325]
here so the image here is defining the
[327]
height of this div which means that this
[330]
is sort of defining the total size we
[332]
have this filling up the entire thing
[334]
because of our inset zero and again
[336]
that's top bottom left and right zero so
[338]
this color image is taking up the entire
[340]
space and it's the same dimensions or
[342]
the same aspect ratio anyway of the
[344]
original so they're just perfectly
[346]
overlaying on top of each other so if I
[349]
were to drop the opacity on this and I
[351]
hit save you can see that the two of
[352]
them are coming through we can even drop
[354]
that a little bit lower so you can see
[356]
the cactus is sort of fading away as we
[358]
go into this other the other image
[359]
that's there so they're perfectly
[360]
overlaid on top of each other and that's
[363]
what we really need to get started with
[364]
this so the next thing we're going to do
[366]
is come in here with our mask now I'm
[368]
going to use the prefixed versions for
[370]
now because I'm using Chrome which needs
[372]
the prefix so I'm saying that and I'm
[374]
not putting the prefix webkit mask image
[376]
and actually I think the mask image you
[378]
don't actually need the prefix for it's
[380]
all the other ones but we're just going
[381]
to prefix everything I'll add in the
[383]
non-creased fixed versions after which
[385]
work in non-chromion browsers so for
[387]
this we need our URL which in this case
[389]
is
[392]
imagemask.png and I used a PNG instead
[395]
of SVG like I recommended in the
[397]
original video where I explained things
[398]
because I have some transparency that's
[400]
happening if you weren't having any
[402]
transparency then that would be you
[404]
could just go with an SVG be much
[405]
lighter weight probably the better way
[407]
to go but I was playing around with some
[408]
different effects you can see like these
[410]
low opacity areas here I sort of tried
[412]
to bring that same idea into my mask
[413]
when I was using that and you can also
[415]
see here this is yelling at me in vs
[417]
code because this is non-standard that
[419]
you can see there that's just because
[420]
it's prefixed and they're just be
[423]
careful this isn't going to work
[424]
everywhere but don't worry we'll fix
[425]
that after
[426]
uh and right away you can see
[428]
Something's Happened which is good it's
[430]
it's masking away my uh what we had now
[433]
the problem is because the PNG is this
[436]
like gigantic file that goes on and on
[438]
and on if we go and take a look at my
[440]
finished version of it you can see how
[441]
he's doing a lot of uh playing around
[443]
here uh it was mask image with my
[446]
finished one image mask
[450]
um so I mean it's hard to see if we zoom
[451]
in a little bit you can see all the
[453]
different pieces of it but it's this
[454]
gigantic image but to actually get that
[456]
to fit I had to change the height of it
[458]
so it's actually a lot smaller than the
[460]
finished one
[462]
um just because if not the file side
[463]
it's already 300 KB um so we could
[465]
probably optimize that I didn't do any
[466]
image optimization we could even run
[468]
that through and probably make it a webp
[470]
and make it even smaller and it would be
[472]
fine
[473]
um because even if it does lose quality
[475]
it's moving so quickly it doesn't really
[477]
matter uh if there's a little bit of
[479]
blurriness or anything going on with it
[480]
and because my image is so much smaller
[483]
the first thing we're going to do is
[485]
we're going to do a web kit uh mask size
[488]
and we use cover on here as well and
[491]
that might change anything it's not
[492]
change anything that's good and then
[494]
we're going to come in with a webkit
[495]
mask position
[497]
and the mass position we're going to
[498]
start at zero percent zero percent and
[500]
it should stay gray but if I change this
[503]
position to like a 50 whatever it
[505]
doesn't matter we can see that it's
[506]
coming in and I'm actually going to
[508]
change this to a pixel value now to
[510]
explain a little bit more what's
[511]
happening because it makes it easier in
[512]
the dev tools so if we open up our Dev
[514]
tools and we find that and you find your
[517]
mask position and here if it's in
[520]
percentage you can't drag but if it's in
[522]
pixels you can actually drag things
[523]
around and move your mask
[525]
and there is my mask and you can see
[528]
it's if I keep dragging it's sort of
[530]
like there's one frame and there's the
[532]
next frame and another frame and anyway
[534]
you get the idea there's these different
[536]
frames I don't know where that that's
[537]
probably supposed to be lined up
[538]
somewhere over here I guess I don't know
[542]
um but we'll see how it works later but
[544]
you can see all these different frames
[545]
are on there and basically we want these
[547]
frames to slide across and there's a
[549]
trick to all of this and getting that to
[551]
work
[552]
um but we want to start it at zero zero
[555]
for now we'll do it as a hover and then
[557]
we'll actually create an animation but
[558]
let's just see if we can get this to
[559]
work
[560]
um so we'll say color image hover and
[563]
then we're going to do the mask position
[565]
here
[566]
and let's delete that and delete that
[569]
and we want it to go to 100 and so this
[572]
is always like its own percentage so
[574]
we're going with the mask should start
[575]
here and then move all the way across
[577]
the other way if ever you try this and
[579]
it's not working for some reason you
[581]
might need to actually make that a
[582]
negative to have it slide the other way
[584]
so if you're following along with your
[585]
own that you've created and it's not
[587]
working right just try a negative number
[589]
or go in the dev tools with pixels so
[590]
you can drag it around and see what's
[591]
happening and we can see that's working
[594]
so let's do a transition on that so
[596]
quickly adding the transition here of my
[598]
mass position over 500 milliseconds
[599]
let's say see how the whole thing let's
[601]
slow that down let's make it like five
[602]
thousand milliseconds and you can see
[604]
those all the frames are sliding by
[606]
shooting one after the other after the
[608]
other and then it slowly gets into place
[610]
and then if I go the other way it slowly
[611]
goes the other way which isn't quite
[612]
what we want it's an interesting effect
[614]
maybe there's some stuff you could do
[615]
with that but instead of that what we
[618]
actually want to do is we want to do
[620]
this in steps instead of having it slide
[623]
and I know we can do this as animations
[625]
I've never tried to doing this let's try
[628]
24 and hit save
[631]
ah it does work look at that so we can
[633]
do instead of it sliding across it's
[636]
saying that I want to take that entire
[637]
animation and basically turn it into 24
[640]
distinct steps and the reason I'm
[642]
choosing 24 is because I made 24 frames
[645]
in my animation when I created it so
[647]
that's an important thing there but you
[649]
can see it's going really slowly and
[651]
it's not too fantastic but let's close
[652]
our Dev tools because we don't need that
[654]
anymore and let's maybe make this uh I
[656]
don't know a thousand milliseconds or
[658]
one second and sort of get that thing
[660]
where it comes in really not as well
[662]
done as theirs was they did a much nicer
[665]
job than I have but I still think it's
[667]
kind of cool and it looks pretty good
[669]
and so there we have it working with
[671]
hover now personally I wouldn't want to
[673]
keep it with a hover effect it's kind of
[674]
weird to do that so ideally we have an
[677]
animation set up for it
[679]
so to do that we can set up some
[680]
keyframes we'll call it add color uh for
[684]
our animation name there and then
[686]
basically we just want to say that it's
[688]
going to start at a you know the zero
[690]
percent of our animation uh is going to
[693]
be this and we'll duplicate that and say
[695]
that we'll take off the prefix version
[697]
there we can duplicate this
[699]
put this at 100 and then change this one
[702]
and change that one to 100 so now we can
[706]
add the animation in there I've already
[708]
done this and so then we have that now
[710]
we just need to be able to add that
[712]
animation in so we're going to do a mask
[713]
animation class and it will be an
[716]
animation and on here we want to put in
[718]
an animation we need the name of our
[721]
animation so that was my add color
[723]
how long it's going to take we want the
[725]
700 milliseconds and we want it to go to
[728]
there and we're going to put forwards at
[730]
the end forwards just so when the
[732]
animation is finished it actually stays
[734]
and it's all done let's just we can put
[736]
these on put that on a different line
[738]
just so you can see everything at once
[740]
I've already set up my button to be able
[742]
to add the class and and run the
[743]
animation and reset it so we can see it
[746]
goes there I'll share all this code and
[747]
stuff in a code pen or something so if
[749]
you want to see what the JS was it was
[751]
very rudimentary it's not really what we
[753]
want we can see every time we do that it
[755]
works perfect and my animation runs so
[758]
the only other real consideration that
[760]
you'd want to take with this is again
[762]
make sure that you have webkit and
[764]
non-webkit versions so it works in
[766]
chromium and non-non chromium browsers
[769]
and of course you'd probably want it to
[771]
actually happen when you scroll in
[773]
similar to how it actually happens on
[775]
their website here right
[776]
when we're on the arena.net it's when
[778]
you scroll into view to do something
[780]
like that I think an observation
[782]
Observer would be perfect and I just
[784]
happen to have covered that in a
[785]
previous video that you can watch right
[787]
here and with that I would like to thank
[789]
my enablers of awesome Jan Johnny
[790]
Michael Mr Dave Patrick Simon and Tim as
[793]
well as all my other patrons for their
[794]
monthly support and of course until next
[796]
time don't forget to make your record on
[797]
the internet just a little bit more
[798]
awesome
Most Recent Videos:
You can go back to the homepage right here: Homepage