Utwórz efekt tekstu chwiejnego za pomocą JavaScript

Sep 13, 2025

Jak

A screenshot from Patrick Heng's website including moving typography

Wprowadzenie efektów do tekstu i typografii może dodać całą nową perspektywę do doświadczenie użytkownika na stronie internetowej. Ale tekst ma być czytany i staje się zbyt mądry lub mądry z efektem może pokonać cel.

Więc bądź mądry, bądź mądry, ale upewnij się, że twoje Typografia kinetyczna efekt faktycznie działa, tak jak to robi Strona internetowa Patrick Heng - Polecane na obrazku powyżej. Czytaj dalej, aby dowiedzieć się, jak ...

1. Utwórz tekst intro

Otworzyć Pliki projektu I zobaczysz, że jest biblioteka Velocity.js i Blast.js. Blast dzieli tekst, podczas gdy prędkość jest miseenem. Istnieją trzy zmienne offsetowe, aby każdy element tekstowy poruszy się w różnych odstępach czasu.

 ° C Script & GT;
var offset1 = 0;
var offset2 = 0;
var offset3 = 0;
& LT; / Script & GT;

2. Podziel tekst

Używanie wybuchu każdy z znaków tekstowych jest podzielony na swój element spanowania. Następnie górna warstwa tekstu jest zapętlona przez i przesunięcie jest zwiększone dla każdej litery, aby animować niezależnie.

 $ ("H1"). Blast ({
  SELIMITER: "Charakter"
});
funkcja anim () {
  var $ spanie = $ ("# top"). Znajdź ("Span");
  $ spani.each (funkcja () {
  offset1 + = 40;

3. Dodaj prędkość

Teraz biblioteka prędkości dodaje ruch i krycie, aby litery poruszają się w górę i zniknąć. Każda litera jest przesunięta, a czas trwania i łagodzenia są ustawione dla każdego z liter.

 $ (to) .velocity ({
  Translatey: -100,
  Krycie: 1.
  }, {
  Opóźnienie: Offset1,
  Czas trwania: 800,
  Łatwienia: "Uspokój się"
  });
  });
}

4. Zadzwoń do akcji

Teraz wywoływana jest funkcja "anim", a to wyzwala animację do rozpoczęcia. Funkcja "Settimeout" stagguje drugi blok tekstu, który będzie żółty. Ponownie wywołuje się przy użyciu prędkości, jak w pierwszym przykładzie.

 ANIM ();
Settimeout (funkcja () {
  var $ spanie = $ ("# środkowy"). Znajdź ("Span");
  $ spani.each (funkcja () {
  offset2 + = 40;
  $ (to) .velocity ({
  Translatey: -100,
  Krycie: 0.8.
  }, {

5. Ruszaj dalej

Opóźnienie, czas trwania i łagodzenia są ustawione tak, aby drugi żółty tekst porusza się poprawnie. Następnie ostatni kawałek tekstu, który jest pomarańczowy, jest sterowany w następnej funkcji "Settimeout", aby opóźnić ten ruch trochę dłużej przed rozpoczęciem.

 Opóźnienie: Offset2,
  Czas trwania: 800,
  Łatwienia: "Uspokój się"
  });
  });
}, 100);
Settimeout (funkcja () {
  var $ spanie = $ ("# dolna"). Znajdź ("Span ');

6. Dodaj ostateczne litery

Teraz ostateczne litery są przeniesione na miejsce. Daje to taki sam efekt jak Strona Patrick Heng , który ma warstwy tekstu ruchu. Patrick faktycznie używa Webgl do przemieszczania tekstu, ale jest to prostszy sposób z elementami Dom.

 $ spani.each (funkcja () {
  offset3 + = 40;
  $ (to) .velocity ({
  Translatey: -100,
  Krycie: 0.8.
  }, {
  Opóźnienie: Offset3,
  Czas trwania: 800,
  Łatwienia: "Uspokój się"
  });
  });
}, 150);

Dowiedz się więcej na Generuate London

Generate graphic — Zobacz Richard Rutter, Sarah Partenter i Bruce Lawson i więcej rozmów w Generuate London 2018

Richard Runter ma miłość i fascynację typografii i współtworzył Fontdeck. , Pionering Web Font Service. Jako samosprawny typografia Web Evangelist, Richard jest głównym organizatorem Clearleft Ampersand. Konferencje typografii internetowej.

W Generuate London 2018, jego warsztat pomoże Ci stworzyć strony internetowe z angażującym, odpowiednią, wyróżniającą się, ekspresyjną i czytelną typografią internetową, która dostosowuje się do ekranów wszystkich kształtów i rozmiarów. Dowiesz się, jak łączyć stuleńskie rzemiosła z najnowocześniejszą technologią - w tym zmienne czcionki - w celu zaprojektowania i rozwijania najlepszych doświadczeń dla czytelników.

W ciągu dnia będziesz uczestniczyć w praktykach, stosując każdą nową technikę do szczegółowej witryny przykładowej, którą możesz zabrać ze sobą. To spowoduje utworzenie idealnego zasobu, aby odnieść się do przyszłości. A jeśli to nie wystarczy, każdy uczestnik odejdzie z bezpłatną elektroniczną kopią uznanym Richarda Książka typografii internetowej. .

Nie przegap teraz, zdobądź bilet teraz

Powiązane artykuły:

Idealny JavaScript w 1000 projektów
Wskazówki dotyczące typu cyfrowego dla projektantów graficznych
7 świetnych zasobów typu internetowego

Utwórz efekt tekstu chwiejnego za pomocą JavaScript

1. Utwórz tekst intro

2. Podziel tekst

3. Dodaj prędkość

4. Zadzwoń do akcji

5. Ruszaj dalej

6. Dodaj ostateczne litery

Dowiedz się więcej na Generuate London

Jak - Najpopularniejsze artykuły

Zbuduj szybki reaktywny blog z svelte i sapper

Jak KitBash w podróży z Shapr3D

Styl witryny za pomocą Sass

Jak dodać teksturę do pasteli z podkładami

Jak korzystać z Markdown w tworzeniu stron internetowych

Jak rozwijać mityczne stworzenia

Zrób typograficzny plakat za pomocą Adobe InDesign

Modelowanie statku kosmicznego do projektowania rozgrywki

Kategorie