Animated Knockout Letters
Softwareone.it
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/