CSS,  HTML,  JavaScript,  Vetrina,  Web Design

Controlla individualmente ogni lettera con Lettering.js

Essendo continuamente alla ricerca di novità riguardo il web design, mi sono imbattuto in questo progetto che sembra essere interessante, parliamo di Lettering.js.

Sostanzialmente è una libreria javascript basata sull’onnipresente JQuery, che consente di controllare singolarmente le lettere di una parola in modo da creare bellissimi effetti su titoli, messaggi e quant’altro debba essere messo in evidenza all’interno di un sito web.

Vediamo subito brevemente come funziona, partendo da una riga di HTML:

[code lang=”html”]<h1 class=”mio_titolo”>Titolo</h1>[/code]

Includiamo nella nostra pagina la libreria JQuery e la libreria Lettering.js,aggiungendo poi del codice JavaScript per invocare il metodo lettering(), come mostrato di seguito:

<script src="path/to/jquery-1.4.2.min.js"></script>
<script src="path/to/jquery.lettering.min.js"></script>
<script>
  $(document).ready(function() {
     $(".mio_titolo").lettering();
   });
</script>

Il codice risultante sarà:

<h1 class="mio_titolo">
   <span class="char1">T</span>
   <span class="char2">i</span>
   <span class="char2">t</span>
   <span class="char2">o</span>
   <span class="char2">l</span>
   <span class="char2">o</span>
</h1>

Adesso il testo è facilmente manipolabile lettera per lettera nel nostro CSS utilizzando il pattern ordinale .char#

Lettering consente la manipolazione anche di parole all’interno di una frase, incapsulandole in tags span, di seguito un esempio del metodo .lettering('words'):

<p class="word_split">Separo le tue parole</p>
<script>
   $(document).ready(function() {
      $("word_split").lettering('words');
   });
</script>

Che genererà:

<p class="word_split">
   <span class="word1">Separo</span>
   <span class="word2">le</span>
   <span class="word3">tue</span>
   <span class="word4">parole</span>
</p>

Avremo così la possibilità di assegnare uno stile specifico per le singole parole nel nostro CSS, utilizzando sempre un pattern ordinale del tipo .word#

Esiste una ultima ulteriore modalità con la quale la libreria Lettering.js consente di manipolare singolarmente intere linee identificate attraverso il tag [code lang=”html”]<br/>[/code], utilizzando il metodo .lettering('lines') vediamo un esempio:

<p class="line_split">Questo è<br/> un esempio di separazione<br/> delle linee</p>
<script>
   $(document).ready(function() {
      $(".line_split").lettering('lines');
   });
</script>

da cui risulterà il codice:

<p class="line_split">
   <span class="line1">Questo è</span>
   <span class="line1">un esempio</span>
   <span class="line1">di separazione</span>
   <span class="line1">delle linee</span>
</p>

Per ulteriori dettagli e per scaricare la libreria Lettering.js fare riferimento al sito web ufficiale del prodotto, raggiungibile alla URL:  http://daverupert.com/2010/09/lettering-js/ oppure alla URL: http://letteringjs.com/

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *