Maskierung GIFs mit anderen GIFs

0
8

Der andere Tag, Cassie Evans twitterte ein wirklich netter trick, den ich noch nie zuvor gesehen haben: mit SVG-Maske ein GIF auf ein anderes. Der Effekt ist Recht nett, vor allem, wenn Sie geschehen, schnappen Sie sich einen bunten GIF und legen Sie es auf einer monochromen eins:

Siehe Stift
Maskierung gifs mit anderen gifs… (svg-Maskierung ist cool) von Cassie Evans (@cassie-codes)
auf CodePen.

Bedenkt, ich habe nie etwas gemacht, das mit SVG-Masken vor, ich dachte, ich könnte schnell einen Blick über den code und sezieren, um zu sehen, wie Cassie machte diese ziemlich schöne demo! Die interessante Sache über all dies ist aber eher wie einfach es ist.

Um Dinge kick-off, wir nehmen das GIF, das wir verwenden wollen, als unsere SVG-Maske. Wir können zu Holen, die von GIPHY:

via GIPHY

Als Nächstes können wir beginnen, schriftlich unsere SVG direkt in die HTML der Seite: wir beginnen mit dem hinzufügen eines Tags die verwendet werden können, zu speichern Vermögen, dass wir finden Sie in einem anderen Teil der gleichen 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>

Wenn Sie einen genaueren Blick auf, die <mask> element, Sie werden sehen, dass Cassie ein id=”MASKE” und das ist, wie beziehen wir uns auf die Maske später in die Datei, indem Sie auf das id-Attribut.

Wir können jetzt gehen Sie vor und Holen unsere nächste animierte Bild (aber diesmal ein cooles GIF von Weltraum):

Lassen Sie uns hinzufügen, dass GIF in ein <g> – element und wenden Sie die Maske Attribut, wie z.B. so:

<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(#MASKE)”>
<Bild x=”0″ y=”0%” class=”space” href=”https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif”
height=”100%” width=”100%”/>
</g>
</svg>

SVG-code kann Aussehen ziemlich beängstigend, auf den ersten Blick, vor allem wenn Sie nicht vertraut mit es. Es könnte am besten sein, brechen all diese Dinge bis in zwei Teile. Erstens, die Definition der Maske…

<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>

…und anschließend unter Verwendung dieser Maske…

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

Einmal brechen wir es so, es macht viel mehr Sinn, nicht wahr? Und dort haben Sie es! Zwei animierte GIF-Dateien als SVG-Maske. Es ist ein super netter trick.

Cassie machte ein weiteres Beispiel, dieses mal aber einen springenden Raum monster:

Siehe Stift
Space monster (svg-Maskierung ist cool) von Cassie Evans (@cassie-codes)
auf CodePen.

SHARE
Previous articleMasking Gif ‘ s met andere GIFs