Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. JavaScript

Wie man einen Split-Screen-Slider mit JavaScript erstellt

by
Read Time:3 minsLanguages:

German (Deutsch) translation by Jaques Donnez (you can also view the original English article)

Im heutigen Video-Tutorial zeige ich Ihnen, wie Sie mit JavaScript ein "Split-Screen"-Slider-Element (oder UI, wie immer Sie es nennen wollen) erstellen können. Die Inspiration dafür kam von einer Seite auf der Corsair-Website. Mal sehen, wie wir ein solches Element für unsere eigenen Projekte erstellen können.

Was wir bauen werden

Werfen wir zunächst einen Blick auf eine Demo dessen, was wir bauen. Sehen Sie sich das Projekt auf CodePen an, oder holen Sie sich die Quelldateien von GitHub.

Screencast ansehen

1. Bauen Sie Ihre Paneele

Wie wird dies nun gemacht? Beginnen Sie mit der Erstellung von zwei separaten Panels in Ihrem HTML-Markup. Ich habe zwei div-Elemente mit der Klasse panel verwendet. Das erste hat eine zusätzliche Klasse von bottom, das andere eine zusätzliche Klasse von top. Jedes enthält ein weiteres div, um den Inhalt zu umhüllen.

Fügen Sie beliebige Inhalte (Bilder, Überschriften usw.) in die content-Divs ein.

Fügen Sie dann vor dem abschließenden splitview-Tag ein neues div ein, das als Handle dient.

2. Hinzufügen einiger Stile zum Stapeln der Panels

Die ersten wichtigen Stile stapeln unsere beiden Tafeln übereinander und sorgen dafür, dass sie auch fließend sind.

Gestalten Sie jedes einzelne Panel - top und bottom - unterschiedlich, z. B. mit einer anderen background-color, und gestalten Sie die Inhalte darin nach Belieben. Eine Sache zu beachten ist der z-index von jedem, um sicherzustellen, dass sie in der richtigen Reihenfolge zu stapeln.

3. Anwenden einer einfachen Maske

Unser oberes Paneel verdeckt nun das darunter liegende vollständig. Wir wollen nun experimentieren, indem wir seine Breite verringern:

Sie sollten jetzt etwa so aussehen, wobei das obere Feld nur bis zur Mitte (50vw) der Seite reicht:

4. Startschuss für das JavaScript

Nun, da wir die Dinge mit CSS geklärt haben, wollen wir uns JavaScript zuwenden und sehen, ob wir den Effekt der gleitenden Maske animieren können. Wir beginnen damit, den Browser aufzufordern, eine Funktion auszuführen, aber erst, wenn das DOM geladen ist:

Der Rest unseres Codes wird innerhalb dieser Funktion zwischen den geschweiften Klammern stehen.

Als Nächstes weisen wir einige Variablen zu, indem wir das übergeordnete Element, das oberste Panel (das einzige, das wir ändern werden) und das Griffelement abrufen.

5. Bau des Griffs

Bevor wir weitermachen, sollten wir den Griff stylen.

Es ist ein 5px breiter gelber Balken, der die Höhe des Containers einnimmt und in der Mitte des Viewports platziert ist. Es hat einen z-index von 3, um sicherzustellen, dass es auf der Oberseite sitzt.

Bewegen Sie sich

Wir wollen die x-Koordinaten des Mauszeigers erfassen, wenn wir ihn im Ansichtsfenster bewegen. Dann wollen wir den Griff verschieben und die Breite des oberen Bereichs entsprechend diesen Koordinaten einstellen.

Wir beginnen mit einem Ereignis-Listener auf dem übergeordneten Element und setzen dann die left Stileigenschaft des Handles gleich dem event.clientX-Wert.

Das kümmert sich um unsere beweglichen Handle, lassen Sie uns jetzt die Größe des Panels, wieder so dass es gleich event.clientX.

Wir sind fertig!

Gut gemacht, dass Sie das Ende erreicht haben. Mit diesem relativ einfachen CSS und JavaScript haben wir einen brillanten Split-Screen-Schiebe-Masken-Effekt geschaffen. Um es weiter zu bringen, wie ich es im Video tue, können wir den Griff auch schräg stellen - sehen Sie sich die Demo auf CodePen an, um zu sehen, wie es erreicht wird!

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.