Während ich mit Webkit-Keyframe-Animationen herumspielte, habe ich einen Weg gefunden, einen fantastischen kleinen Bildschieber zu erstellen, der nur CSS verwendet. Es ist definitiv etwas unkonventionell, aber es ist eine großartige Möglichkeit, mit den Möglichkeiten, die Sie mit CSS3 machen können, außerhalb der Box zu denken.
Beachten Sie, dass dies, da wir Webkit Keyframes verwenden, ein reines Lernversuch ist und nur in Safari oder Chrome funktioniert. Da in Zukunft mehr Browser Keyframe-Animationen unterstützen, sollte diese Methode in Ihren eigenen Webprojekten perfekt einsetzbar sein.
Was wir bauen
Diashow Live Demo: Klick hier
Bullauge Live Demo: Klick hier
Warum reines CSS?
Bevor jemand zu aufgeregt wird, möchte ich erkennen, dass dies zu diesem Zeitpunkt ein Job für JavaScript ist. Obwohl einige seltene und verwirrte Seelen mit deaktiviertem JavaScript browsen, wird dadurch ein viel geringerer Prozentsatz Ihres Publikums weggelassen als bei der heutigen Methode.
Ich denke, es ist wichtig und macht sogar Spaß, mit den kommenden Technologien zu experimentieren, um zu sehen, wie wir in naher Zukunft programmieren werden. Wie wir in unserem kürzlich erschienenen Artikel zum Erstellen von bunten pulsierenden Hintergründen gesehen haben, strecken Webkit-Keyframe-Animationen das, was mit CSS möglich ist, und sind ziemlich einfach zu bedienen.
Erste Schritte: Grundlegendes HTML
Zu Beginn erstellen wir die Seite so, als ob sie nur statische Elemente enthalten würde. Wir müssen uns nicht allzu viele Sorgen machen, wenn Sie diesmal ein komplexes Seitendesign erstellen, nur einen einfachen Container mit der Diashow und einer Überschrift.
Aus diesem Grund ist das Markup für dieses Projekt sehr einfach:
Danach sollten Sie nicht mehr als eine weiße Seite mit etwas Text haben:
Basic CSS
Nun, da wir unser Markup komplett angelegt haben, ist es an der Zeit, die Seite zu gestalten, um sie präsentierbar zu machen. Das erste, was ich tun werde, ist ein grundlegender Rand- / Polster-Reset durchzuführen, einen Hintergrund auf den Körper anzuwenden und den Container zu zentrieren.
Das Zurücksetzen hilft einfach, Browser-Voreinstellungen zu löschen, und das div zu zentrieren, ist so einfach wie das Anwenden einer Breite und das Setzen des linken und rechten Rands auf auto.
Den Text gestalten
Jetzt, da Hintergrund und Container eingerichtet sind, lassen Sie die Überschrift etwas besser aussehen. Unser Markup hat drei Abschnitte erstellt, mit denen gearbeitet werden kann: die Überschrift div, h1 und der Absatz.
Ich habe damit begonnen, einige Ränder auf das gesamte div anzuwenden, den gesamten Text darin zu zentrieren und die Standardfarbe auf Weiß zu setzen. Danach wendete ich einige grundlegende Schriftstile (mit Kurzschrift) auf die Tags h1 und Absatz an.
Beachten Sie, dass ich für die Schriftart 'Josefin Sans' verwendet habe. Dies ist aus der Google Font Library. Damit dies funktioniert, stellen Sie sicher, dass Sie dieses Snippet im Kopfbereich Ihres HTML-Codes haben.
Und damit sieht unsere Seite schon viel schöner aus!
Das Bild gestalten
Jetzt müssen wir einen Hintergrund auf das Div der Slideshow anwenden. Im nächsten Schritt werden wir viel mehr damit tun, aber im Moment möchten Sie im Grunde nur ein Platzhalterbild auswählen und Breite und Höhe auf das div anwenden.
Unsere Seite sieht an diesem Punkt gut aus. Nun, da wir es so haben, wie wir es wollen, können wir es mit Leben füllen!
Einrichten des Diashowbildes
Die Art und Weise, wie wir diese Diashow einrichten, ist im Wesentlichen die Verwendung einer modifizierten Version von CSS-Sprites. Die Idee ist, ein großes Bild mit all unseren Folien zu erstellen und dann Keyframe-Animationen zu verwenden, um bestimmte Teile des Bildes an bestimmten Punkten der Animation sichtbar zu machen.
Wenn das noch nicht ganz sinnvoll ist, machen Sie sich keine Sorgen, es ist viel einfacher als Sie denken! Zu Beginn müssen wir uns mit Photoshop beschäftigen und unser Image erstellen. Nun, da die Größe, die wir oben für die Diashow eingerichtet haben, 465 Pixel breit und 300 Pixel groß ist, müssen wir unser Photoshop-Dokument 930 Pixel x 600 Pixel (doppelt so groß wie breit) machen. Dies gibt uns genug Fläche für vier Bilder. Wenn Sie mehr wollen, vergrößern Sie es einfach!
Von hier aus möchten Sie vier Bilder einfügen, von denen jedes 465 x 300 Pixel groß ist. Stellen Sie sie in einem Raster ohne Lücken auf und speichern Sie eine JPG in voller Größe. Ihr Ergebnis sollte ungefähr so aussehen wie das Bild unten.
Diashow CSS
Mit Webkit-Keyframe-Animationen lässt sich die Arbeit sehr einfach gestalten. Sie müssen lediglich etwas zum Animieren auswählen und dann den Status dieses Elements an verschiedenen Punkten in der Animation festlegen, die durch Prozentsätze definiert werden. Wenn Sie also die Breite eines div auf 0%, 50 auf 50% und 10 auf 100% einstellen, wird der div im Verlauf der Animation verkleinert.
Heute werden wir die Eigenschaft für die Hintergrundposition animieren. Unsere Diashow ist so eingestellt, dass standardmäßig nur der obere linke Quadrant unseres Bildes angezeigt wird, und wir können die Hintergrundposition verwenden, um das Bild zu verschieben, um die anderen anzuzeigen.
Um dies zu visualisieren, stellen Sie sich unsere Webseite als dunklen Hintergrund mit einem rechteckigen Loch vor. Das gerade erstellte Bild wird dann unter dieses Loch gesetzt und wir werden es verschieben.
Zuerst wollen wir vom linken oberen Bild zum rechten oberen Bild gehen, also setzen wir das rechte Bild. Wert (die erste Zahl) auf die negative Breite eines Bildes (465px). Als nächstes richten wir die? Wert (der zweite Wert) auf die negative Höhe eines Bildes (300px). Schließlich bleiben wir bei -300 auf der Höhe, bringen aber den richtigen Wert wieder auf Null. Dies bewirkt, dass das obere linke Bild, das obere rechte Bild, das untere rechte Bild und dann das untere linke Bild angezeigt werden.
Beachten Sie, dass ich hier etwas Kurvenball hineingeworfen habe und bei 10% alles auf 0 gesetzt habe. Das liegt daran, dass mir die Diashow nicht sofort gefallen hat, ohne dass Sie das erste Bild sehen konnten. Dies führt einfach zu einer kurzen Pause.
Eines der wichtigsten Elemente ist hier die Syntax am Anfang:? @ - Webkit-Keyframes-Schieberegler ?. Die? @ - Webkit-Keyframes? Teil sagt dem Browser, was Sie mit dem folgenden Code definieren, aber der Schieberegler? Teil ist ein anpassbarer Titel, den Sie der Animation geben. Es kann alles sein, was Sie möchten. Denken Sie daran, es im nächsten Schritt erneut zu verwenden, wenn Sie diese Animation aktivieren.
Aktivieren der Diashow
Wenn Sie das CSS oben verwenden, wird das Verhalten der Diashow definiert, jedoch nicht aktiviert. Dazu müssen Sie eine neue Zeile in Ihr Diashow-Div einfügen.
Hier habe ich den? Slider? Animation, die wir gerade definiert haben, dann setzen Sie die Länge auf 20 Sekunden, die Iterationen auf unendlich und die Richtung, in der Sie wechseln möchten (sobald die Animation beendet ist, springt sie zum Anfang zurück).
Demo
Damit sind wir alle fertig! Schauen Sie sich die Live-Demo an, um sie in Aktion zu sehen. Vergewissern Sie sich erneut, dass Sie Safari oder Chrome verwenden.
Alternative Ausführung: Bullaugeneffekt
Beachten Sie, dass diese Technik nicht wirklich mehrere Bilder verwendet, sondern nur um ein einzelnes Bild schwenkt. Aus diesem Grund können Sie einen wirklich coolen Effekt erzielen, indem Sie einfach ein großes Foto verwenden.
Um zu sehen, wie das funktioniert, schnappte ich mir ein Unterwasserbild und modifizierte die obige Seite, um eine Art Ozean Bullauge zu erzeugen. Der Code wird unten gezeigt. Beachten Sie, dass diesmal die Animation nicht automatisch startet, sondern nur, wenn der Benutzer über das Bild fährt.
Für das Styling habe ich einfach die Ecken des div so abgerundet, dass es sich um einen Kreis handelt, und einen Schattensatz für Schatten eingesetzt, um das ausgeschnittene Aussehen zu erzielen.
Demo
Um die Bullauge-Demo zu sehen, klicken Sie auf das Bild unten.
Fazit
Zusammenfassend lässt sich festhalten, dass Webkit Keyframe Animations unzählige Möglichkeiten bietet, um Webseiten ohne JavaScript zu beeindrucken. Normalerweise würde diese Art von Effekt einen ziemlich anständigen Code erfordern, aber mit CSS ist das unglaublich einfach.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie über den Effekt denken. Sind Sie aufgeregt, dass CSS diese Verhaltensweisen einbezieht, oder denken Sie, dass dies immer die Aufgabe von JavaScript sein sollte? Lass uns wissen!