GIFs mit anderen GIFs maskieren

Neulich hat Cassie Evans einen wirklich tollen Trick getwittert, den ich noch nie zuvor gesehen hatte: SVG verwenden, um ein GIF über ein anderes zu maskieren. Der Effekt ist ziemlich schön, besonders wenn man ein farbenfrohes GIF wählt und es über ein monochromes legt.



Siehe den Pen
Maskieren von GIFs mit anderen GIFs… (SVG-Maskierung ist cool) von Cassie Evans (@cassie-codes)
auf CodePen.

Da ich noch nie etwas mit SVG-Masken gemacht hatte, dachte ich, ich schaue mir den Code schnell an und zerlege ihn, um zu sehen, wie Cassie diese recht schöne Demo erstellt hat! Das Interessante daran ist jedoch, wie einfach das Ganze ist.

Zuerst greifen wir uns das GIF, das wir als SVG-Maske verwenden möchten. Wir können es von GIPHY abrufen.

Als Nächstes können wir unser SVG direkt in den HTML-Code der Seite schreiben: Wir beginnen mit dem Hinzufügen eines -Tags, das zum Speichern von Assets verwendet werden kann, auf die wir an anderer Stelle in derselben SVG verweisen werden.

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

Wenn Sie sich das <mask>-Element genauer ansehen, werden Sie feststellen, dass Cassie eine id="MASK" hinzugefügt hat, und so werden wir die Maske später in der Datei referenzieren, indem wir auf dieses id-Attribut verweisen.

Jetzt können wir unser nächstes animiertes Bild abrufen (diesmal ein cooles GIF vom Weltraum)

Fügen wir dieses GIF in ein <g>-Element ein und wenden das mask-Attribut darauf an, wie folgt:

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

SVG-Code kann auf den ersten Blick ziemlich einschüchternd aussehen, besonders wenn man nicht damit vertraut ist. Es ist am besten, all dies in zwei Teile aufzuteilen. Erstens, die Maske definieren…

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

…und zweitens, diese Maske verwenden…

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

Wenn wir es so aufteilen, macht es viel mehr Sinn, oder? Und da haben Sie es! Zwei animierte GIFs, die als SVG-Maske verwendet werden. Ein super raffinierter Trick.

Cassie hat ein weiteres Beispiel erstellt, diesmal einen springenden Weltraummonster

Siehe den Pen
Weltraummonster (SVG-Maskierung ist cool) von Cassie Evans (@cassie-codes)
auf CodePen.