Animierte Knockout-Buchstaben

Ich habe neulich eine Werbung gesehen, in der diese Buchstaben über einen schwarzen Bildschirm geflogen kamen und ein Bild darunter enthüllten. Es war ein ziemlich cooler Effekt und erinnerte mich daran, wie WebKit diese coole Eigenschaft `-webkit-background-clip` hat, mit der man Hintergründe durch Text zeigen kann. Also machte ich mich daran zu sehen, ob ich etwas Ähnliches machen könnte. Das ist möglich, aber es gibt einige interessante Stolpersteine...

Das ist das Endergebnis

Demo ansehen   Dateien herunterladen

Knockout-Grundlagen

Es steckt nicht viel dahinter

.display-sweet-image-behind {
   /* fallback color */
   color: white; 

   /* overrides color with nothingness */
   -webkit-text-fill-color: transparent;
   
   /* remember non WebKit browsers will see all of this EXCEPT the text */
   background: url(images/zombies-making-out.jpg) no-repeat; 

   /* the magic */
   -webkit-background-clip: text;

   font: bold 100px Impact, Sans-Serif;
}

<div class="display-sweet-image-behind">Nom nom nom</div>

Buchstaben verschieben

Es stellt sich heraus, dass es absolut in Ordnung ist, wenn man die Buchstaben in `span`-Tags einschließt, so wie hier

<div class="display-sweet-image-behind">
<span>N</span>
<span>o</span>
<span>m</span> 
nom nom
</div>

Die Buchstaben werden immer noch ausgeschnitten und alles ist gut. Es sind nicht nur `span`-Tags, sondern dass man sie in ein Inline-Level-Element einschließt. Wenn man `inline-block` oder `block` oder etwas anderes verwendet, funktioniert der Ausschnitt nicht mehr. =(

Da die `span`-Tags funktionieren, könnte man meinen, wir könnten sie mit relativer Positionierung verschieben. Mega Spaß!

.display-sweet-image-behind span {
   position: relative;
}
.display-sweet-image-behind span:nth-child(1) {
   top: -20px;
   left: -20px;
}

Der obige Code würde den ersten Buchstaben nach oben und links verschieben. Aber nein! Fehlschlag! Irgendetwas an der Positionierung lässt den Ausschnitt fehlschlagen. Doppelt =( =(.

Als Test habe ich versucht, Ränder (`margin`) für diese `span`-Tags zu verwenden, und das ist erlaubt, also Halleluja, das reicht für den Spaß mit Animationen. Obwohl, da dies Inline-Elemente sind, haben wir nur linken und rechten Rand, oben und unten haben keine Auswirkung.

.display-sweet-image-behind span:nth-child(1) {
   margin-left: -100px; /* remember this will yank all the letters over this far */
}

Lettering.js

Also ja, muss man jeden einzelnen Buchstaben manuell in einen `span` einschließen? Nein, das ist was für Verlierer. Lettering.js ist ein jQuery-Plugin, das genau das tut. Wortwörtlich. Man ruft es auf einem Satz von Elementen auf und es schließt jeden einzelnen Buchstaben in einen `span` mit einer Klassenbezeichnung ein, die seine Position referenziert.

$(".display-sweet-image-behind").lettering();

Super einfach, super cool. Ich hätte darauf kommen sollen.

Animieren

Das Hauptziel hier ist, dass sich die Buchstaben selbst an ihren Platz animieren. Hier ist also unser Markup für das endgültige Beispiel

<div id="poster">
	<h1>Red Sonja</h1>
	<p>Coming 2011</p>
</div>

Wir werden alle Buchstaben mit Lettering.js mit einer Zeile JavaScript in `span`-Tags einfügen

$("#poster h1, #poster p").lettering();

Für die Knockout-Buchstaben geben wir ihnen eine Übergangszeit (`transition`), damit sich alle Eigenschaften, die sich ändern, animieren. Nur WebKit-Browser haben den Knockout, aber wir könnten die Buchstaben genauso gut gleich behandeln.

#poster h1 span { 
	-webkit-transition: all 2.5s;
	-moz-transition: all 2.5s;
	-o-transition: all 2.5s;
}

Die von Lettering.js angewendeten Klassen sind `char1`, `char2` usw. Wir werden also diese Klassen verwenden, um große Ränder anzuwenden und die Buchstaben irgendwie von der Seite wegzuschieben.

#poster h1 span.char1 { margin-left: -1450px; } 
#poster h1 span.char2 { margin-left: 200px; }
#poster h1 span.char3 { margin-left: 200px; }
#poster h1 span.char5 { margin-left: 1450px; }
#poster h1 span.char6 { margin-left: 200px; }
#poster h1 span.char7 { margin-left: 200px; }
#poster h1 span.char8 { margin-left: 200px; }
#poster h1 span.char9 { margin-left: 200px; }

Wir werden eine kurze Verzögerung vor dem Start der Animation wählen. Dies gibt Lettering.js eine Chance, seine Sache zu machen und die schicke Schriftart zu laden. Außerdem ist dies eine Art "Erlebnis"-Effekt, bei dem das Warten einer Sekunde die Spannung erhöht.

Wir werden einfach eine Sekunde warten und dann dem `html`-Element eine Klasse hinzufügen.

setTimeout(function() {$('html').addClass("step-one");}, 1000);

Wir werden diese Klassenbezeichnung verwenden, um all die Ränder, die wir gesetzt haben, zu überschreiben und sie auf Null zurückzusetzen, sodass die Buchstaben wieder an ihrer natürlichen Position sind.

.step-one #poster h1 span { margin: 0; }

Die anderen Buchstaben in der Demo verwenden ebenfalls die Lettering.js `span`-Tags und machen ihre Animation über CSS-Übergänge und verzögert angewendete Klassen, nur dass sie keine Knockouts sind. Da sie keine Knockouts sind (nur weißer Text), **können** wir `position: relative` verwenden.

Lassen Sie uns zufällig ihre Position festlegen und dann "Schritt Zwei" der Animation ein paar Sekunden später stattfinden lassen, wo eine Klassenbezeichnung sie zurück an ihren Platz bewegt.

$("#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-two");}, 3000); 

Diesmal müssen wir `!important`-Regeln verwenden, da jQuery die CSS-Werte mit Inline-Styling anwendet, und `!important` ist erforderlich, um dies zu überschreiben.

.step-two #poster p span { 
  top: 0 !important; 
  left: 0 !important; 
}

Zusammenfassung

Falls Sie neugierig sind, die hier verwendete Schriftart ist Newcomen, erhältlich auf Typekit.

Auch wenn der Rand nur den linken und rechten Rand beeinflussen konnte, kam die Auf- und Ab-Animation von der Animation des oberen `padding` des Elternelements. Trickreich.

Oh, und ich habe keine Ahnung, ob sie Red Sonja wirklich neu verfilmen werden oder nicht. Es scheint ein Gerücht zu sein.

Demo ansehen   Dateien herunterladen