Erstellen Sie einen benutzerdefinierten Ganzseiten-Slider mit CSS und JavaScript

Blog

Erstellen Sie einen benutzerdefinierten Ganzseiten-Slider mit CSS und JavaScript

Ich arbeite viel mit benutzerdefinierten Vollbild-Layouts, praktisch täglich. Normalerweise implizieren diese Layouts ein erhebliches Maß an Interaktion und Animation. Egal, ob es sich um eine zeitgesteuerte komplexe Zeitleiste von Übergängen oder eine scrollbasierte benutzergesteuerte Reihe von Ereignissen handelt, in den meisten Fällen erfordert die Benutzeroberfläche mehr als nur die Verwendung einer sofort einsatzbereiten Plugin-Lösung mit ein paar Optimierungen und Änderungen . Andererseits sehe ich viele JavaScript-Entwickler neigen dazu, nach ihrem bevorzugten JS-Plugin zu greifen, um ihre Arbeit zu erleichtern, auch wenn die Aufgabe möglicherweise nicht alle Schnickschnack erfordert, die ein bestimmtes Plugin bietet.

Haftungsausschluss: Die Verwendung eines der vielen verfügbaren Plugins hat natürlich seine Vorteile. Sie erhalten eine Vielzahl von Optionen, mit denen Sie Ihre Bedürfnisse anpassen können, ohne viel programmieren zu müssen. Außerdem optimieren die meisten Plugin-Autoren ihren Code, machen ihn browser- und plattformübergreifend kompatibel und so weiter. Trotzdem erhalten Sie eine Bibliothek in voller Größe, die in Ihrem Projekt enthalten ist, möglicherweise nur für ein oder zwei verschiedene Dinge, die es bietet. Ich sage nicht, dass die Verwendung eines Plugins von Drittanbietern natürlich eine schlechte Sache ist, ich mache es täglich in meinen Projekten, nur dass es im Allgemeinen eine gute Idee ist, die Vor- und Nachteile jedes Ansatzes so abzuwägen, wie er ist eine gute Übung in der Codierung. Wenn es darum geht, Ihr eigenes Ding auf diese Weise zu machen, erfordert es etwas mehr Programmierkenntnisse und Erfahrung, um zu wissen, wonach Sie suchen, aber am Ende sollten Sie einen Code erhalten, der eine Sache und eine Sache nur so macht du willst es.

Dieser Artikel soll einen reinen CSS/JS-Ansatz bei der Entwicklung eines durch Scrollen ausgelösten Slider-Layouts im Vollbildmodus mit benutzerdefinierter Inhaltsanimation zeigen. In diesem verkleinerten Ansatz werde ich die grundlegende HTML-Struktur behandeln, die Sie von einem CMS-Backend erwarten würden, modernes CSS ( SCSS ) Layouttechniken und Vanilla-JavaScript-Codierung für volle Interaktivität. Da es sich um ein einfaches Konzept handelt, kann dieses Konzept leicht auf ein größeres Plugin erweitert und/oder in einer Vielzahl von Anwendungen ohne Abhängigkeiten im Kern verwendet werden.

Das Design, das wir erstellen werden, ist ein minimalistisches Architektenportfolio mit vorgestellten Bildern und Titeln jedes Projekts. Der komplette Slider mit Animationen sieht so aus:

Sie können die Demo ansehen Hier , und Sie können auf mein . zugreifen Github-Repository für weitere Details.

HTML-Übersicht

Hier ist also das grundlegende HTML, mit dem wir arbeiten werden:

suncoast sciences bioshield plus

Ein div mit der ID |_+_| ist unser Haupthalter. Im Inneren ist das Layout in Abschnitte unterteilt:

  • Logo (ein statischer Abschnitt)
  • Diashow, an der wir hauptsächlich arbeiten werden
  • Info (ein statischer Abschnitt)
  • Schieberegler-Navigation, die die derzeit aktive Folie sowie die Gesamtzahl der Folien anzeigt

