Animieren Sie einen Blob-Text mit SVG und Text-Clipping

0
28

Stieß ich auf diese nette kleine animation in ein designer-newsletter — leider habe ich den überblick verloren, die Quelle sind, also bitte geben Sie einen shout heraus, wenn Sie es erkennen! In ist es, einen block von text, der erscheint, um Bluten in den Blick, mit einem Wirbel von Farben, geht dann auf dem gleichen Weg kam es in. Es ist ein slick-Effekt, und ich wollte wieder code.

Der Ansatz, den ich nahm, war der Einsatz von SVG-text als clip-Pfad für ein SVG-hintergrund. Wir müssen mit SVG-text, weil CSS derzeit nur erlaubt uns zu animieren, den hintergrund mit text-clipping, wenn der hintergrund ist ein GIF, was wir nicht tun.

Unsere erste Aufgabe ist, erstellen Sie einen hintergrund von verschiedenen SVG-Formen. Oval-y-blobs funktionieren ziemlich gut. Die Sache, um sicherzustellen, wird entsprechend der Größe der Zeichenfläche/Leinwand in was auch immer-illustration-app, die Sie verwenden, um das gleiche Maß wie die viewBox, die Sie wollen das fertige Werk zu sein. (In Inkscape, ist diese option unter dem Abschnitt Skalieren der Dokument-Eigenschaften.)

Das Ziel ist, decken die meisten der Zeichenfläche mit einer Vielzahl von Formen. Ich habe festgestellt, dass es am besten aussieht, wenn einige der Formen, die sich überschneiden.

Als Nächstes erstellen wir einen text mit <clipPath>, gruppieren Sie die Objekte, aus denen der hintergrund in einem <g> – element und für ein CSS clip-path auf, die Gruppe. Insgesamt sieht es so etwas wie dieses:

<svg viewbox=”0 0 700 225″>

<clipPath id=”textClip” class=”gefüllt-heading”>
<text y=”70″>Wir sind</text>
<text y=”140″>Schöpfer</text>
<text y=”210″>+Innovatoren</text>
</clipPath>

<g id=”hintergrund” clip-path=”url(#textClip)”>
<path d=”m449.78…” />

</g>
</svg>

An dieser Stelle, was wir bekommen, ist, einige einfachen text, da haben wir nicht bekommen, um an die hintergrund-animation ganz.

So was ist animation? Wir verwenden eine relativ einfache-CSS-Animationen wie diese:

/* Animieren Sie die hintergrund-shapes */
#hintergrund-Pfad {
animation: Puls 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) unendlich;

/* Notwendig, um die SVG-Objekte an Ort und Stelle und skalieren */
transform-origin: 50% 50%;
transformieren-box: fill-box;
}

@keyframes Puls {
/* Drehen Sie es zusammen mit der Skala macht es ein bisschen mehr Phantasie */
0%, 100% { transform: scale(0) drehen(33deg); }
35%, 65% { transform: Skala(1) rotate(0deg); }
}

So weit, So gut.

transformieren-box: fill-box; wird nicht unterstützt, Internet Explorer oder Edge an dieser Stelle, also, wenn Sie brauchen die Unterstützung der Browser, benötigen Sie einen JavaScript-workaround, wie dieser.

Siehe Stift
Animierte blob SVG-text-clipping-Effekt – Pt. 1 durch Zach Saucier (@Zeaklous)
auf CodePen.

Wir könnten anfangen zu malen, die Dinge durch die Feste Codierung der Farbwerte mithilfe eines text-oder Vektor-editor, aber es macht mehr Spaß, der Farbe, der Formen dynamisch. So etwas wie dieses:

