Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Erstellen Sie das perfekte Karussell, Teil 1

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Create the Perfect Carousel.
Create the Perfect Carousel, Part 2

German (Deutsch) translation by Jeane Jade (you can also view the original English article)

Karussells sind eine Heftklammer von streaming-und e-commerce-Websites. Amazon und Netflix nutzen Sie Sie als Prominente Navigations-tools. In diesem tutorial werden wir bewerten das interaction design der beiden, und nutzen unsere Erkenntnisse umzusetzen, die perfekte Karussell. 

In dieser tutorial-Reihe werden wir auch lernen Sie einige Funktionen von Popmotion, eine JavaScript-motion-engine. Es bietet Animations-tools wie tweens (nützlich bei der Paginierung), pointer-tracking (zum scrollen), und im Frühjahr Physik (für unsere herrliche Schliff.) 

Teil 1 wird bewertet, wie Amazon und Netflix haben, umgesetzt zu scrollen. Wir werden es dann umsetzen, ein Karussell, die kann gerollt werden, die über die touch. 

 Am Ende dieser Serie haben wir umgesetzt-Rad und touchpad scrollen, Paginierung, Fortschrittsbalken, Tastatur-navigation, und einige kleine Extras mit spring Physik. Wir werden auch ausgesetzt gewesen, einige grundlegende funktionale Komposition.

Perfekt? 

 Was braucht es für ein Karussell "perfekt"? Es muss zugänglich sein durch:

  •  Maus: Sie sollte zurück und weiter-Tasten sind einfach zu klicken, und nicht den obskuren Inhalt.
  •  Note: Es sollte die Länge der finger, und dann Blättern Sie mit der gleichen Dynamik, wie wenn Sie den finger vom Bildschirm.
  •  Scroll-Rad: Oft übersehen, die Apple Magic Mouse und viele laptop-trackpads anbieten, glatten, horizontalen scrollen. Wir sollten nutzen Sie diese Möglichkeiten!
  •  Tastatur: Viele Nutzer möchten nicht, oder nicht in der Lage sind, eine Maus für die navigation. Es ist wichtig, wir machen unser Karussell zugänglich, so dass diese Benutzer können die Nutzung unseres Produkts zu.

 Schließlich werden wir die Dinge nehmen, dass zusätzlichen Schritt weiter und machen dies zu einem selbstbewussten, herrliches Stück UX, indem Sie das Karussell reagieren Sie klar und intuitiv mit dem Frühling Physik, wenn Sie den regler das Ende erreicht hat.

 Setup

 Lassen Sie uns zuerst einmal die HTML-und CSS-notwendig für den Aufbau einer rudimentären Karussell durch " forking in diesem CodePen.

 Der Stift ist mit Sass für CSS preprocessing und Babel für transpiling ES6 JavaScript. Ich habe auch enthalten Popmotion, die zugegriffen werden können, mit Fenster.popmotion.

 Sie können kopieren Sie den code, um ein lokales Projekt, wenn Sie es vorziehen, aber Sie müssen, um sicherzustellen, dass Ihre Umgebung unterstützt Sass und ES6. Sie müssen auch zu installieren Popmotion mit npm installieren popmotion.

 Erstellen Sie ein Neues Karussell

 Auf einer Seite, die wir vielleicht haben viele Karussells. Wir brauchen also eine Methode zu Kapseln, die den Zustand und die Funktionalität der einzelnen.

 Ich werde eine factory-Funktion eher als eine Klasse. Factory-Funktionen vermeiden, die Notwendigkeit der Verwendung der oft verwirrenden dieses Schlüsselwort und vereinfachen Sie den code für die Zwecke dieses Tutorials.

Im JavaScript-editor, fügen Sie die folgende einfache Funktion: 

 Wir werden um unsere Karussell-spezifischen code, der in diesem Karussell Funktion.

Das Hows und Whys von Blättern 

 Unsere erste Aufgabe ist es, das Karussell zu Blättern. Es gibt zwei Wege, die wir gehen könnten:

Native Browser Scrollen 

 Die offensichtliche Lösung wäre, um overflow-x: scroll auf den Schieberegler. Dies würde es erlauben, native scrollen auf allen Browsern, einschließlich touch und horizontalen Maus-Rad-Geräten.

Es gibt jedoch Nachteile dieses Ansatzes: 

  •  Inhalte außerhalb der container würden nicht sichtbar sein, die Einschränkungen für unsere design.
  • Es begrenzt auch die Möglichkeiten, wir können Animationen verwenden, um anzugeben, haben wir das Ende erreicht. 
  •  Desktop-Browser wird eine hässliche (aber erreichbar!) die horizontale Bildlaufleiste.

Alternativ: 

