Was ist besser als eine Diashow? eine dreifache Diashow! (JavaScript)

Heute erstellen wir eine Webseite, auf der nicht nur eine, sondern drei separate Diashows verwendet werden, die wie ein wirklich dynamisches Element aussehen. Dieser Effekt ist perfekt für jedes Designer- oder Fotografen-Portfolio.

Auf dem Weg werden wir einige sehr einfache HTML, CSS und jQuery verwenden. Öffne einen Texteditor und folge ihm, um deinen eigenen zu bauen!

Inspiration

Ich habe kürzlich durch unsere fantastische Designgalerie gestöbert und bin auf Jessica Kripp's Fotografieportfolio gestoßen (siehe unten). Ich war sofort beeindruckt von der Art von Diaschau, die die Homepage belegte.

Hier haben wir nicht nur eine, sondern drei verschiedene Foto-Diashows, die unabhängig voneinander laufen und dennoch synergetisch als eine Einheit konzipiert sind. Es ist ein wirklich cooler Effekt, den ich noch nie gesehen habe. Es kann etwas Prozessorintensiv sein, aber es macht trotzdem Spaß.

Heute werden wir einspringen und eines davon bauen, um zu sehen, wie es gemacht wird. Wir werden HTML, CSS und jQuery verwenden, aber lassen Sie sich davon nicht einschüchtern, es ist alles sehr einfach und eignet sich für Anfänger.

Schritt 1: Grundlegendes HTML

Der einfachste Weg, um an dieses Projekt heranzugehen, besteht darin, das grundlegende Layout und Design der Seiten aus dem Weg zu räumen, bevor wir mit dem Spielen von JavaScript beginnen. Das bedeutet, dass wir die Seite mit statischen Bildern gestalten und dann zurückgehen und die Diashow-Funktionalität hinzufügen.

