Maak een wiebelig teksteffect met JavaScript

Sep 12, 2025

Procedures

A screenshot from Patrick Heng's website including moving typography

Introductie van effecten op tekst en typografie kan een geheel nieuw perspectief toevoegen aan de gebruikerservaring op een website. Maar de tekst moet worden gelezen en wordt te slim of slim met een effect kan het doel van het verslaan.

Dus wees slim, wees slim, maar zorg ervoor dat je kinetische typografie effect werkt eigenlijk, net zoals het doet Patrick Heng's website - Uitgelicht in de bovenstaande afbeelding. Lees verder om erachter te komen hoe ...

1. Maak de intro-tekst

Open de Projectbestanden En je zult zien dat er de velocity.js en Blast.js-bibliotheek is. Blast splitst tekst omhoog, terwijl de snelheid een tween-motor is. Er zijn drie offsetvariabelen om elk stuk tekst op verschillende tussenpozen te bewegen.

 & lt; script & gt;
var offset1 = 0;
var offset2 = 0;
var offset3 = 0;
& lt; / script & gt;

2. Splits de tekst

Met behulp van Blast wordt elk van de teksttekens opgesplitst in hun eigen spanelement. Vervolgens wordt de bovenste laag tekst doorgelopen en wordt de offset voor elke letter verhoogd, zodat ze onafhankelijk animatisch gaan.

 $ ("H1"). Blast ({
  Scheidingsteken: "karakter"

functie anim () {
  Var $ Span = $ ("# top"). Zoek ('span');
  $ spans.Elke (functie () {
  offset1 + = 40;

3. Voeg snelheid toe

Nu voegt de Velocity-bibliotheek de beweging en dekking toe, zodat de letters omhoog gaan en vervagen. Elke letter wordt gecompenseerd en de duur en versoepeling zijn ingesteld voor elk van de letters.

 $ (deze) .Velocity ({
  Vertaaly: -100,
  Dekking: 1
  
  Vertraging: offset1,
  Duur: 800,
  versoepelen: "Easoutback"
  
  
}

4. Bel de actie

Nu wordt de functie 'Anim' genoemd en dit triggert de animatie om te beginnen. Een 'SetTimeout' -functie staggeert nu het tweede blok tekst dat geel is. Nogmaals, het wordt geactiveerd met behulp van de snelheid zoals in het eerste voorbeeld.

 Anim ();
SetTimeout (functie () {
  Var $ Span = $ ("# midden"). Zoek ('span');
  $ spans.Elke (functie () {
  offset2 + = 40;
  $ () .Velocity ({
  Vertaaly: -100,
  Dekking: 0.8
  }, {

5. Ga verder

De vertraging, duur en versoepeling zijn ingesteld zodat de tweede gele tekst correct beweegt. Dan wordt het laatste stuk tekst dat oranje is geregeld in de volgende 'Settimeout'-functie om dit een beetje langer te laten bewegen voordat u begint.

 Vertraging: offset2,
  Duur: 800,
  versoepelen: "Easoutback"
  
  
}, 100);
SetTimeout (functie () {
  Var $ Span = $ ("# onder"). Zoek ('span');

6. Voeg definitieve letters toe

Nu worden de laatste letters verplaatst. Dit geeft hetzelfde effect als Patrick Heng's Site , die lagen tekst bewegen. Patrick gebruikt WebGL eigenlijk om de tekst te verplaatsen, maar dit is een eenvoudiger manier met DOM-elementen.

 $ Span.Elke (functie () {
  offset3 + = 40;
  $ () .Velocity ({
  Vertaaly: -100,
  Dekking: 0.8
  
  Vertraging: offset3,
  Duur: 800,
  versoepelen: "Easoutback"
  
  
}, 150);

Meer informatie bij Generate London

Generate graphic — Zie Richard Rutter, Sarah Parmenter en Bruce Lawson, en meer praten op Generate London 2018

Richard Rutter heeft liefde en fascinatie voor typografie en mede-opgerichte Fontdeck , een Pioneering Web Font-service. Als een zelfbenoemde web typografie Evangelist is Richard hoofdorganisator van Clearleft's Ampersand Webtypografieconferenties.

Bij Generate London 2018 zal zijn workshop u helpen bij het maken van websites met boeiende, passende, onderscheidende, expressieve en leesbare webtypografie, die zich aanpast aan schermen van alle soorten en maten. Je leert hoe je eeuwen-oude vaartuigen combineert met geavanceerde technologie - inclusief variabele lettertypen - om de beste ervaringen voor je lezers te ontwerpen en te ontwikkelen.

In de loop van een dag neemt u deel aan hands-on-activiteiten, het toepassen van elke nieuwe techniek op een gedetailleerde voorbeeldsite die u met u kunt opnemen. Dit vormt de perfecte bron voor u om in de toekomst te verwijzen. En als dat niet genoeg is, loopt elke deelnemer weg met een gratis elektronisch exemplaar van de geprezenheid van Richard Web Typografie Boek

Mis het niet, ontvang nu uw ticket

Gerelateerde artikelen:

Perfect JavaScript in 1.000 projecten
Pro Digital Type Tips voor grafische ontwerpers
7 Geweldige middelen

Maak een wiebelig teksteffect met JavaScript

1. Maak de intro-tekst

2. Splits de tekst

3. Voeg snelheid toe

4. Bel de actie

5. Ga verder

6. Voeg definitieve letters toe

Meer informatie bij Generate London

Procedures - Meest populaire artikelen

Hoe storyboard in Photoshop

Bouw een SEO-vriendelijke hoofdcomponent voor NEXTJS / REACT

Waterimulaties maken

Creëer Godstralen in V-Ray

Aan de slag met Express.Js

Hoe te selecteren met Photoshop's Lasso-tools

Hoe een gestileerde game-artwork te maken

Hoe maak je een gestileerd 3D-personage voor games

Categorieën