Konzentrieren wir uns auf den Diashow-Bereich, da dies unser Interesse in diesem Artikel ist. Hier haben wir zwei Teile – hauptsächlich und von . Main ist das div, das vorgestellte Bilder enthält, während aux Bildtitel enthält. Die Struktur jeder Folie in diesen beiden Haltern ist ziemlich einfach. Hier haben wir eine Bildfolie im Inneren des Haupthalters:

hero-slider

Das Indexdatenattribut ist das, was wir verwenden, um zu verfolgen, wo wir uns in der Diashow befinden. Das ABS-Masken-Div, das wir verwenden, um einen interessanten Übergangseffekt zu erzeugen, und das Slide-Image-Div enthält das spezifische vorgestellte Bild. Bilder werden inline gerendert, als kämen sie direkt von einem CMS und werden vom Endbenutzer eingestellt.

Ebenso gleitet der Titel in den Aux-Halter:

Jeder Folientitel ist ein H2-Tag mit dem entsprechenden Datenattribut und einem Link, um auf die einzelne Seite dieses Projekts führen zu können.

Der Rest unseres HTML ist ebenfalls ziemlich einfach. Wir haben oben ein Logo, statische Informationen, die dem Benutzer mitteilen, auf welcher Seite er sich befindet, eine Beschreibung und eine aktuelle/Gesamt-Anzeige des Schiebereglers.

CSS-Übersicht

Der CSS-Quellcode ist geschrieben in SCSS , ein CSS-Präprozessor, der dann in normales CSS kompiliert wird, das der Browser interpretieren kann. SCSS bietet Ihnen den Vorteil, Variablen, verschachtelte Auswahl, Mixins und andere coole Dinge zu verwenden, aber es muss in CSS kompiliert werden, damit der Browser den Code so lesen kann, wie er sollte. Für die Zwecke dieses Tutorials habe ich verwendet Scout-App um das Kompilieren zu handhaben, da ich die Werkzeuge auf das absolute Minimum beschränken wollte.

Ich habe Flexbox verwendet, um das grundlegende Side-by-Side-Layout zu handhaben. Die Idee ist, auf der einen Seite die Diashow und auf der anderen den Infobereich zu haben.

## [#64 Paradigm](# '#64 Paradigm')

Ich habe den Hauptschieberegler so eingestellt, dass er absolut positioniert ist und die Hintergrundbilder mit den |_+_| . den gesamten Bereich dehnen lassen Eigentum. Um mehr Kontrast zu den Folientiteln zu bieten, habe ich ein absolutes Pseudoelement gesetzt, das als Overlay fungiert. Der Aux-Schieberegler mit den Folientiteln befindet sich am unteren Bildschirmrand und über den Bildern.

Da immer nur eine Folie gleichzeitig sichtbar ist, setze ich auch jeden Titel auf absolut und lasse die Haltergröße über JS berechnen, um sicherzustellen, dass es keine Abbrüche gibt, aber dazu mehr in einem unserer nächsten Abschnitte. Hier sehen Sie die Verwendung einer SCSS-Funktion namens Erweitern:

#hero-slider { position: relative; height: 100vh; display: flex; background: $dark-color; } #slideshow { position: relative; flex: 1 1 $main-width; display: flex; align-items: flex-end; padding: $offset; } #info { position: relative; flex: 1 1 $side-width; padding: $offset; background-color: #fff; } Let’s dive into the positioning and again, focus on the slideshow section: #slideshow { position: relative; flex: 1 1 $main-width; display: flex; align-items: flex-end; padding: $offset; } #slides-main { @extend %abs; &:after { content: ''; @extend %abs; background-color: rgba(0, 0, 0, .25); z-index: 100; } .slide-image { @extend %abs; background-position: center; background-size: cover; z-index: -1; } } #slides-aux { position: relative; top: 1.25rem; width: 100%; .slide-title { position: absolute; z-index: 300; font-size: 4vw; font-weight: 700; line-height: 1.3; @include outlined(#fff); } }

Da ich oft absolute Positionierung verwendet habe, habe ich dieses CSS in ein erweiterbares Format gezogen, um es in verschiedenen Selektoren leicht verfügbar zu haben. Außerdem habe ich ein Mixin namens outlined erstellt, um beim Stylen der Titel und des Haupt-Slider-Titels einen DRY-Ansatz zu bieten.

