Tekst animeren met Animate.js en Letterize.js op Divi

DIVI wordt geleverd met talloze animatiemogelijkheden als het gaat om het geven van dynamiek aan een website. U kunt deze animaties echter slechts één keer tegelijk aan een container toevoegen. Als het voor sommige animaties perfect genoeg is, tijd op tijd, dan kun je dat al snel beperkt vinden. Soms wilt u bijvoorbeeld meer dan één tekstanimatie toevoegen en dat is wat we vandaag zullen bespreken met behulp van de tekstmodule Letterize.js & Animate.js, dit zijn javascript-bibliotheken die CSS-animatie geven aan DOM-elementen. Met die aanpak kunt u dergelijke animaties maken met elke andere Divi-module.

Laten we beginnen.

Mogelijk eindresultaat

Hier is een mogelijk resultaat dat we aan het einde van de tutorial kunnen bereiken.

1. Maak een Hero-sectieontwerp

We beginnen met het maken van een grote sectie, ook wel 'Hero-sectie' genoemd, en voegen er een unieke sectie aan toe.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Nieuwe sectie toevoegen

Spatiëring

Begin met het maken van een nieuwe pagina. Voeg op die pagina een nieuwe sectie toe. Open de sectie-instellingen en wijzig de bovenste en onderste opvulling als volgt:

• Bovenste opvulling: 180px (desktop), 100px (tablet), 50px (telefoon)
• Opvulling onderkant: 180px (desktop), 100px (tablet), 50px (telefoon)

Voeg één rij toe

Structuur met enkele kolom

Ga verder door een nieuwe rij toe te voegen met behulp van de volgende kolomstructuur:

Configureer de afstand

We zullen nu geen module toevoegen, maar in plaats daarvan de opvullingsinstellingen definiëren.

• Opvulling onderkant: 0px

Voeg tekstmodule toe aan de eerste kolom

H1-kopie toevoegen

De enige module die we aan deze rij toevoegen is een tekstmodule. Voeg wat H1-inhoud naar keuze toe.

H1-tekstinstellingen

Schakel over naar de moduleontwerptabbladen en laten we de volgende tekstinstellingen wijzigen:

• Koplettertype: Montserrat
• Kleur koptekst: rgba(232,232,232,0,41)
• Tekstgrootte kop: 80px (desktop), 50px (tablet), 40px (telefoon)
• Kopletterafstand: -10px (bureaublad), -4px (tablet), -3px (telefoon)
• Hoogte koerslijn: 0,6 em (desktop), 0,7 em (tablet), 0,8 em (telefoon)

Voeg een tweede rij toe

Kolomstructuur

Laten we nog een rij toevoegen direct onder de vorige met de volgende kolomstructuur:

Maatvoering

Open de rij-instellingen en wijzig de maximale breedte in de formaatinstellingen.

• Maximale breedte: 1680px

Spatiëring

Verwijder vervolgens alle ondermarges en opvulling.

• Ondermarge: 0px
• Opvulling onderkant: 0px

Voeg een afbeeldingsmodule toe aan de tweede kolom

Upload een illustratie

Laten we vervolgens een afbeeldingsmodule toevoegen en een illustratie naar keuze uploaden. Dat zou eruit moeten zien als een achtergrondillustratie.

Maatvoering

Schakel nu naar het ontwerptabblad van de module en forceer volledige breedte op de afbeelding.

• Volledige breedte forceren: Ja

Spatiëring

Voeg vervolgens een negatieve ondermarge toe.

• Ondermarge: -12%

Animatie

Laten we de module-instellingen voltooien door de volgende animatie-instellingen toe te voegen:

• Animatiestijl: vervagen
• Animatievertraging: 3000 ms

Voeg de derde rij toe

Definieer de kolomstructuur

Op naar de volgende en laatste rij. Gebruik de volgende kolomstructuur:

Spatiëring

Ga verder naar het ontwerptabblad van de rij en voeg enkele aangepaste opvulwaarden toe.

• Vulling bovenkant: 10%
• Bodemvulling: 5%
• Linkervulling: 3%
• Vulling rechts: 3%

Doosschaduw

Selecteer vervolgens een subtiele doosschaduw.

• Box Shadow Blur-sterkte: 80px
• Schaduwkleur: rgba(0,0,0,0.06)

Animatie

En voltooi de rij-instellingen door de volgende animatie toe te voegen:

• Animatiestijl: vervagen
• Animatievertraging: 3000 ms

Voeg tekstmodule toe aan de derde rij

Geef inhoud

Laten we geen modules toevoegen. De eerste module die we nodig hebben is een tekstmodule met wat inhoud.

Tekstinstellingen

Ga verder naar het ontwerptabblad van de module en pas de tekstinstellingen dienovereenkomstig aan:

• Tekstlettertype: Lato
• Tekstgrootte: 18px
• Tekstletterafstand: 1px
• Hoogte tekstregel: 2,7em

Voeg een knopmodule toe aan de kolom

Geef tekst op

De laatste module die we nodig hebben is een knopmodule. Vul een tekst naar keuze in.

Knopinstellingen

Ga verder naar het ontwerptabblad van de module en wijzig de knopinstellingen als volgt:

• Gebruik aangepaste stijlen voor knoppen: Ja
• Tekstgrootte knop: 16px
• Knoptekstkleur: #171cff
• Knoprandbreedte: 0px
• Knoprandradius: 0px

• Knoplettertype: Montserrat
• Knoplettertype: hoofdletters

Spatiëring

Pas vervolgens de volgende opvulwaarden toe binnen de afstandsinstellingen:

