Mobile Geräte werden zunehmend durch Desktop-Computer ersetzt, und dieser Trend hat Auswirkungen auf die Entwicklung von Websites. Benutzer erwarten jedoch von Websites maximale Funktionalität und Benutzerfreundlichkeit, einschließlich der Möglichkeit, Swipe-Gesten zu verwenden.
Ein Swipe ist eine Geste auf Touchscreens, bei der der Benutzer mit dem Finger oder der Rückseite seiner Hand in horizontaler oder vertikaler Richtung über den Bildschirm gleitet. Mit dieser Geste können Sie schnell und bequem durch Inhalte auf der Website blättern, verschiedene Menüs öffnen, zwischen Seiten wechseln und andere Aktionen ausführen.
Sie können JavaScript-Bibliotheken wie Hammer verwenden, um Swipe auf Ihrer Website zu implementieren.js, Flickity oder Swiper. Sie bieten fertige Lösungen zum Erstellen einer Streichen-Schnittstelle und ermöglichen die Kompatibilität mit verschiedenen Gerätetypen und Browsern.
Was ist ein Swipe?
Streichen ist eine der grundlegenden Gesten, die in mobilen Apps und Websites mit responsivem Design zum Navigieren durch Inhalte verwendet werden.
Normalerweise wird Swipe verwendet, um:
- umschalten von Folien in einer Galerie oder einem Karussell;
- Zurückspulen von Inhalten in einer Scrollbar oder einer Liste;
- öffnen von Menüs oder Dropdown-Bereichen;
- schließen von Popup-Fenstern und Dialogfeldern;
- zur vorherigen oder nächsten Seite wechseln;
- und viele andere Aktionen.
Swipe ermöglicht es Benutzern, bequem und schnell mit der Schnittstelle zu interagieren, insbesondere auf Touchscreen-Geräten mit einem kleinen Bildschirm.
Die wichtigsten Methoden des Streichen
Es gibt mehrere grundlegende Methoden zum Implementieren von Swipe auf einer Website:
- Verwenden von Touch-Ereignissen. Touch-Ereignisse ermöglichen es Ihnen, Ereignisse zu verfolgen, die Sie mit dem Finger auf den Bildschirm berühren und sich darauf bewegen. Um Swipe zu implementieren, müssen Sie Touch-Ereignisse verfolgen und entsprechend behandeln.
- Verwenden Sie eine Bibliothek oder ein Framework. Viele Bibliotheken und Frameworks bieten fertige Lösungen für die Implementierung von Swipe. Sie stellen APIs und vorgefertigte Komponenten bereit, mit denen Sie Streichen einfach zu einer Website hinzufügen können, ohne selbst komplexen und mehrzeiligen Code schreiben zu müssen.
- Verwendung von CSS-Animationen. Mit CSS-Animationen können Sie einen Swipe-Effekt erstellen, ohne JavaScript zu verwenden. Dazu können Sie die transform-Eigenschaft und ihren translateX-Wert verwenden, um das Element horizontal zu verschieben. Wenn Sie der transform-Eigenschaft eine Animation hinzufügen und ihren Wert ändern, können Sie einen glatten Streichen-Effekt erzeugen.
Die Wahl einer bestimmten Swipe-Methode hängt von den Anforderungen des Projekts, seiner Komplexität und der Gesamtarchitektur der Website ab. Jede dieser Methoden hat ihre eigenen Vorzüge und Einschränkungen, daher ist es wichtig, die für den jeweiligen Fall am besten geeignete zu wählen.
Horizontales Streichen auf der Website
Ein horizontaler Swipe ist eine Geste, die Benutzer auf berührungsempfindlichen Geräten ausführen können, um sich entlang der horizontalen Achse einer Website zu bewegen. Es ermöglicht Ihnen, eine Seite zu navigieren oder den Inhalt horizontal zu scrollen.
Um ein horizontales Streichen auf einer Website zu implementieren, müssen Sie JavaScript oder Bibliotheken wie jQuery oder Hammer verwenden.js. Im Folgenden sind die grundlegenden Schritte aufgeführt:
-
Schließen Sie die erforderlichen JavaScript-Dateien auf Ihrer Website an. Wenn Sie beispielsweise jQuery verwenden, fügen Sie den folgenden Code hinzu:
.swipe-container
$(".swipe-container").on("swipeleft", function(event) <$(this).animate(< scrollLeft: "+=200" >, "slow");>);$(".swipe-container").on("swiperight", function(event) <$(this).animate(< scrollLeft: "-=200" >, "slow");>);Jetzt wird Ihre Website über eine horizontale Swipe-Funktionalität verfügen. Sie können die Scrollgeschwindigkeit und andere Optionen je nach Ihren Bedürfnissen anpassen. Stellen Sie sicher, dass Sie Swipe auf verschiedenen Geräten und Browsern testen, um sicherzustellen, dass es ordnungsgemäß funktioniert.
Vertikales Streichen auf der Website
Sie können JavaScript und CSS verwenden, um einen vertikalen Streichen auf Ihrer Website zu erstellen. Sie müssen Ereignishandler hinzufügen, um die Fingerbewegung des Benutzers zu verfolgen und die Position des Inhalts entsprechend dieser Bewegung zu ändern.
Der Code für die Implementierung eines vertikalen Streichen würde ungefähr so aussehen:
// HTMLСодержимое 1
Содержимое 2
Содержимое 3
Содержимое 4
// CSS.wrapper .content // JavaScriptconst wrapper = document.querySelector(".wrapper");let startY;let startScrollTop;wrapper.addEventListener("touchstart", (e) => );wrapper.addEventListener("touchmove", (e) => 1) return;const touch = e.touches[0];const deltaY = touch.clientY - startY;wrapper.scrollTop = startScrollTop - deltaY;>);In diesem Beispiel haben wir einen Wrapper mit der Klasse "wrapper" und dem darin enthaltenen Inhalt erstellt, der sich in der Klasse "content" befindet. Der Wrapper hat eine feste Höhe und einen "overflow-y: scroll" -Stil, damit der Inhalt bei Bedarf vertikal gescrollt werden kann.
Dann haben wir dem Wrapper die Ereignishandler "touchstart" und "touchmove" hinzugefügt. Wenn wir streichen, speichern wir die Anfangskoordinaten der Berührung und die Position des Scrolls. Beim Streichen berechnen wir den Unterschied zwischen den Startkoordinaten und den aktuellen Berührungskoordinaten und ändern die Position des Scrolls entsprechend diesem Unterschied.
Auf diese Weise kann der Benutzer mit einem vertikalen Swipe den Inhalt auf der Website nach oben und unten scrollen, um die Benutzerfreundlichkeit und Navigation zu verbessern.
Wie man einen Swipe auf einer Website implementiert
Verschiedene Ansätze und Technologien, einschließlich JavaScript und CSS, können verwendet werden, um Streichen auf der Website zu implementieren. In diesem Artikel werden wir uns einige Möglichkeiten ansehen, wie Sie Streichen auf Ihrer Website hinzufügen können.
1. Verwenden einer JavaScript-Bibliothek
Eine der beliebtesten Möglichkeiten, Swipe auf einer Website zu implementieren, ist die Verwendung einer JavaScript-Bibliothek wie Swiper.js oder Slick Slider. Diese Bibliotheken bieten vorgefertigte Komponenten zum Erstellen von Swipe-fähigen Karussellen und Schiebereglern. Sie müssen nur die Bibliothek mit Ihrer Website verbinden und die Schieberegler-Einstellungen anpassen.
2. Verwenden von CSS-Eigenschaften
Wenn Sie eine einfachere Möglichkeit zum Implementieren von Swipe benötigen, können Sie einige CSS-Eigenschaften wie overflow: scroll; oder touch-action: pan-y; verwenden . Die erste Eigenschaft ermöglicht es Ihnen, einen horizontalen oder vertikalen Scrollcontainer zu erstellen, der zum Streichen verwendet werden kann. Die zweite Eigenschaft bestimmt die Art der Interaktion mit dem Element beim Berühren, in diesem Fall erlaubt Streichen nur vertikal.
3. Native Implementierung
Sie können auch native Tools wie die Touch Events API oder die Pointer Events API verwenden, um Swipe auf mobilen Geräten zu implementieren. Mit diesen können Sie die Berührungen des Benutzers verfolgen und darauf reagieren, um einen Swipe-Effekt auf Ihrer Website zu erzeugen.
Abhängig von Ihren Bedürfnissen und dem Niveau der Entwicklungserfahrung können Sie die am besten geeignete Methode für die Implementierung von Swipe auf Ihrer Website auswählen. Dies können vorgefertigte Bibliotheken, einfache CSS-Eigenschaften oder native APIs zur Feinabstimmung sein. Die Hauptsache, an die Sie sich erinnern müssen, ist, die Besonderheiten Ihrer Benutzer zu berücksichtigen und eine benutzerfreundliche und intuitive Benutzeroberfläche für das Streichen auf Ihrer Website bereitzustellen.