background-size: cover

Der statische Teil dieses Layouts ist nicht komplex, aber hier sehen Sie eine interessante Methode beim Positionieren von Text, der sich auf der Y-Achse anstelle seines normalen Flusses befinden muss:

%abs { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

Ich möchte Ihre Aufmerksamkeit auf die |_+_| . lenken Eigenschaft, da ich fand, dass sie für diese Art von Layout wirklich zu wenig genutzt wird. Dieses Element wird so positioniert, dass sein Anker in der oberen linken Ecke des Elements bleibt, den Drehpunkt festlegt und der Text kontinuierlich von diesem Punkt nach unten fließt, ohne dass es bei verschiedenen Bildschirmgrößen zu Problemen kommt.

Schauen wir uns einen interessanteren CSS-Teil an - die anfängliche Ladeanimation:

netgear ac1200 WLAN-Verstärker zurücksetzen

Normalerweise wird diese Art von synchronisiertem Animationsverhalten mithilfe einer Bibliothek erreicht - GSAP , zum Beispiel, ist eines der besten auf dem Markt, bietet hervorragende Rendering-Funktionen, ist einfach zu verwenden und verfügt über die Zeitleistenfunktionalität, die es dem Entwickler ermöglicht, Elementübergänge programmgesteuert ineinander zu verketten.

Da dies jedoch ein reines CSS/JS-Beispiel ist, habe ich mich entschieden, hier wirklich einfach vorzugehen. Jedes Element wird also standardmäßig auf seine Startposition gesetzt – entweder durch Transformation oder Opazität ausgeblendet und beim Laden des Schiebereglers angezeigt, der von unserem JS ausgelöst wird. Alle Übergangseigenschaften werden manuell angepasst, um einen natürlichen und interessanten Fluss zu gewährleisten, wobei jeder Übergang in einen anderen übergeht und ein angenehmes visuelles Erlebnis bietet.

@mixin outlined($color: $dark-color, $size: 1px) { color: transparent; -webkit-text-stroke: $size $color; }

Wenn Sie hier etwas sehen möchten, dann ist es die Verwendung des |_+_| Eigentum. Beim Verschieben eines HTML-Elements, sei es ein Übergang oder eine Animation, wird empfohlen, die |_+_| Eigentum. Ich sehe viele Leute, die dazu neigen, entweder Rand oder Padding oder sogar die Versätze – oben, links usw. – zu verwenden, was beim Rendern keine angemessenen Ergebnisse liefert.

Um ein tieferes Verständnis für die Verwendung von CSS beim Hinzufügen von interaktivem Verhalten zu erhalten, kann ich das nicht empfehlen folgender Artikel genug.

Es ist von Paul Lewis, einem Chrome-Ingenieur, und deckt so ziemlich alles ab, was man über Pixel-Rendering im Web wissen sollte, sei es CSS oder JS.

JavaScript-Übersicht und Slider-Logik

Die JavaScript-Datei ist in zwei verschiedene Funktionen unterteilt.

Die |_+_| -Funktion, die sich um alle Funktionen kümmert, die wir hier brauchen, und die |_+_|-Funktion, bei der ich mehrere wiederverwendbare Dienstprogrammfunktionen hinzugefügt habe. Ich habe jede dieser Dienstprogrammfunktionen kommentiert, um Kontext bereitzustellen, wenn Sie sie in Ihrem Projekt wiederverwenden möchten.

.slider-title-wrapper { position: absolute; top: $offset; left: calc(100% - #{$offset}); transform-origin: 0% 0%; transform: rotate(90deg); @include outlined; }

Als Randnotiz kann dieser Ansatz leicht angepasst werden, wenn Sie beispielsweise React verwenden, da Sie die Daten im Status speichern oder die neu hinzugefügten Hooks verwenden können. Um bei der Sache zu bleiben, lassen Sie uns einfach durchgehen, was jedes der Schlüssel-Wert-Paare hier darstellt:

  • Logo (ein statischer Abschnitt)
  • Diashow, an der wir hauptsächlich arbeiten werden
  • Info (ein statischer Abschnitt)
  • Schieberegler-Navigation, die die derzeit aktive Folie sowie die Gesamtzahl der Folien anzeigt

Bei der Initialisierung des Schiebereglers rufen wir zwei Funktionen auf:

transform-origin

Die |_+_| function greift auf eine Utility-Funktion zu, um die Höhe unseres Aux-Schiebereglers basierend auf der maximalen Titelgröße festzulegen. Auf diese Weise stellen wir sicher, dass eine angemessene Größe bereitgestellt wird und kein Folientitel abgeschnitten wird, selbst wenn der Inhalt in zwei Zeilen unterteilt ist.

Die Funktion loadingAnimation fügt dem Element eine CSS-Klasse hinzu, die die Intro-CSS-Übergänge bereitstellt:

#logo:after { transform: scaleY(0); transform-origin: 50% 0; transition: transform .35s $easing; } .logo-text { display: block; transform: translate3d(120%, 0, 0); opacity: 0; transition: transform .8s .2s, opacity .5s .2s; } .current, .sep:before { opacity: 0; transition: opacity .4s 1.3s; } #info { transform: translate3d(100%, 0, 0); transition: transform 1s $easing .6s; } .line { transform-origin: 0% 0; transform: scaleX(0); transition: transform .7s $easing 1s; } .slider-title { overflow: hidden; >span { display: block; transform: translate3d(0, -100%, 0); transition: transform .5s 1.5s; } }

Da unser Slider-Indikator das letzte Element in der CSS-Übergangszeitleiste ist, warten wir, bis der Übergang beendet ist und rufen die Startfunktion auf. Durch die Bereitstellung zusätzlicher Parameter als Objekt stellen wir sicher, dass dies nur einmal ausgelöst wird.

Schauen wir uns die Startfunktion an:

transform

Wenn das Layout also fertig ist, wird sein anfänglicher Übergang durch |_+_| . ausgelöst Funktion und die Startfunktion übernimmt. Es löst dann die Autoplay-Funktionalität aus, aktiviert die Radsteuerung, bestimmt, ob wir uns auf einem Touch- oder Desktop-Gerät befinden, und wartet auf den ersten Übergang der Titelfolie, um die entsprechende CSS-Klasse hinzuzufügen.

Automatisches Abspielen

Eine der Kernfunktionen in diesem Layout ist die Autoplay-Funktion. Gehen wir die entsprechende Funktion durch:

transform

Zuerst setzen wir das Autoplay-Flag auf true, um anzuzeigen, dass sich der Schieberegler im Autoplay-Modus befindet. Dieses Flag ist nützlich, wenn Sie bestimmen, ob die automatische Wiedergabe erneut ausgelöst werden soll, nachdem der Benutzer mit dem Schieberegler interagiert hat. Wir verweisen dann auf alle Slider-Elemente (Folien), da wir ihre aktive Klasse ändern und die Gesamtzahl der Iterationen berechnen, die der Slider haben wird, indem wir alle Elemente addieren und durch zwei teilen, da wir zwei synchronisierte Slider-Layouts haben (main und aux). aber nur ein Schieberegler an sich, der beide gleichzeitig ändert.

Der interessanteste Teil des Codes ist hier die Schleifenfunktion. Es ruft |_+_| auf und liefert die Gleitrichtung, die wir gleich durchgehen werden, aber die Schleifenfunktion wird ein paar Mal aufgerufen. Mal sehen warum.

Wenn das Anfangsargument als wahr ausgewertet wird, rufen wir die Schleifenfunktion als |_+_| . auf zurückrufen. Dies geschieht nur beim ersten Laden des Schiebers, der einen sofortigen Schieberwechsel auslöst. Verwenden von |_+_| Wir führen den bereitgestellten Callback kurz vor dem nächsten Frame-Repaint aus.

Die Hauptfunktion ist so codiert, dass sie zwei Zweige hat: |_+_| und |_+_|. Diese Verzweigungen sind durch Rückgabe der Hauptfunktion verfügbar und werden bei Bedarf aufgerufen. |_+_| ist die Initialisierung der Hauptfunktion und wird bei einem Fensterladeereignis ausgelöst. In ähnlicher Weise wird die Verzweigung zur Größenänderung bei der Größenänderung des Fensters ausgelöst. Der einzige Zweck der Größenänderungsfunktion besteht darin, die Schiebereglergröße des Titels bei der Größenänderung des Fensters neu zu berechnen, da die Schriftgröße des Titels variieren kann.

Im |_+_| -Funktion habe ich ein Slider-Objekt bereitgestellt, das alle Daten und Selektoren enthält, die wir benötigen:

Da wir jedoch weiterhin Folien im Autoplay-Modus durchgehen möchten, verwenden wir einen wiederholten Aufruf dieser Funktion. Dies wird normalerweise mit setInterval erreicht. Aber in diesem Fall verwenden wir eine der Hilfsfunktionen –|_+_|. Während |_+_| würde gut funktionieren, |_+_| ist ein fortschrittliches Konzept, das auf |_+_| . beruht und bietet einen leistungsfähigeren Ansatz. Es stellt sicher, dass die Funktion nur dann erneut ausgelöst wird, wenn der Browser-Tab aktiv ist.

Mehr zu diesem Konzept in diesem tollen Artikel finden Sie auf CSS-Tricks . Bitte beachten Sie, dass wir den Rückgabewert dieser Funktion unserem |_+_| . zuweisen Eigentum. Diese eindeutige ID, die die Funktion zurückgibt, steht uns zur Verfügung und wir verwenden sie, um die automatische Wiedergabe später mit |_+_| abzubrechen.

Folienwechsel

Die |_+_| Funktion ist die Hauptfunktion im gesamten Konzept. Es ändert Folien, egal ob durch Autoplay oder durch Benutzertrigger. Es kennt die Richtung des Schiebereglers und bietet Schleifen, sodass Sie beim Erreichen der letzten Folie mit der ersten Folie fortfahren können. So habe ich es codiert:

heroSlider

Die Idee ist, die aktive Folie basierend auf ihrem Datenindex zu bestimmen, den wir von HTML erhalten haben. Gehen wir jeden Schritt an:

Golang-Saite zum Schneiden
  1. Setzen Sie das Flag für den Leerlauf des Schiebereglers auf 'false'. Dies zeigt an, dass der Folienwechsel im Gange ist und die Rad- und Touch-Gesten deaktiviert sind.
  2. Die vorherige CSS-Klasse der Slider-Richtung wird zurückgesetzt und wir suchen nach der neuen. Der Richtungsparameter wird entweder standardmäßig als 'next' bereitgestellt, wenn wir von der Autoplay-Funktion kommen, oder von einer vom Benutzer aufgerufenen Funktion–|_+_| oder |_+_|.
  3. Basierend auf der Richtung berechnen wir den aktiven Folienindex und stellen dem Slider die aktuelle Richtungs-CSS-Klasse zur Verfügung. Diese CSS-Klasse wird verwendet, um zu bestimmen, welcher Übergangseffekt verwendet wird (z. B. von rechts nach links oder von links nach rechts).
  4. Slides erhalten ihren CSS-Klassenstatus (prev, active) mit einer anderen Hilfsfunktion zurückgesetzt, die CSS-Klassen entfernt, aber auf einer NodeList aufgerufen werden kann, anstatt nur ein einzelnes DOM-Element. Danach werden nur die vorherigen und derzeit aktiven Folien diese CSS-Klassen hinzugefügt. Dies ermöglicht es dem CSS, nur auf diese Folien abzuzielen und angemessene Übergänge bereitzustellen.
  5. |_+_| ist ein Callback, der den Slider-Indikator basierend auf dem activeIndex aktualisiert.
  6. Schließlich warten wir, bis der Übergang der aktiven Bildfolie beendet ist, um die |_+_| . auszulösen Rückruf, der Autoplay neu startet, wenn es zuvor vom Benutzer unterbrochen wurde.

Benutzersteuerung

Basierend auf der Bildschirmgröße habe ich zwei Arten von Benutzersteuerungen hinzugefügt – Rad und Touch. Radsteuerung:

utils

Hier hören wir sogar auf das Rad und wenn sich der Schieberegler gerade im Ruhemodus befindet (der gerade keinen Schieberwechsel animiert), bestimmen wir die Radrichtung, rufen |_+_| . auf um die automatische Wiedergabefunktion zu stoppen, wenn sie läuft, und die Folie je nach Richtung zu ändern. Die |_+_| function ist nichts anderes als eine einfache Funktion, die unser Autoplay-Flag auf den falschen Wert setzt und unser Intervall durch Aufrufen von |_+_| . aufhebt Utility-Funktion übergibt ihr das entsprechende Handle:

const slider = { hero: document.querySelector('#hero-slider'), main: document.querySelector('#slides-main'), aux: document.querySelector('#slides-aux'), current: document.querySelector('#slider-nav .current'), handle: null, idle: true, activeIndex: -1, interval: 3500 };

Ähnlich wie |_+_| haben wir |_+_| das kümmert sich um Touch-Gesten:

setHeight(slider.aux, slider.aux.querySelectorAll('.slide-title')); loadingAnimation();

Wir hören auf zwei Ereignisse: |_+_| und |_+_|. Dann berechnen wir die Differenz. Wenn ein negativer Wert zurückgegeben wird, wechseln wir zur nächsten Folie, da der Benutzer von rechts nach links gewischt hat. Ist der Wert hingegen positiv, was bedeutet, dass der Benutzer von links nach rechts gewischt hat, lösen wir |_+_| . aus mit Richtung wie zuvor übergeben. In beiden Fällen wird die Autoplay-Funktionalität gestoppt.

Dies ist eine ziemlich einfache Implementierung von Benutzergesten. Um darauf aufzubauen, könnten wir vorherige/nächste Schaltflächen hinzufügen, um |_+_| . auszulösen Klicken Sie auf oder fügen Sie eine Aufzählungsliste hinzu, um direkt zu einer Folie basierend auf ihrem Index zu gelangen.

Zusammenfassung und letzte Gedanken zu CSS

Also los geht's, eine reine CSS/JS-Methode zum Codieren eines nicht standardmäßigen Slider-Layouts mit modernen Übergangseffekten.

Ich hoffe, Sie finden diesen Ansatz als Denkweise nützlich und können etwas Ähnliches in Ihren Frontend-Projekten verwenden, wenn Sie für ein Projekt programmieren, das nicht unbedingt konventionell entworfen wurde.

Für diejenigen unter Ihnen, die sich für den Bildübergangseffekt interessieren, gehe ich in den nächsten Zeilen darauf ein.

Wenn wir uns die HTML-Struktur der Folien ansehen, die ich im Einführungsabschnitt bereitgestellt habe, sehen wir, dass jede Bildfolie ein |_+_| . hat um ihn herum mit der CSS-Klasse von |_+_|. Was ist das |_+_| bewirkt, dass ein Teil des sichtbaren Bildes um einen bestimmten Betrag ausgeblendet wird, indem |_+_| . verwendet wird und Versetzen in eine andere Richtung als das Bild. Wenn wir uns zum Beispiel die Codierung der vorherigen Folie ansehen:

setHeight

Die vorherige Folie hat einen Versatz von -100 % in ihrer X-Achse, wodurch sie nach links von der aktuellen Folie verschoben wird, jedoch das innere |_+_| div wird zu 80 % nach rechts verschoben, wodurch ein schmaleres Ansichtsfenster bereitgestellt wird. Dies in Kombination mit einem größeren Z-Index für das aktive Dia führt zu einer Art Abdeckungseffekt – das aktive Bild deckt das vorherige ab und erweitert gleichzeitig seinen sichtbaren Bereich durch Verschieben der Maske, die die Vollansicht ermöglicht.

#css #html #javascript

www.toptal.com

Erstellen Sie einen benutzerdefinierten Ganzseiten-Slider mit CSS und JavaScript

Erstellen Sie einen benutzerdefinierten Ganzseiten-Slider mit CSS und JavaScript - Dieses Tutorial zeigt, wie Sie einen Ganzseiten-Slider nur mit CSS und JavaScript erstellen, ohne Plugins oder aufgeblähte JS-Bibliotheken ...