Erstellen Sie mit JavaScript einen wackeligen Texteffekt

Ein Screenshot von Patrick Heng

Das Einführen von Effekten in Text und Typografie kann dem eine ganz neue Perspektive hinzufügen Benutzererfahrung auf einer Website. Aber Text ist zu lesen, und zu klug oder klug mit einem Effekt zu werden, kann den Zweck des Textes zunichte machen.

Also sei schlau, sei schlau, aber stelle sicher, dass dein kinetische Typografie Effekt funktioniert tatsächlich, genau wie es auf Patrick Hengs Website - im Bild oben dargestellt. Lesen Sie weiter, um herauszufinden, wie ...

1. Erstellen Sie den Intro-Text

Öffne das Projektdateien und Sie werden sehen, dass es die Bibliothek Velocity.js und Blast.js gibt. Blast teilt den Text auf, während die Geschwindigkeit eine Tween-Engine ist. Es gibt drei Versatzvariablen, mit denen sich jedes Textstück in unterschiedlichen Intervallen bewegen lässt.



var offset1 = 0; var offset2 = 0; var offset3 = 0;

2. Teilen Sie den Text

Mit Blast wird jedes der Textzeichen in ein eigenes Span-Element aufgeteilt. Dann wird die oberste Textebene durchlaufen und der Versatz für jeden Buchstaben erhöht, damit sie unabhängig voneinander animiert werden.

$(“h1”).blast({ delimiter: “character” }); function anim() { var $spans = $(“#top”).find(‘span’); $spans.each(function() { offset1 += 40;

3. Geschwindigkeit hinzufügen

Jetzt fügt die Geschwindigkeitsbibliothek die Bewegung und Deckkraft hinzu, sodass sich die Buchstaben nach oben bewegen und einblenden. Jeder Buchstabe wird versetzt, und die Dauer und die Beschleunigung werden für jeden der Buchstaben festgelegt.

$(this).velocity({ translateY: -100, opacity: 1 }, { delay: offset1, duration: 800, easing: “easeOutBack” }); }); }

4. Rufen Sie die Aktion auf

Jetzt wird die Funktion 'Animation' aufgerufen, wodurch die Animation gestartet wird. Eine 'setTimeout' -Funktion versetzt jetzt den zweiten Textblock, der gelb ist. Wieder wird es mit Geschwindigkeit wie im ersten Beispiel ausgelöst.

anim(); setTimeout(function() { var $spans = $(“#middle”).find(‘span’); $spans.each(function() { offset2 += 40; $(this).velocity({ translateY: -100, opacity: 0.8 }, {

5. Fahren Sie fort

Die Verzögerung, Dauer und Beschleunigung werden so eingestellt, dass der zweite gelbe Text korrekt verschoben wird. Dann wird der letzte orangefarbene Text in der nächsten Funktion 'setTimeout' gesteuert, um diese Bewegung vor dem Start etwas länger zu verzögern.

delay: offset2, duration: 800, easing: “easeOutBack” }); }); }, 100); setTimeout(function() { var $spans = $(“#bottom”).find(‘span’);

6. Fügen Sie die letzten Buchstaben hinzu

Jetzt werden die letzten Buchstaben an ihren Platz verschoben. Dies ergibt den gleichen Effekt wie Patrick Hengs Website , bei dem sich Textebenen bewegen. Patrick verwendet WebGL tatsächlich, um den Text zu verschieben, aber dies ist mit DOM-Elementen einfacher.

$spans.each(function() { offset3 += 40; $(this).velocity({ translateY: -100, opacity: 0.8 }, { delay: offset3, duration: 800, easing: “easeOutBack” }); }); }, 150);

Erfahren Sie mehr unter Generate London

Grafik generieren

Siehe Richard Rutter, Sarah Parmenter und Bruce Lawson und weitere Vorträge auf der Generate London 2018

Richard Rutter hat eine Liebe und Faszination für Typografie und ist Mitbegründer Fontdeck , ein wegweisender Web-Font-Service. Als selbsternannter Evangelist für Webtypografie ist Richard Hauptorganisator von Clearlefts Et-Zeichen Web-Typografie-Konferenzen.

Auf der Generate London 2018 hilft Ihnen sein Workshop dabei, Websites mit ansprechender, angemessener, unverwechselbarer, ausdrucksstarker und lesbarer Web-Typografie zu erstellen, die sich für Bildschirme aller Formen und Größen eignet. Sie lernen, wie Sie jahrhundertealtes Handwerk mit modernster Technologie - einschließlich variabler Schriftarten - kombinieren können, um die besten Erfahrungen für Ihre Leser zu entwerfen und zu entwickeln.

Im Laufe eines Tages nehmen Sie an praktischen Aktivitäten teil und wenden jede neue Technik auf eine detaillierte Beispielseite an, die Sie mitnehmen können. Dies ist die perfekte Ressource, auf die Sie sich in Zukunft beziehen können. Und wenn das nicht genug ist, wird jeder Teilnehmer eine kostenlose elektronische Kopie von Richards gefeiertem erhalten Web Typografie Buch .

Verpassen Sie nicht, holen Sie sich jetzt Ihr Ticket

Zum Thema passende Artikel: