Mit Animationen, Transformationen und Transitionen kann man viel herumspielen. In meinen Schulungen und Uni-Kursen merke ich immer wieder, dass dies die Entwickler anzieht. Von Designern und Marketingfuzzis Marketingspezialisten wollen wir jetzt gar nicht sprechen. Ich gebe immer wieder gerne eine Webseite von Andy Clarke als Beispiel, die leider schon lange nicht mehr existiert. Für ein paar Schulungs-DVDs hatte er „For a beautiful web“ erstellt. Da diese Webseite nur noch über das Web-Archiv erreichbar ist, habe ich die Quintessenz der Animation herausgezogen und in ein Codepen transferiert.
Ich habe dieses Experiment selbstverständlich in Sass (SCSS) geschrieben, damit ich es später einfacher modularisieren und konfigurieren kann. Als Erstes habe ich die Regeln ausgelagert, die man benötigt, um einer Liste die optischen Markierungen zu nehmen, sie floaten zu lassen und die Links zu Blockelement-Verhalten zu überreden. Dieses Snippet kann man immer gebrauchen. Ich habe es als Platzhalter angelegt:
// no list-items and floating
%noListFloat {
&, li {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
li {
float: left;
}
a {
display: block;
}
}Die Konstrukte habe ich in eine Liste gesteckt, weil man sie als Aufzählung von Angeboten interpretieren kann. Wichtig ist, den Listenelementen ein position: relative; zu geben, denn eines der beiden Bilder – die CD – wird hinter der anderen versteckt. Dafür benötige ich absolute Positionierung. Und diese richtet sich nach dem Positionierungskontext, den ich erst mit der relativen Postionierung eröffne.
Die DVDs verschiebe ich dann mittes absoluter Positionierung so, dass mir ihre Position gefällt. Sie ragen ein wenig hinter den Boxen raus und zeigen, dass da etwas versteckt ist. Beide Bilder – ich habe sie durch eine Klasse identifiziert, man kann auch andere Selej´ktoren nutzen – werden mit der gleichen Transition-Anweisung animiert: transition: all 0.5s ease-in-out 0s;. Das Schlüsselwort all bezieht sich dabei auf alle Eigenschaften, die beim Auslösen verändert werden.
Ausgeläst wird die Animation durch die Events :hover bzw. :focus, die auf dem die Bilder umgebenden Link liegen. Die DVD wird mit transform: translate(40px, 0px) rotate(300deg); nach rechts geschoben und gleichzeitig um 300 Grad gedreht. Das Cover wird mit währenddessen nach links gekippt. Dafür habe ich den transform-origin verschoben, denn der sitzt sonst in der Mitte, wo ich ihn nicht gebrauchen konnte.
In diesem Falle habe ich keine Vendor-Prefixes geschrieben, da Codepen die Nutzung von Prefixfree anbietet. Für produktive Seiten finde ich dieses Skript schlecht, weil es ein Problem auf den Nutzer verlagert, das da nicht hingehört. Aber für Demozwecke finde ich es sehr geeignet, weil es unnötige Komplexität vermeidet und einen klaren Blick auf den eigentlich angestrebten Code werfen lässt.
See the Pen Animated book-covers by Jens Grochtdreis (@jensgro) on CodePen
12. November 2013 um 15:15 Uhr
Jens, schön dass du das Code-Erbe von Andy pflegst … nur diese Überschrift? Warum wird denn durch die Transitions der Verkauf gefördert? Nicht mal eine Steigerung der Click-Trough-Rate würde ich Dir ohne einen A/B-Test abnehmen.
12. November 2013 um 15:27 Uhr
Ich habe einen griffigen Titel gesucht. Und ich denke, ausser Verkaufsförderung gibt es keinen legitimen Grund für diese Spielerei. Ob sie erfolgreich war weiss ich nicht, suggeriere es auch nicht.
12. November 2013 um 15:36 Uhr
Das sehe ich anders. Es mag sehr wohl legitime Gründe geben, zum Beispiel kann es Teil der Corporate Identity sein (allgemein kleine Spielereien oder konkret eine sich drehende DVD), die Verkaufsförderung als direkte Maßnahme abzuleiten finde ich aber übertrieben – und bin ich von Dir auch nicht gewohnt (schließlich schreibst du ja selbst von „ Marketingfuzzis“, was ja keine besonders achtungsvolle Betitlung ist).
12. November 2013 um 15:57 Uhr
Da kann ich Florian nur beipflichten. Reisserische Headline für ein nicht belegtes Argument.
13. November 2013 um 9:16 Uhr
Blogkommentare, Quell der Freude.
13. November 2013 um 12:37 Uhr
Quod erat demonstrandum Gerrit.