Pure CSS Slideshow (BSP 5)

Animation mit Einblendung, Ausblendung, Drehung und Skalierung im Hintergrund

Zusätzliche Animation der Texte

Slide 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
(Lorem ipsum)

Slide 2

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik.
(Wortberge)

Slide 3

Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße.
(Goethes Werther)

Slide 4

Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er.
(Kafkas Prozess)

Slide 5

Ein Trainer ist nicht ein Idiot! Ein Trainer sei sehen was passieren in Platz. In diese Spiel es waren zwei, drei diese Spieler waren schwach wie eine Flasche leer!
(Trappatoni)

Slide 6

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
(Deutsches Panagramm)

Slide 7

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
(Englisches Panagramm)

Slide 8

The path of the righteous man is beset on all sides by the inequities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother’s keeper and the finder of lost children.
(Pulp Fiction)

Slide 9

Ich bin mir sicher, 1985 kann man Plutonium in jeder Apotheke kaufen, aber 1955 kommt man da nur sehr viel schwerer dran.
(Zurück in die Zukunft I)

Slide 10

Der beste Drink, den es gibt, ist der pangalaktische Donnergurgler. Die Wirkung ist so, als werde einem mit einem riesigen Goldbarren, der in Zitronenscheiben gehüllt ist, das Gehirn aus dem Kopf gedroschen.
(Per Anhalter durch die Galaxis)

Diese Beispieldatei enthält den gesamten notwendigen HTML- und CSS-Code. Einfach herunterladen und ausprobieren.

Das Beispiel gehört zum Blogbeitrag "Animierte Slideshows ohne JavaScript". Hier gibt es auch die Anleitung und weitere Beispiele.