• Controlla individualmente ogni lettera con Lettering.js

    by  • 16 novembre 2011 • CSS, HTML, JavaScript, Web Design • 0 Comments

    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:

    <h1 class="mio_titolo">Titolo</h1>

    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

    <br/>

    , 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 *