Animieren translateX 

 Wir könnten auch animieren, Karussell translateX-Eigenschaft. Das wäre sehr vielseitig, so würden wir in der Lage sein zu implementieren, die genau das design wie wir es wollen. translateX-ist auch sehr performant, da im Gegensatz zu den CSS left-Eigenschaft, es kann behandelt werden, indem das Gerät die GPU.

 Auf der Kehrseite, wir hätten zu implementieren-scrolling-Funktionalität mit JavaScript. Das ist mehr Arbeit, mehr code.

Wie Amazon und Netflix Ansatz Scrollen? 

Amazon und Netflix Karussells, verschiedene trade-offs bei der Annäherung an dieses problem. 

 Amazon animiert, Karussell left-Eigenschaft, wenn in "desktop" - Modus. Animation Links ist eine unglaublich schlechte Wahl, da änderung löst ein layout Neuberechnung. Dies ist CPU-intensiv, und ältere Maschinen kämpfen, um die Treffer 60fps.

 Wer die Entscheidung getroffen zu animieren linken statt translateX muss ein echter idiot (spoiler: es war mir, wieder in 2012. Wir waren nicht so aufgeklärt in jenen Tagen.)

Wenn es feststellt, dass ein touch-Gerät, das Karussell nutzt der browser die native scrollen.   Das problem mit dem nur damit diese in "mobile" - Modus ist die desktop-Benutzer mit der horizontalen scroll-Räder verpassen. Es bedeutet auch, Inhalte außerhalb der Karussell wird optisch abgeschnitten:

Screenshot of Amazon illustrating lack of design bleed

 Netflix richtig animiert, Karussell translateX-Eigenschaft, und Sie tut es auf allen Geräten. Dies ermöglicht Ihnen, ein design, Blutungen außerhalb der Karussell:

Screenshot of Netflix carousel illustrating design bleed

 Dies wiederum ermöglicht es Ihnen, um ein schickes design, wo die Objekte werden vergrößert, die außerhalb der x-und y-Kanten, das Karussell und die umliegenden Objekte bewegen sich auf Ihre Weise:

Screenshot of Netflix carousel illustrating enlarged item

 Leider, Netflix-ist die Neuimplementierung von scrollen auf touch-Geräten ist unbefriedigend: es verwendet eine Geste-basierte Paginierung system, das fühlt sich langsam und schwerfällig. Es gibt auch keine Gegenleistung für die horizontale scroll-Räder.

Wir können es besser machen. Let ' s code! 

Scrollen Wie ein Profi 

 Unsere erste Maßnahme ist, greifen die .slider-Knotens. Während wir gerade dabei sind, lasst uns greifen die Elemente, die es enthält, damit wir herausfinden können, ist der regler der dimension.

Die Messung der Karussell 

 Wir können herausfinden, den sichtbaren Bereich des Schiebereglers durch die Messung der Breite:

 Wir wollen auch die Gesamtbreite aller darin enthaltenen Elemente. Um unsere Karussell-Funktion relativ sauber ist, lassen wir diese Berechnung in eine separate Funktion an der Spitze unserer Datei.

 Durch die Verwendung getBoundingClientRect zur Messung der Links-Versatz unserer ersten Artikel und den richtigen Versatz zu unserer letzten Punkt können wir den Unterschied zwischen Ihnen zu finden, die die gesamte Breite aller Elemente.

Nach unserer sliderVisibleWidth Messung schreiben: 

 Wir können jetzt herausfinden, die maximale Entfernung unser Karussell erlaubt sein sollte, um zu scrollen. Es ist die Gesamtbreite alle unsere Gegenstände, abzüglich einer vollen Breite unserer sichtbaren Schieberegler.  Dieser enthält eine Nummer, die den am weitesten rechts stehenden Element der Angleichung an das Recht unserer regler:

 Mit diesen Messungen im Ort, wir sind bereit zu starten, Blättern Sie unser Karussell.

Einstellung translateX 

 Popmotion kommt mit einem CSS-renderer für die einfache und performante Einstellung von CSS-Eigenschaften. Es kommt auch mit einem value-Funktion, die verwendet werden können, um track-Nummern, und, was noch wichtiger ist (wie wir bald sehen werden), um die Abfrage Ihrer Geschwindigkeit.

 An der Spitze der JavaScript-Datei, importieren Sie Sie in etwa so:

Dann, auf der Linie, nachdem wir uns gesetzt minXOffset, erstellen Sie eine CSS-renderer für unsere Schieberegler: 

 Und erstellen einen Wert zu verfolgen, unsere Schieberegler die x-Verschiebung und update des Fader translateX-Eigenschaft, wenn es änderungen:

Jetzt, bewegen Sie den Schieberegler horizontal ist so einfach wie das schreiben: 

Probieren Sie es aus! 

