Maskering Gif-filer med andre Gif-filer

0
8

Den andre dagen, Cassie Evans twitret en veldig ryddig triks som jeg aldri har sett før: bruk av SVG til å maskere en GIF-på toppen av en annen. Effekten er ganske herlig, spesielt hvis du skje til å ta en fargerik GIF og plasser den på toppen av en sort / hvitt-ett:

Se Penn
Maskering gif-filer med andre gif-filer… (svg-maskering er kult) ved Cassie Evans (@cassie-koder)
på CodePen.

Tatt i betraktning at jeg aldri har gjort noe med SVG masker før, tenkte jeg at jeg kunne raskt se gjennom koden og dissekere den for å se hvordan Cassie gjort dette ganske fin demo! Det interessante ting om alt dette selv, er hvordan man ganske enkelt det er.

Å sparke ting av, kan vi ta det GIF som vi ønsker å bruke vårt SVG-maske. Vi kan hente det fra GIPHY:

via GIPHY

Neste vi kan begynne å skrive vår SVG direkte i HTML-koden på siden: vi begynner med å legge til en kode som kan brukes til å lagre eiendeler som vi vil se i en annen del av samme SVG:

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

Hvis du ta en nærmere titt på det <maske> – element, vil du se at Cassie har lagt til et id=”MASKE” og dette er hvor vi vil se maske senere i filen, ved å peke på denne id-attributt.

Nå kan vi gå videre og hente vår neste animerte bildet (men denne gangen en kul GIF av verdensrommet):

La oss legge til at GIF inn i en <g> – element og bruke maske-attributtet til den, som så:

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

SVG-kode kan se ganske skremmende ved første øyekast, spesielt hvis du ikke er kjent med det. Kan det være best å bryte alt dette ting opp i to deler. Først definere maske…

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

…og deretter bruke den masken…

<g maske=”url(#MASKE)”>
<bilde x=”0″ y=”0%” class=”plass” href=”https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif”
height=”100%” width=”100%”/>
</g>

Når vi bryter det opp sånn, det er en mye mer fornuftig, ikke sant? Og der har du det! To animerte Gif-filer brukes som en SVG-maske. Det er en super smarte triks.

Cassie laget et annet eksempel, men denne gangen på en hoppende plass monster:

Se Penn
Plass monster (svg-maskering er kult) ved Cassie Evans (@cassie-koder)
på CodePen.