• Vulling bovenkant: 2%
• Bodemvulling: 2%
• Linkervulling: 5%
• Rechtervulling: 5%

Doosschaduw

Voltooi de module-instellingen door de volgende vakschaduw toe te voegen:

• Verticale positie van doosschaduw: 5px
• Box Shadow Spread-sterkte: -2px
• Schaduwkleur: #171cff

2. Voeg CSS-klasse toe aan de kop

Open de eerste tekstmodule en klik op het tabblad Tekst

Nu we alle ontwerpelementen op hun plaats hebben, is het tijd om de geavanceerde tekstanimaties aan onze kop toe te voegen. Open de tekstmodule met de H1-kopie en selecteer het teksttabblad.

Voeg ID-kenmerk toe aan de H1-tag

Voeg binnen de H1 een aangepast ID-kenmerk toe.

• ID="headline-copy"

3. Voeg Letterize- en Anime-bibliotheken toe

Voeg codemodule toe aan kolom

Om de animaties te maken, gebruiken we de bibliotheken letterize.js en anime.js. Om deze bibliotheken toe te voegen, voegt u een nieuwe codemodule in de kolom van uw laatste rij in.

Neem beide bibliotheken op

Voeg vervolgens twee verschillende scripttags toe die de volgende bronnen bevatten die terugleiden naar de bibliotheken:

• <script src=”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”></script>
• <script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”></script>

4. Animatiecode toevoegen

Animatie voor Letter op individueel niveau

Voor het laatste deel van deze tutorial gaan we de animatiecode toevoegen en deze werkt voor zowel de letterize.js- als de anime.js-bibliotheken. Om een ​​mooi effect op de teksten te krijgen, gaan we twee soorten animaties toepassen. De eerste animatie wordt afzonderlijk en opeenvolgend op elke letter toegepast. Dit wordt bereikt met de letterize.js-bibliotheek. Deze bibliotheek, in combinatie met het eerste deel van de onderstaande code, plaatst elke letter in uw kopie in een aparte reeks. Deze perioden zullen dan afzonderlijk worden getarget tijdens het animatieproces. Zorg ervoor dat u de onderstaande code tussen scripttags plaatst.

jQuery(function ($) {
   $(document).ready(function () {
          var headlineCopy = new Letterize({
          targets: "#headline-copy"
       });
       var animation = anime.timeline({
          targets: headlineCopy.listAll(),
          delay: anime.stagger(20),
          loop: false
       });
      animation.add({
          opacity: [0, 1],
          scale: [0, 1.2, 1],
          duration: 1500,
          elasticity: 600,
          color: '#000',
      }).add({
          color: '#00FFF7',
      }).add({
          color: '#D2BEFB',
      }).add({
         color: '#171cff',
      });
   });
});

Elke "toevoeg"-functie vertegenwoordigt een animatie in een tijdlijn met animaties. Deze animaties zijn op elke letter afzonderlijk van toepassing. Je kunt deze toevoegfuncties naar wens aanpassen door de Letterize API te volgen, nieuwe toe te voegen of huidige te verwijderen, zorg er wel voor dat de laatste toevoegfunctie goed wordt afgesloten met een ';' aan het einde (zoals je kunt zien in de bovenstaande code).

U kunt verschillende CSS-eigenschappen toevoegen binnen deze "toevoeg"-functies. U kunt meer informatie vinden over de eigenschappen en hoe ze worden gebruikt in de documentatievoorbeelden van anime.js .

In deze zelfstudie hebben we met opzet meerdere animaties toegevoegd om te laten zien hoe de tijdlijn werkt, maar misschien wilt u voor uw eigen projecten iets subtielers of korters gebruiken.

Animatie voor zin

Nadat je het eerste deel van de animatie hebt toegevoegd, waarbij elke letter afzonderlijk is bedoeld, gaan we verder met het tweede deel van onze animatie. Dit deel richt zich op de gehele kopie als geheel. De animatiebenadering is hetzelfde als hierboven; we plaatsen de hele module in een tijdlijnanimatie. Elke toevoegfunctie vertegenwoordigt een andere animatie binnen die tijdlijn. U kunt deze toegevoegde functies wijzigen, nieuwe toevoegen of huidige verwijderen. Zorg ervoor dat u deze nieuwe code vóór het einde van de scriptcode plaatst, zoals u kunt zien in het onderstaande printscherm.

anime.timeline({loop: false})
   .add({targets: '#headline-copy',lineHeight: '1em',delay: '1500'})
   .add({targets: '#headline-copy',translateX: ['-5%', 0],letterSpacing: '-2px',});

Voeg aangepaste CSS toe voor bereik

Omdat we voor elk van onze letters een aparte reeks hebben gemaakt, moeten we de weergave-eigenschap van elke reeks wijzigen, zodat de letters naast elkaar kunnen verschijnen. Om dat te doen, voegen we wat CSS-code toe aan onze codemodule. Zorg ervoor dat u de code tussen stijltags plaatst.

#headline-copy span {display: inline-block;}

Laatste voorbeeld

Nu we alle stappen hebben doorlopen, gaan we nog een laatste blik werpen op het resultaat op verschillende schermformaten.

Laatste gedachten

In dit bericht hebben we u dus laten zien hoe u tekstanimaties voor uw kop kunt maken. We hebben het volledige ontwerp in Divi gebouwd en het raamwerk gecombineerd met de letterize.js- en anime.js -bibliotheken. Test jij deze animatie op je blog? Heeft u nog een andere animatie die u met ons wilt delen? Laat het ons weten.