Animated Knockout Letters

Animated Knockout Letters è un piccolo esempio su come mostrare una immagine di background all’interno del testo che vogliamo, grazie a jquery e a qualche riga di CSS possiamo creare del testo animato.

Animated Knockout Letters grazie a WebKit e alle sue proprietà come -webkit-background-clip e alla proprietà -webkit-transition è possibile andare ha creare del testo animato come per esempio il titolo di una presentazioni di immagini.

E’ possibile andare a modificare la dimensione del testo, il tipo di background da utilizzare il colore a piacere.

color: white; 
background: url(images/1.jpg) 20px -150px no-repeat;
font-size: 150px;
text-align: center; 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -8px; 
-webkit-transition: all 2.5s; 
padding-bottom: 40px; 

Grazie a lettering.js un plugin jQuery abbiamo il controllo dei caratteri

$("#poster h1, #poster p").lettering();
$("#poster p span").each(function() {  $(this)
.css({ top: -(Math.floor(Math.random()*1001)+1500), 
left: Math.floor(Math.random()*1001)-500,  }); });
setTimeout(function() {$('html').addClass("step-one");}, 1000);
setTimeout(function() {$('html').addClass("step-two");}, 3000);
        });

lettering.js è scaricabile dal sito ufficiale https://letteringjs.com/

Esempio

Scarica Esempio