- Touch-Scroll 

 Wir wollen, dass unsere Karussell zu starten, scrollen, wenn ein Benutzer den Schieberegler horizontal und um das scrollen zu stoppen, wenn ein Benutzer aufhört, den Bildschirm zu berühren. Unsere event-Handler sieht dann so aus:

In unserem startTouchScroll Funktion, die wir wollen: 

  • Beenden Sie alle anderen Aktionen einschalten sliderX. 
  • Finden Sie die Herkunft touch-point. 
  •  Hören Sie sich das nächste touchmove-Ereignis, um festzustellen, ob der Benutzer ziehen vertikal oder horizontal.

Nach dem Dokument.addEventListener hinzufügen: 

 Dies wird stop-alle anderen Aktionen (wie der Physik-powered Schwung scrollen, wir werden implementieren in stopTouchScroll) aus dem bewegen des Schiebereglers. Dies ermöglicht es dem Nutzer, sofort "fangen" Sie den Schieberegler, wenn es scrollt ein Gegenstand oder Titel, die Sie möchten, klicken Sie auf.

 Als Nächstes benötigen wir das speichern des origin-touch-point. Das wird es uns ermöglichen zu sehen, wo sich der Benutzer bewegt den finger weiter.  Wenn es eine vertikale Bewegung, wir werden ermöglichen das verschieben der Seite, wie üblich. Wenn es eine horizontale Bewegung, wir werden scrollen Sie den Schieberegler, statt.

Wollen wir teilen diese touchOrigin zwischen event-Handler. So nach und nach lassen Handlung; hinzufügen: 

Zurück in unserem startTouchScroll handler hinzufügen: 

 Wir können jetzt hinzufügen eines touchmove-Ereignis-listener, um das Dokument zu bestimmen, die Richtung ziehen, die basierend auf dieser touchOrigin:

 Unsere determineDragDirection-Funktion zu Messen, die nächste touch-Standort, überprüfen, es hat sich tatsächlich bewegt, und, wenn ja, Messen Sie den Winkel, um festzustellen, ob es vertikal oder horizontal:

 Popmotion enthält einige hilfreiche Rechner für die Dinge zu Messen, wie der Abstand zwischen zwei x - /y-Koordinaten. Können wir diese importieren und so:

 Dann Messen Sie den Abstand zwischen zwei Punkten ist eine Frage der Entfernung-Rechner:

 Nun, wenn der touch verschoben hat, können wir unset dieser Ereignis-listener.

 Messen Sie den Winkel zwischen den beiden Punkten mit dem Winkel-Rechner:

 Wir können diese nutzen, um festzustellen, ob dieser Winkel ist eine horizontale oder vertikale Winkel, indem Sie die folgende Funktion. Fügen Sie diese Funktion, um die Spitze der Datei:

 Diese Funktion gibt true zurück, wenn der angegebene Winkel ist in -90 +/- 45 Grad (gerade) oder 90 +/-45 Grad (senkrecht nach unten.) So können wir hinzufügen, ein weiterer return-Klausel, wenn diese Funktion den Wert true zurück.

Pointer Tracking 

 Jetzt wissen wir, die Nutzer versuchen, zu navigieren, das Karussell, können wir beginnen tracking Ihre finger. Popmotion bietet eine pointer-Aktion, wird die Ausgabe der x/y-Koordinaten des Maus-oder touch-Zeiger.

Importieren Sie zuerst Zeiger: 

Verfolgen Sie die touch-Eingabe, geben Sie die verursachenden Ereignis zu Zeiger: 

 Wir möchten, Messen Sie die anfangs-x-position des Mauszeigers und eine Bewegung des Schiebereglers. Für, die, können wir mit einem Transformator genannt applyOffset.

 Transformatoren sind Reine Funktionen, die einen Wert erhalten, und schicken Sie es—ja—transformiert. Zum Beispiel: const double = (v) => v * 2.

 applyOffset ist eine Curry-Funktion. Dies bedeutet, dass, wenn wir es nennen, es schafft eine neue Funktion, die kann dann übergeben werden, einen Wert.  Wir ersten Aufruf mit einer Zahl wollen wir Messen den Abstand, in diesem Fall der aktuelle Wert der Aktion.x, und eine Anzahl zu übernehmen, ausgeglichen. In diesem Fall, das ist unsere sliderX.

Also unsere applyOffset Funktion wie folgt Aussehen wird: 

 Wir können nun diese Funktion in der pointer-output-callback anwenden Zeiger die Bewegung auf den Schieber.

