Heute stellen wir uns der Herausforderung, ein animiertes Banner mit Fotos zu erstellen, das automatisch horizontal durch eine Endlosschleife scrollt. Das Beste: Wir machen es ohne eine einzige JavaScript-Zeile.
Um dieses Banner wirklich nützlich zu machen, ist es unser Ziel, einzelne Fotos in unserem HTML-Code zu verwenden, nicht nur einen langen CSS-Hintergrund, der wiederholt wird. Das ist ziemlich knifflig, aber wir werden Ihnen genau erklären, wie es funktioniert. Lass uns anfangen!
Die Idee
Das Konzept hier ist einfach. Nehmen wir an, Sie haben eine Foto-Website oder ein Design-Portfolio und möchten ein einfaches Banner auf einer Webseite haben, das automatisch horizontal durch einige Bilder wie folgt blättert:
Wie Sie sehen, haben wir im Grunde nur einen Streifen von Bildern, die ihre Position von links nach rechts verschieben. Dies ist eine ziemlich beliebte Technik. Tatsächlich können Sie es live bei Gina Meola sehen.
Dieser Effekt ist mit JavaScript oder Flash einfach genug, aber als Übung sollten wir sehen, ob wir ihn mit reinem CSS ausführen können. Mit den ausgefallenen neuen Tools in CSS3 ist es ein wirklich einfaches Projekt, das perfekt für alle geeignet ist, die in die CSS-Animation eintauchen möchten.
Hürden
Wie versprochen, ist dies ein ziemlich einfaches Projekt, aber nur, weil ich die meisten Problemlösungen für Sie erledigt habe. In Wahrheit brauchte ich eine Weile, um herauszufinden, wie ich das erreichen kann, wie ich wollte. Der Grund dafür ist, dass es einen einfachen und einen schwierigen Weg gibt.
Der einfache Weg
Die einfachste Möglichkeit ist, die Bilder, die Sie anzeigen möchten, in Photoshop zu importieren und dann zu einem langen Bild zu kombinieren. Sie können dieses Bild dann in CSS auf Ihren Hintergrund setzen, es auf der X-Achse wiederholen und in einer CSS-Animation werfen.
Das funktioniert gut und ich konnte es in nur wenigen Minuten zum Laufen bringen, aber das Problem ist, dass es wirklich keine vielseitige Lösung ist. Angenommen, ich wollte jedes einzelne Bild irgendwo miteinander verknüpfen. Das wäre unmöglich, wenn sie in Wirklichkeit alle ein Bild wären. Dieselbe Logik bedeutet, dass ich keine besonderen Hover-Effekte auf einzelne Bilder anwenden kann. Wenn Sie Bilder hinzufügen oder auslagern möchten, ist eine weitere Reise nach Photoshop erforderlich, um die Datei zu aktualisieren. Dies ist definitiv nicht ideal.
Der harte Weg
Lassen Sie es uns leicht machen, denn es ist weder eine Herausforderung noch ist es wirklich die beste Methode, um unser Ziel zu erreichen. Der harte Weg ist, die Bilder tatsächlich einzeln in HTML einzufügen und die Bannerfunktion zu übernehmen.
Der Grund dafür, dass dies so schwierig ist, liegt darin, dass die Animation unendlich sein soll. In CSS können Sie ein Hintergrundbild problemlos wiederholen, es gibt jedoch keine Möglichkeit, etwas in HTML zu wiederholen. Selbst wenn dies der Fall wäre, würden wir nur wünschen, dass ein Bild wiederholt wird, nachdem alle anderen gerendert wurden. Wie Sie sehen können, ist dies ein Rätsel.
Hier kommen Keyframe-Animationen zur Rettung. Das Interessante an dieser Art von Animation ist, dass sie tatsächlich die unendliche Wiederholung für uns übernimmt? Art von. Es ist wirklich eine Schleife der Animation, nicht der Bilder, aber wir können damit die Illusion erzeugen, dass sich Bilder unendlich oft wiederholen.
Um zu sehen, wie dies funktioniert, stellen Sie sich vor, wir stellen nur eine Reihe von Bildern auf und verwenden dann Keyframes, um sie zu animieren. Wir haben einen Startpunkt (0%) und einen Haltepunkt (100%) wie folgt:
Wie Sie sehen können, ist dies umständlich, da es eine Menge unerwünschten Totraums hinterlässt. Wenn die Animation wieder von vorne beginnt, gibt es einen Blitzschlag, der an den Anfang zurückkehrt. Wir haben zwar eine unendliche Animation, aber sie sieht schrecklich aus.
Wenn Sie mit Trickfilmen vertraut sind, sollte die Lösung bereits klar sein. Was wir tun müssen, ist, unser erstes Bild perfekt an das letzte Bild anzupassen. Wenn sich die Animation wiederholt, wird es nahtlos sein und die Illusion eines unendlichen Bildstroms vermitteln.
Leider müssen wir dazu einige Bilder in unserem HTML-Code wiederholen. Dies ist eine Art Schmerz, aber es ist nicht das Ende der Welt und wir müssen nur genug Bilder wiederholen, um den Rahmen zu füllen.
Lass es uns bauen
Jetzt, da wir das Konzept ausgearbeitet haben, ist es Zeit, eine Demo zu programmieren! Beginnen wir mit dem grundlegenden HTML-Code für unsere Seite.
HTML
Um eine schöne Demoseite zu erstellen, fügen wir einen Header (verwenden Sie html5shiv für den IE) und etwas Fülltext sowie ein div mit unseren Bildern ein. Beachten Sie, dass wir sechs eindeutige Bilder haben, dann werden die ersten vier wiederholt. Die Initiale zeigt zumindest teilweise Teile dieser vier Fotos.
Das ist alles dazu! Mit diesem Code beginnt Ihr Bilderbanner seine Endlosschleife durch die sechs Fotos, die wir mitgeliefert haben.
Weiter geht es
Um die Vorteile dieser Methode wirklich zu demonstrieren, habe ich mich entschieden, einen Schritt weiter zu gehen und für jedes Bild einen einfachen Hover-Effekt hinzuzufügen. Dies wäre mit der CSS-Hintergrundtechnik nicht möglich gewesen.Im Hover-Modus skalieren wir das Bild um 20% und fügen einen Schatten hinzu.
Demo
Wir sind alle fertig! Klicken Sie hier oder auf das Bild, um die Live-Version anzuzeigen.
Fazit
Wir hatten zu Beginn dieses Artikels ein schwieriges Ziel. Wir wollten ein unendlich scrollendes Banner mit Bildern mit reinem CSS erstellen. Die größte Herausforderung bestand darin, eine Reihe von HTML-Bildern zur Wiederholung zu erhalten. Der Trick bestand natürlich darin, eine Keyframe-Animation einzurichten und dabei sicherzustellen, dass unser erster und letzter Frame perfekt zusammenpassen. Dies ermöglichte uns, die Animation nahtlos zu wiederholen.
Hinterlasse einen Kommentar und lass uns wissen, was du von diesem Effekt hältst. Wie würdest du es ändern oder verbessern?