Maskering Gif med andra Gif-filer

0
7

Den andra dagen, Cassie Evans twittrade ett riktigt snyggt trick som jag aldrig sett förut: att använda SVG att maskera en GIF på toppen av en annan. Effekten är helt underbar, speciellt om du råkar ta en färgstark GIF och placera den på toppen av en monokrom en:

Se Pennan
Maskering gif med andra gif-filer… (svg maskering är cool) av Cassie Evans (@cassie-koder)
på CodePen.

Med tanke på att jag aldrig gjort något med SVG masker innan, jag trodde att jag kunde snabbt se över koden och analysera den för att se hur Cassie gjorde detta ganska härlig demo! Det intressanta med allt detta är dock snarare hur enkelt det är.

Att saker kick off, vi ta tag i det GIF som vi vill använda som vår SVG-mask. Vi kan hämta det från GIPHY:

via GIPHY

Nästa kan vi börja skriva våra SVG direkt i HTML-koden för sidan: vi börjar med att lägga en tag som kan användas för att lagra tillgångarna som vi kommer att hänvisa till i en annan del av samma SVG:

<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 300 300″>
<defs>
<mask id=”MASK” maskunits=”userSpaceOnUse”
maskcontentunits=”userSpaceOnUse”>
<bild
xlink:href=”https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif”
height=”100%”
width=”100%”/>
</mask>
</defs>
</svg>

Om du tar en närmare titt på det <mask> – elementet, kommer du att se att Cassie har lagt ett id=”MASK” och det är hur vi ska se till att masken senare i filen, genom att peka på denna id-attribut.

Nu kan vi gå vidare och hämta vår nästa animerad bild (men den här gången en cool GIF i yttre rymden):

Låt oss lägga till att GIF till <g> – elementet och applicera masken attribut för att det, som så:

<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 300 300″>
<defs>
<mask id=”MASK” maskunits=”userSpaceOnUse”
maskcontentunits=”userSpaceOnUse”>
<bild
xlink:href=”https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif”
height=”100%”
width=”100%”/>
</mask>
</defs>
<g mask=”url(#MASK)”>
<bild x=”0″ y=”0%” class=”space” href=”https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif”
height=”100%” width=”100%”/>
<g>
</svg>

SVG-kod kan se ganska skrämmande vid första anblicken, speciellt om du inte är bekant med det. Kan det vara bäst att bryta allt det här upp i två delar. För det första, att definiera mask…

<defs>
<mask id=”MASK” maskunits=”userSpaceOnUse”
maskcontentunits=”userSpaceOnUse”>
<bild
xlink:href=”https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif”
height=”100%”
width=”100%”/>
</mask>
</defs>

…och därefter använda denna mask…

<g mask=”url(#MASK)”>
<bild x=”0″ y=”0%” class=”space” href=”https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif”
height=”100%” width=”100%”/>
<g>

När vi bryter upp det så att det gör mycket mer logiskt, va? Och där har du det! Två animerade Gif-bilder som används som en SVG-mask. Det är en super fiffiga trick.

Cassie har gjort ett annat exempel, men denna gång en hoppande utrymme monster:

Se Pennan
Space monster (svg maskering är cool) av Cassie Evans (@cassie-koder)
på CodePen.