Stoppen, Mit Stil 

 Das Karussell ist nun ziehbar Tippen! Sie können dies testen, indem Sie mit dem Geräte-emulation in Chrome die Entwickler-Tools.

 Es fühlt sich ein wenig kitschige, richtig? Sie haben vielleicht festgestellt das scrollen fühlt sich das so vor: Sie heben den finger, und das scrollen Stoppt tot. Oder das scrolling Stoppt tot und dann eine kleine animation übernimmt, um gefälschte eine Fortsetzung des scrollen. 

 Wir gehen nicht zu tun. Wir können die Physik-action in Popmotion, um die wahre Geschwindigkeit der sliderX und gelten Reibung, um es über eine Dauer von Zeit.

 Zunächst fügen Sie es zu unserer ständig wachsenden Liste der Importe:

Dann, am Ende unserer stopTouchScroll Funktion hinzufügen: 

 Hier, von und Geschwindigkeit werden mit dem aktuellen Wert und die Geschwindigkeit der sliderX. Dies stellt sicher, dass unsere Physik-simulation hat die gleichen Initialen Ausgangsbedingungen, wie der Benutzer die Drag-Bewegung.

 Reibung wird als 0.2. Reibung wird als ein Wert von 0 bis 1, wobei 0 für keinerlei Reibung und 1 absolute Reibung.  Versuchen Sie spielen, um mit diesem Wert, um zu sehen, die änderung, die es macht, um das "feeling", das Karussell, wenn ein Benutzer aufhört, zu ziehen.

 Bei kleineren zahlen wird es leichter fühlen, und größere zahlen machen die Bewegung schwerer. Für eine Scroll-Bewegung, ich fühle 0.2 trifft eine schöne balance zwischen fahrig und träge.

 Grenzen

 Aber es gibt ein problem! Wenn Sie bereits gespielt haben, um mit Ihrem neuen touch-carousel, das ist klar. Wir haben noch nicht begrenzt Bewegung, machen es möglich, buchstäblich werfen Sie Ihr Karussell entfernt!

 Es ist ein weiterer Transformator für diese Arbeit spannen. Dies ist auch eine Curry-Funktion, was bedeutet, wenn wir rufen es mit einem min und max Wert, sagen wir 0 und 1, wird es wieder eine neue Funktion.  In diesem Beispiel, die neue Funktion zu beschränken-Nummer gegeben, es ist zwischen 0 und 1: 

 Importieren Sie zuerst clamp:

Wir wollen mit dieser Klemmfunktion über unser Karussell, so fügen Sie diese Zeile, nachdem wir definieren minXOffset: 

Wir ändern die beiden Ausgabe haben wir über unsere Aktionen mit einige leichte funktionelle Zusammensetzung mit dem Rohr Transformator. 

Rohr 

 Wenn wir eine Funktion aufrufen, schreiben wir es wie folgt:

 Wenn wir wollen, zu geben, die Ausgabe der Funktion zu einer anderen Funktion, die wir schreiben könnte, wie diese:

 Das wird etwas schwer zu Lesen, und es wird nur noch schlimmer, da wir mehr und mehr Funktionen.

Mit Rohr, wir können erstellen Sie eine neue Funktion aus foo und bar, die wir wiederverwenden können: 

 Es ist auch geschrieben in einem natürlichen start -> beenden-Ordnung, die macht es leichter zu Folgen. Wir können diese verwenden, um zu Komponieren applyOffset und spannen in einer Funktion. Import-Rohr:

Ersetzen Sie die output-callback unserer Zeiger mit: 

Und ersetzen die Ausgabe Rückruf der Physik mit: 

Diese Art der funktionalen Zusammensetzung kann ganz ordentlich erstellen von beschreibenden, Schritt-für-Schritt-Prozesse aus kleineren, wiederverwendbaren Funktionen. 

 Nun, wenn Sie ziehen Sie und werfen Sie das Karussell, es wird nicht budge außerhalb seiner Grenzen.

 Das abrupte stoppen ist nicht sehr befriedigend. Aber das ist ein problem für einen späteren Teil!

Fazit 

 Das ist alles für Teil 1. Bisher haben wir einen Blick auf bestehende Karussells zu sehen, die stärken und Schwächen der verschiedenen Ansätze zu scrollen.  Wir habe verwendet, Popmotion das input-tracking und Physik, um performant zu animieren unser Karussell translateX-mit-touch-scrollen. Wir haben auch eingeführt worden, um die funktionale Zusammensetzung und Curry-Funktionen.

Können Sie sich eine kommentierte version der "story so far" auf diesem CodePen

In den kommenden teilen, die wir betrachten werden: 

  • das scrollen mit Mausrad 
  • nachmessen das Karussell, wenn das Fenster skaliert 
  • die Paginierung, mit Tastatur-und Maus-Barrierefreiheit 
  •  reizvolle Details, mit Hilfe von Feder-Physik

Freue mich, Euch dort zu sehen! 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.