CSS-Transitions zur Verkaufsförderung
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
- ← Previous
Linkfutter 49 - Next →
Linkfutter 50