Zoom Effect & Convex Style Carousel Jquery
Diese css Slider-Vorlage für Website-Slideshows ist schlicht und aufgeräumt, aber enthält eine Prise organische Bewegung, die verhindert, dass sie sich zu kalt und steril anfühlt. Die Verwendung von Dunkelgrau und Türkis ist stylisch und attraktiv, und führt zu einem Farbschema, das flexibel genug ist, um für eine breite Palette von Websites verwendet werden zu können.
Das Carousel selbst ist groß und quadratisch, was für ein Maximum an Wirkung sorgt, genau wie für Einsatzmöglichkeiten der Vorlage zusammen mit einer großen Auswahl an Bildern (nicht nur im Querformat). Es gibt keinen Rand und keinen Schatteneffekt, was bedeutet, dass die Vorlage vor jeder Hintergrundfarbe eingesetzt werden kann. Sie fügt der Slideshow außerdem ein sauberes und schlichtes Aussehen hinzu.
Jedes Bild dieses Carousels, das ohne jQuery auskommt, wird eingeblendet, während die ‚Kamera‘ langsam herauszoomt. Das Bild pausiert für einen Moment, wird dann ausgeblendet und zoomt in die entgegengesetzte Richtung. Der Übergangseffekt ist stufenlos und attraktiv, ohne besonders kompliziert und ablenkend zu sein.
Es gibt zwei Wege, durch die Slideshow zu navigieren. Der erste erfolgt mithilfe der Navigationspfeile. Diese Pfeile erscheinen nur, wenn Sie die Maus über die Slideshow bewegen. Ein dünner türkiser Pfeil befindet sich im Zentrum des dunkelgrauen Quadrats. Dieses Quadrat wird eingeblendet und schiebt sich an seinen Platz, wenn der Benutzer die Maus über die Slideshow bewegt, und erhebt sich und wird ausgeblendet, wenn der Benutzer die Interaktion mit der Slideshow beendet.
Wenn der Benutzer die Maus über den Pfeil bewegt, zeigt sich ein weiterer interessanter Effekt. Das Quadrat ‚kippt um‘ wie ein Würfel und kippt dabei auf eine andere Seite, auf der die Farben invertiert sind. Auch diesmal ist es ein schlichter Effekt, der darauf abzielt, diese Vorlage von der Masse abzuheben.
Der zweite Weg durch die Slideshow zu navigieren führt über die kleinen Quadrate unten im Zentrum des Carousels jQuery. Jedes Quadrat repräsentiert einen Slide in der Slideshow und wenn Sie die Maus darüber bewegen, öffnet sich eine Vorschau dieses Slides. Ein Klick auf das Quadrat erlaubt es Ihnen, sofort zu diesem Bild zu springen.
Diese Quadrate sind ebenfalls grau und der Slide, welcher den aktuellen Slide repräsentiert, ist türkis. Ein ähnlicher Effekt wie bei den Navigationspfeilen wird bei den Quadraten verwendet: Wenn der Benutzer die Maus über eines von ihnen bewegt, dreht es sich wie ein Würfel und zeigt eine andere ‚Seite‘ in Türkis.
Schließlich gibt es noch den Titel in der rechten unteren Ecke der Slideshow. Dieser Titel besteht aus zwei Teilen, der Haupttitel besteht nur aus Großbuchstaben und der Untertitel ist normal gesetzt. Jeder Titel besteht aus türkiser Schrift vor einem dunkelgrauen Quadrat. Diese Quadrate ‚poppen‘mit nur einem kleinen ‚Zurückprallen‘ am Ende an ihren Platz, was der Bewegung ein sehr organisches und natürliches Gefühl verleiht.
Die Titel verwenden die Schriftart ‚Gurajada‘, eine saubere Schriftart, die ein handgeschriebenes Gefühl beibehält. Sie ist einfach zu lesen und funktioniert sehr gut mit dieser schlicht, minimalistisch aber organisch aussehenden Vorlage.
Das Carousel verwendet pures CSS3 für alle Übergangseffekte, jQuery, Javascript oder gar UI-Bilder werden nicht verwendet. In der Folge lädt das Carousel schnell, sogar bei langsamen Verbindungen. Es ist außerdem vollständig responsiv und funktioniert auf Tablets und Smartphones. Es ist die perfekte, ohne jQuery auskommende Carousel-Vorlage für eine moderne Website.
Falls Sie ein Slideshow-Theme für Ihre Website suchen, die unaufdringlich elegant wirkt, müssen Sie nicht weiter suchen, denn Sie haben diese wunderschöne Vorlage von cssSlider bereits gefunden.
Die Slideshow ist geschmeidig, sauber und minimalistisch, doch die Verwendung von Türkis und Dunkelgrau gibt dem Design Wärme und eine Prise Stil, der minimalistischen Designs oft fehlt. Diese Wärme wird von der Verwendung der Schriftart ‚Gurajada‘ unterstützt, eine saubere, handschriftlich wirkende Schriftart, die gut mit dieser Vorlage funktioniert.
Wie bei allen Slideshow-Vorlagen von cssSlider ist die Vorlage zu 100% in CSS geschrieben – weder jQuery noch Javascript werden verwendet und keine Bildsymbole machen Ihre Website langsam. Das Ergebnis ist ein Theme, das blitzschnell ist und extrem flüssige Übergänge bietet.
Die Slideshow ist vergleichsweise groß und nahezu quadratisch – ideal für eine Website, welche den Fokus auf die Bilder legen will.
Wenn Sie das erste Mal einen Blick auf die Slideshow werfen, sehen Sie die ‚Bullet Navigation‘ unten in der Mitte des Bildes, während sich der Titel in der rechten unteren Ecke befindet.
Die Bullet Navigation besteht aus dunkelgrauen Quadraten. Jedes davon repräsentiert ein Bild in der Slideshow. Wenn das Bild aktiv ist, färbt sich das Quadrat türkis. Wenn Sie die Maus über ein Quadrat bewegen, öffnet sich eine Vorschau des entsprechenden Bildes und ein Klick auf das Quadrat lädt dieses Bild in die Slideshow – was es dem Benutzer ermöglicht, alle Bilder bis zu dem Bild zu überspringen, das ihn am meisten interessiert.
Der Titel besteht aus zwei dunkelgrauen Kästen, einer für einen Haupttitel und einer für einen Untertitel. Diese ‚poppen‘ mit jedem neuen Bild an ihren Platz, der Übergangseffekt ist fließend und organisch und enthält einen kleinen ‚zurückprall‘-Effekt am Ende. Der Text ist türkis, wobei der Haupttitel in Großbuchstaben und der Untertitel in einer kleineren Schriftgröße gesetzt ist.
Wenn Sie die Maus über die Slideshow bewegen, öffnen sich zusätzliche Navigationsoptionen. Zwei dunkelgraue Quadrate fallen an ihre Positionen auf jeder Seite der Slideshow. Sie besitzen eine türkise Pfeilspitze und wenn Sie die Maus darüber bewegen, kippen sie um wie ein Würfel und zeigen eine Seite mit invertierten Farben.
Ein Klick auf die Pfeilspitze erlaubt es dem Benutzer, durch die Bilder der Slideshow zu navigieren.
Der Übergangseffekt der Bilder in der Slideshow ist eine kurze Überblendung. Das erste Bild wird ausgeblendet und zoomt aus, während das neue Bild eingeblendet wird und einzoomt. Das Ergebnis ist schlicht aber effektiv, ohne dass die Überblendung die Aufmerksamkeit von den Bildern ablenkt.
Durch das saubere Design und die elegante Einfachheit wäre diese Theme großartig für Websites geeignet, die Luxusprodukte wie Automobile, Juwelen oder hochwertiges Essen verkaufen. Fashion-Websites können ebenso von der Größe der Bilder und der Art profitieren, wie das Theme es Bildern erlaubt, den Großteil der Aufmerksamkeit auf sich zu ziehen.
Technologie-Websites werden ebenfalls von der modernen Machart profitieren, welche die Vorteile von CSS3 und HTML5 nutzt.