// Definiere ein array von Farben
const Farben = [‘#f5a147′,’#51cad8′,’#112b39’];
// Wählen Sie die SVG-Pfade
var blobs = document.querySelectorAll(“Pfad”);

// Zufällig Farben anwenden, um die SVG-fill-Eigenschaft
blobs.forEach(blob => {
blob.Stil.füllen = Farben[Math.floor(Math.random() * Farben.length)];
});

Damit ändern Sie die text-Werte für jede iteration, müssen wir zuerst fügen Sie Sie der SVG-clip-Pfad.

<clipPath id=”text” class=”gefüllt-heading”>
<text y=”70″>Wir sind</text>
<text y=”140″>Schöpfer</text>
<text y=”210″>+Innovatoren</text>

<text y=”70″>Wir sind</text>
<text y=”140″>Mover</text>
<text y=”210″>+Shaker</text>

<text y=”70″>Wir sind</text>
<text y=”140″>Stylische</text>
<text y=”210″>+Techy</text>
</clipPath>

Dann können wir entweder den Einsatz von CSS oder JavaScript zu offenbaren die Zeilen von text in unserer bevorzugten Reihenfolge. Leider können wir nicht umgeben Sie jeden Abschnitt des <text> mit einem <g> – element, da <g> – Elemente nicht innerhalb von clipPath ein. Für diesen Beitrag, wir werden aufteilen, Dinge in drei CSS-Animationen, eine für jede Gruppe der drei Wege:

/* Auswahl der Pfade 1-3 */
#textClip text:nth-of-type(n + 1):nth-of-type (n + 3) {
animation: showFirst 12s unendlich;
}

/* Auswahl der Pfade 4-6 */
#textClip text:nth-of-type(n + 4):nth-of-type(-n + 6) {
animation: showSecond 12s unendlich;
}

/* Auswahl der Pfade 7-9 */
#textClip text:nth-of-type(n + 7):nth-of-type (n + 9) {
animation: showThird 12s unendlich;
}

@keyframes showFirst {
0%, 33% {
opacity: 1;
}
33.0001%, 100% { opacity: 0; }
}

@keyframes showSecond {
33.0001%, 66% {
opacity: 1;
}
0%, 33%, 66.0001%, 100% { Deckkraft: 0; }
}

@keyframes showThird {
66.0001%, 99.999% {
opacity: 1;
}
0%, 66%, 100% { opacity: 0; }
}

Dass der trick funktioniert!

Siehe Stift
Animierte blob SVG-text-clipping-Effekt – Pt. 2 von Zach Saucier (@Zeaklous)
auf CodePen.

An dieser Stelle können wir ein wenig Spaß haben. Wir können zum Beispiel swap-Hintergründe für eine unterschiedliche Wirkung. Ich habe Inkscape – Sterne-Werkzeug mit drei bis vier Punkte zu erzeugen einige zufällige Formen (über die Inkscape-random parameter) und dann färbte Sie mit einer palette aus einem der vielen Farbschema-Generatoren (ich habe Palx) zu produzieren, um diese version:

Siehe Stift
Animierte blob SVG-text-clipping-Effekt – Pt. 3 durch Zach Saucier (@Zeaklous)
auf CodePen.

Die Hintergründe gar nicht brauchen, zu füllen, bis der gesamte hintergrund, je nach der Wirkung, die wir schaffen wollen. Zum Beispiel könnten wir duplizieren Sie den text mit einem element, und füllen Sie den text mit, dass, wie gesehen, in dieser demo.

Oder wir mischen Sie es durch drehen der hintergrund-blobs wie diese:

Siehe Stift
Animierte blob SVG-text-clipping-Effekt – Pt. 5 von Zach Saucier (@Zeaklous)
auf CodePen.

Um die Farben ändern sich für jede neue Gruppe von Wörtern, die wir verwenden könnten entweder in einer CSS-oder JavaScript für die animation. Ich verwendet JavaScript (und zog die CSS-animation, die versteckt wurde, die Zeilen der JavaScript):

Siehe Stift
Animierte blob SVG-text-clipping-Effekt – Pt. 6 von Zach Saucier (@Zeaklous)
auf CodePen.

Zum Zentrum der text horizontal fügen Sie x=”50%” text-anchor=”middle” jedem das <text> – Elements (Demo). Zentrierung vertikal wären mehr manuelle Berechnung, da arbeiten wir mit einer multi-line-format.

Eines der schönen Dinge an diesem Ansatz ist, dass, da es verwendet SVG, es ist reaktionsschnell Weg vom Standard!

P. S. Nachdem ich diesen Ansatz und war auf der Suche für die original GIF-Autor, stieß ich auf eine weitere Erholung von Martí Fenosa tun, den gleichen Effekt mit einem anderen Ansatz. Prüfen Sie seine demo so gut, weil es ist clever!