Erstellen Sie zunächst einen Basiscontainer, gefolgt von drei Divs, die jeweils ein Bild enthalten. Ich weiß, wir werden schon ein bisschen div-schwer, aber das jQuery-Plugin, das wir später für die Diashow verwenden werden, setzt voraus, dass jedes dieser Bilder über einen eigenen übergeordneten Container verfügt.

   <img src="//lesptitesaffairesdemayl.be/img/images_1/whats-better-than-a-slideshow-a-triple-slideshow_2.jpg"> <h2>Schritt 2: Basic CSS</h2> <p>Lassen Sie uns zunächst einige grundlegende Körperstile hinzufügen. Hier habe ich die grundlegendsten Resets eingeworfen, den Hintergrund farbig dargestellt und den Container div zentriert. Für den Container habe ich ihm eine Breite gegeben, die der des größten Bildes entspricht, um 50 Pixel vom oberen Rand der Seite versetzt und den linken und rechten Rand auf "auto" gesetzt, wodurch das Div horizontal zentriert wird.</p>      <textarea wrap="soft" readonly=""> * {Marge: 0; Polsterung: 0; } body {background: # 291616; } #container {width: 800px; Marge: 50px auto; }

Als nächstes gestalten wir die Foto-Divs. Das Wichtigste dabei ist, dass ich den Float des smallPhoto1 links und den des smallPhoto2 rechts eingestellt habe. Dadurch wird sichergestellt, dass sie korrekt fließen und direkt aufeinander stoßen (wenn Sie immer noch Layoutprobleme haben, experimentieren Sie mit einem clearfix div). Ich habe auch jeweils Höhenwerte hinzugefügt. Langfristig scheinen diese nicht notwendig zu sein, aber ich hatte zu diesem Zeitpunkt einige Layoutprobleme ohne sie.

 #bigPhoto {height: 300px; } # smallPhoto1 {height: 200px; Schwimmer: links; } # smallPhoto2 {Höhe: 200px; schweben rechts; }

Schritt 2: Vorschau

Nach dem obigen CSS sollte Ihre Seite mit einem dunklen Hintergrund und einem engen Foto-Raster schön und sauber aussehen, wie in der Vorschau unten gezeigt.

Schritt 3: Tools von Drittanbietern

Nun, da unsere Seite im Hinblick auf das Layout im Wesentlichen fertig ist, ist es Zeit, sich darauf einzustellen, die Seite dynamischer zu gestalten. Dazu müssen wir zwei JavaScript-Tools laden.

Die erste ist eine Bibliothek, die keiner Einführung bedarf. jQuery ist die beliebteste JavaScript-Erweiterung für jedermann, die das Leben im Allgemeinen einfacher macht, egal ob Sie komplexe Animationen erstellen oder einfach nur auf bestimmte Elemente zielen möchten.

Um sicherzustellen, dass ich die aktuellste Version von jQuery habe, gehe ich immer zu ScriptSrc, wo Sie einfach auf eine Schaltfläche klicken, um den neuesten Build-Link in Ihre Zwischenablage zu kopieren.

Die eigentliche Engine hinter unseren Diashows wird heute jQuery Cycle sein, ein Plugin, das es sehr einfach macht, jQuery-Diashows im Handumdrehen zu erstellen.

Wir werden im nächsten Schritt sehen, wie wir das umsetzen können. Im Moment können Sie das folgende Skript in Ihre Kopfzeile aufnehmen.

Modernizr

Wenn Sie wie ich HTML5 und CSS3 verwenden möchten, sollten Sie auch in Modernizr werfen, um sicherzustellen, dass alles mit IE kompatibel ist.

Schritt 4: Die Diashows zum Leben erwecken

Die Implementierung von jQuery Cycle ist sehr einfach. Es gibt unzählige Optionen und Effekte, aber für die heutigen Zwecke werden wir ein Minimum an verfügbaren Funktionen verwenden.

Lassen Sie uns zunächst unser HTML ein wenig verfeinern. jQuery Cycle sucht mit der Klasse? Slideshow? und erstellen Sie eine Diashow aus ihren Kindern. Um dies zu berücksichtigen, fügen wir unseren drei Bilddivisionen die Diashow-Klasse hinzu und fügen jedem Bild zwei weitere Bilder hinzu. Dies führt dazu, dass jedes Bild drei Iterationen durchläuft.

   <img src="//lesptitesaffairesdemayl.be/img/images_1/whats-better-than-a-slideshow-a-triple-slideshow_6.jpg"> <h2>Schritt 5: Fertigstellen der Seite</h2> <p>Damit könnten wir fertig sein, aber unsere Seite sieht ein wenig schlicht aus, also wollen wir ein wenig Interesse hinzufügen, oder? Als Erstes möchte ich eine einfache Überschrift hinzufügen. </p> <h3>Überschrift</h3> <p>Für die HTML-Überschrift müssen wir nur eine h1 direkt über unserem bigPhoto-div einfügen.</p>     <textarea wrap="soft" readonly=""> <h1>Design Shack: Slideshow-Beispiel</h1>  <img src="//lesptitesaffairesdemayl.be/img/images_1/whats-better-than-a-slideshow-a-triple-slideshow_7.jpg"> <h3>Foto-Tag</h3> <p>Als nächstes möchte ich ein Label über der Diashow einfügen. Dies ist eine wichtige Übung, da jQuery Cycle einige seltsame Auswirkungen auf die Seitenhierarchie hat, die dies etwas schwieriger macht.</p> <p>Der erste Schritt hier ist, ein neues div zu erstellen, das als unser kleines Tag dient. Dies erfordert nur eine einzige Zeile HTML direkt unter dem soeben eingerichteten h1.</p>  <textarea wrap="soft" readonly=""> <h1>Design Shack: Slideshow-Beispiel</h1> Fotodiashow-Wand

Jetzt noch etwas Styling. Wir machen den Hintergrund in der gleichen Farbe wie die Überschrift für Konsistenz und fügen etwas Polsterung hinzu, um ihm Gewicht zu verleihen. Außerdem habe ich die Position auf absolut gesetzt und sie mit einem gewissen negativen Rand versehen, so dass sie auf der linken Seite etwas aus der Diaschau herausragt.Schließlich fügte ich einen grundlegenden Boxschatten hinzu, damit er auf verschiedenen Farben angezeigt wird.

 / * Slideshow Tag * / #slideshowTag {background: # 00bdf2; Farbe: #fff; Schrift: 20px Helvetica, serifenlos; Marge: 50px 0 0 -10px; Polsterung: 15px; Position: absolut; / * Shadow * / -webkit-box-shadow: 3px 3px 0px rgba (0, 0, 0, 0,2); -moz-box-shadow: 2px 2px 0px rgba (0, 0, 0, 0,2); Box-Schatten: 2px 2px 0px rgba (0, 0, 0, 0,2); }

Das Problem hierbei ist, dass das Tag zwar in der HTML-Hierarchie höher ist, jedoch von der Diashow verdeckt wird. Sie können es nur zwischen Dias sehen:

Dies lässt sich leicht mit etwas Z-Index-Magie beheben. Setzen Sie einfach den Z-Index des Tags auf? 1? und das des bigPhoto div auf? -1 ?. Dies wird so gemacht, dass das Tag oben auf der Diashow angezeigt wird.

 / * Slideshow Text * / #slideshowTag {background: # 00bdf2; Farbe: #fff; Schrift: 20px Helvetica, serifenlos; Marge: 50px 0 0 -10px; Polsterung: 15px; Position: absolut; z-Index: 1; / * Shadow * / -webkit-box-shadow: 3px 3px 0px rgba (0, 0, 0, 0,2); -moz-box-shadow: 2px 2px 0px rgba (0, 0, 0, 0,2); Box-Schatten: 2px 2px 0px rgba (0, 0, 0, 0,2); } / * Slideshow-Fotos * / #bigPhoto {height: 300px; z-Index: -1; }

Fertiges Produkt: Live Demo

Damit sind wir fertig! Schauen Sie sich in der Live-Demo um und sehen Sie unsere Kreation in Aktion.

Fazit

Hut ab vor dem Designer hinter Jessicas Website für die coole Idee, mehrere Diashows zu kombinieren. Durch das Duplizieren dieses Effekts wurde ein großartiges Tutorial zur Verwendung von HTML, CSS und JavaScript erstellt, um einfache, aber beeindruckende Diashows zu erstellen.

Stellen Sie sicher, dass Sie über das obige Beispiel hinausgehen und mit verschiedenen Layouts und Effekten experimentieren. Wenn Sie mehr Diashows hinzufügen, wird Ihre Seite mehr oder weniger blockiert, aber ansonsten sind Sie nur durch Ihre Kreativität eingeschränkt!