Opvallende koppen IV: Vallende letters

Na het laden van deze pagina valt er een kop naar beneden. De letters draaien om hun (horizontale) as en zijn afwisselend steenrood en zeegroen gekleurd. Dit wordt geregeld door een jQuery-plugin.

Het hoe en wat wordt hier besproken. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

• Besproken wordt:
  1. De oorsprong van het script.
  2. Een algemene beschrijving.
  3. Inbouwen in je eigen site.
   
• De oorsprong van het script
• Deze plug-in voor jQuery is gemaakt door ene Rich, die het onder de alias 'KryptoniteDove' op GitHub heeft gezet.
• Je kunt het zien werken en de code bekijken op CodePen.
• Op het moment dat dit wordt geschreven (april 2016) is het script 2 jaar oud. Het lijkt niet meer te worden onderhouden.
• Het voorbeeld op deze pagina is een bewerking van het origineel van KryptoniteDove.
   
• Algemene beschrijving
• Het script is een jQuery-plug-in, die staat in de file jquery.letter-drop.js. Aanpassing daarvan is niet nodig om het te laten werken. Er is ook een geminimaliseerde versie beschikbaar, die laadt wat sneller.
• Het script heeft ook nog wat CSS nodig. Daarmee kun je de opmaak van de vallende tekst helemaal naar je hand zetten.
• Natuurlijk is er ook een $(document).ready()-function om het effect te starten.
   
• Deze plug-in is toepasbaar met elk blok-type element (<h1>, <h2>, …, <p>, …). Op deze pagina werkt het op <h1>. Dat is meteen de beste keus, want <h1> komt gewoonlijk maar één keer voor in een document.
   
• De letters van de vallende tekst wordt door het script in een reeks span-tags gezet, die elk één karakter bevatten. Elke span-tag wordt apart geanimeerd.
   
• Als de pagina is geladen, wordt de function $('h1').letterDrop() aangeroepen. Daarmee wordt aan (op deze pagina) de animatie toegevoegd aan het element 'h1'. Dat gaat via de class .letterDrop.
• De class .letterDrop bevat een aantal zaken die je naar eigen smaak kunt aanpassen, zie hier onder.
   
• Inbouwen in je eigen site
• De maker van het script claimt dat jQuery 2.1.1 nodig is. Op deze pagina werkt het echter met versie 1.7.1, dat gaat ook prima. Het beste betrek je die van een CDN.
• Zoals hierboven al is genoemd kun je de opmaak van de tekst veranderen via het CSS-bestand letter-drop.css. Onderstaande tabel geeft een overzicht. Het meeste vind je binnen de class .letterDrop.
   
  

  Eigenschap		Betekenis
  top		Afstand van de bovenkant van het document waar de vallende letters beginnen. Hier: 0.60em. Als je deze waarde heel groot maakt, bijv. 10em, dan "vallen" de letters van beneden naar boven.
  font-family		Gebruikte lettertype. Hier: Raleway. Dit is een web-font van Google. Het is in de CSS opgenomen met een @import-opdracht. Je kunt hier elk lettertype neerzetten dat je wilt.
  font-weight		Zwaarte van het lettertype. Hier: 700. In de originele code is 400 gebruikt, maar voor deze site is dat niet vet genoeg. Je kunt hier alle beschikbare gewichten gebruiken.
  text-transform		Hier: uppercase. Dat betekent dat de hele tekst in hoofdletters wordt omgezet. Je zou hier ook lowercase kunnen gebruiken. Als je niet wilt dat de hoofd- en kleine letters veranderen, verwijder je deze regel.
  letter-spacing		Afstand tussen de letters. Hier: 0.5em. Kies hier wat je mooi vindt.
  opacity		Mate van ondoorzichtigheid. Hier: 0.8. Kies deze waarde niet te laag, omdat ze wordt gebruikt door browsers die de animatie niet kunnen uitvoeren.
  animation		Dit is de opdracht om de letters te laten bewegen. Hier: letterDrop 2.4s ease 1 normal forwards. Het keyword letterDrop verwijst naar de @keyframes-opdracht. Het originele script gebruikt 1.2s. Voor deze site is dat te snel.
  font-size		Lettergrootte. Hier: 30px. Dit is toegevoegd om het geschikt te maken voor deze site.
  color:		Letterkleur. Hier: maroon, dat is steenrood. Elke tweede letter krijgt de kleur teal, dat is zeegroen. Dat is geregeld via de span:nth-child(2n)-opdracht.
  @keyframes		Hier kun je het gedrag van de animatie wijzigen. Alleen voor 'specialisten'.

  
  De CSS-eigenschappen die in de table zijn genoemd zijn de eigenschappen die ook in het voorbeeld worden gebruikt. De lijst is niet uitputtend, want er zijn meer eigenschappen toepasbaar.
• CSS-eigenschappen die niet in de tabel zijn genoemd kun je beter ongemoeid laten, tenzij je weet wat je doet.
   
• Tenslotte
• Dit script heeft een onhebbelijkheid: Het hangt af van de grootte van het window op het beeldscherm waar de letters uiteindelijk terecht komen. De kans is groot dat het "ergens" tussen de pagina-tekst is. Dat maakt het eigenlijk ongeschikt voor een toepassing zoals hier op deze website.
• Dit script komt het beste tot zijn recht op een intro-scherm, waar behalve de kop verder niets op staat. Zie het voorbeeld op CodePen.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="letter-drop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.letter-drop.min.js"></script>

(Zet dit in de <BODY>, op de plaats waar de letters moeten vallen).

<div style="text-align:center; margin:20px 0">
  <h1>Vallende letters</h1>
</div>

(Zet dit helemaal aan het eind van de <BODY>).

<script>
$(document).ready(function() {
  $('h1').letterDrop();
});
</script>

Downloaden:
 
Druk op de knop:  File: voorb433.zip, 2368 bytes.