Over lettering.js
Met behulp van CSS kun je allerlei mooie effecten programmeren op regels tekst, op enkele woorden en/of op aparte letters. Het is daarbij vaak omslachtig om de gewenste regels/woorden/karakters uit de tekst te filteren. Lettering.js is een hulpmiddel die het filterwerk voor jou doet.
De mogelijkheden van lettering.js zijn zo uitgebreid dat het niet goed mogelijk is om het in één voorbeeld te vangen. Daarom verwijs ik hier naar de demo-site die voor dit project is gemaakt.
Lettering.js is een jQuery-plugin. Je hebt jQuery dus hoe dan ook nodig. Het beste haal je die van een
CDN. Elke versie van jQuery die jonger is dan 1.6.2 volstaat.
Om lettering.js te kunnen gebruiken moet je natuurlijk de code ophalen. Het beste gebruik je de file jquery.lettering-0.6.1.min.js.
Dat is de gecomprimeerde versie, die laadt sneller. Je kunt het downloaden
van GitHub.
Lettering.js is gemaakt door Dave Rupert, in 2010. Sindsdien is het niet meer veranderd of uitgebreid.
Lettering.js splitst tekst in kleinere stukken, die elk worden opgenomen in een <span>-tag, elk met
een unieke class-name. Elke class kun je vervolgens apart opmaken met CSS.
Met behulp van de code:
<script type="text/javascript>
$(document).ready(function() {
$(".voorbeeld1").lettering();
});
</script>
wordt de HTML-code: <h1 class="voorbeeld1">Ben's Hobbyhoekje<h1> omgezet in:
<h1 class="voorbeeld1">
<span class="char1">B</span>
<span class="char2">e</span>
<span class="char3">n</span>
<span class="char4">'</span>
<span class="char5">s</span>
<span class="char6"></span>
<span class="char7">H</span>
<span class="char8">o</span>
<span class="char9">b</span>
<span class="char10">b</span>
<span class="char11">y</span>
<span class="char12">h</span>
<span class="char13">o</span>
<span class="char14">e</span>
<span class="char15">k</span>
<span class="char16">j</span>
<span class="char17">e</span>
</h1>
Merk op dat de class met de spatie leeg blijft. Het heeft weinig zin om een spatie op te maken. Een spatie is niet echt
een letter maar een lege ruimte.
Je kun aan de function lettering() een parameter meegeven. Met behulp van de code:
<script type="text/javascript>
$(document).ready(function() {
$(".voorbeeld2").lettering('words');
});
</script>
wordt de HTML-code: <h1 class="voorbeeld2">Ben's Hobbyhoekje<h1> omgezet in:
<h1 class="voorbeeld2">
<span class="word1">Ben's</span>
<span class="word2">Hobbyhoekje</span>
</h1>
Als je aan lettering() de parameter lines meegeeft, wordt tekst gesplitst in aparte regels. Met behulp van de code:
<script type="text/javascript>
$(document).ready(function() {
$(".voorbeeld3").lettering('lines');
});
</script>
wordt de HTML-code:
<p>Jantje zag eens pruimen hangen,<br>
o! als eieren zo groot.<br>
't Scheen, dat Jantje wou gaan plukken,<br>
schoon zijn vader 't hem verbood.</p>
omgezet in:
<p class="voorbeeld3">
<span class="line1">Jantje zag eens pruimen hangen,</span>
<span class="line2">o! als eieren zo groot.</span>
<span class="line3">'t Scheen, dat Jantje wou gaan plukken,</span>
<span class="line4">schoon zijn vader 't hem verbood.</span>
</p>
Merk op dat de oorspronkelijke <br>-tags zijn verdwenen. Als de regels zich toch als aparte regels moeten blijven
gedragen, moet je { display:block } opnemen in de CSS van de verschillende classes.
Opmerking:
In tegenstelling tot wat normaal is met JQuery, zet je de document.ready()-function bij voorkeur in de head, niet aan
het einde van de body. Daarmee voorkom je dat eerst de 'gewone' tekst verschijnt vóór dat deze wordt opgemaakt.
