Einführung in PXI: Nutzer-Engagement durch interaktive Parallax-Effekte gesteigert
Parallax Interface, kurz PXI, ist eine leistungsfähige und dennoch kleine Bibliothek, die entwickelt wurde, um mausgesteuerte Parallax-Effekte zu HTML-Elementen auf Websites hinzuzufügen. Durch die Erhöhung der Interaktivität der Web-App oder Website kann dies die Nutzer-Engagements steigern. Als Inspiration diente der iPad-Maus-Hover-Effekt.
Eine Demo des Parallax-Effekts kann hier gefunden werden: https://redbeed.github.io/parallax-interface/demo/.
Faszinierende Parallax-Effekte: Der zugrundeliegende Mechanismus
Durch das Hinzufügen des data-pax Attributs zu Ihrem Hauptelement und data-pe-factor zu den Elementen, die den Parallax-Effekt aufweisen sollen, können die Parallax-Effekte angewendet werden. Durch diese minimalen Anpassungen kann der Effekt leicht und nahtlos in jedes Projekt integriert werden.
Zwei kleine CSS und JS-Scripts müssen in Ihr Projekt eingefügt werden, um den Parallax-Effekt zu aktivieren.
Bei HTML Inline-Elementen wie <span> oder <a> muss die Regel display: inline-block hinzugefügt werden, um den Parallax-Effekt nutzen zu können. Durch Hinzufügen der Klasse .inline-block kann dies erreicht werden, wenn Tailwind CSS verwendet wird.
Installation von PXI
PXI kann unkompliziert installiert werden. Das Package kann direkt in Ihr Projekt integriert oder über np/yarn installiert werden.
Installation über npm/yarn
npm install @redbeed/parallax-interface
yard add @redbeed/parallax-interface
Nach der Installation kann die Bibliothek in Ihr Projekt importiert und initialisiert werden:
import ParallaxInterface from 'parallax-interface';
ParallaxInterface.init();
Es besteht auch die Möglichkeit, benutzerdefinierte Optionen zu verwenden, um das Verhalten des Parallax-Effekts zu feinabstimmen:
ParallaxInterface.init({
throttleTime: 16, // Throttle-Zeit in Millisekunden (60fps)
hitzoneFactor: 1, // Faktor für die Größe der Trefferzone
mouseMoveFactor: 0.5, // Faktor für die Mausbewegung
animationTime: 500, // Animationszeit in Millisekunden
calculateSize: false, // Bei true haben der Wrapper und das Element eine feste Größe (basierend auf der Größe des Elements)
});
Diese Optionen stehen aber auch direkt als HTML-Attribute zur Verfügung:
<a href="#" data-pax>
<span data-pe-factor>I am a link</span>
</a>
<!-- or with custom options -->
<a href="#" data-pax data-pe-hitzone="1.2">
<span data-pe-factor="0.5">I am a link</span>
</a>
Um den Parallax-Effekt korrekt zu aktivieren, müssen die CSS-Styles eingebunden werden:
import 'parallax-interface/dist/parallax-interface.css';
`` Nach diesen Schritten ist PXI bereit, Ihrem Projekt einfache aber eindrucksvolle Parallax-Effekte hinzuzufügen.
Alternative: Verwendung von CDN
Als Alternative kann PXI auch direkt als Skript eingebunden werden, ohne dass eine Anpassung oder Erweiterung des eigenen JavaScript-Codes erforderlich ist. Hierfür müssen einfach die folgenden Dateien in den HTML-Code eingefügt werden:
<script src="https://unpkg.com/@redbeed/parallax-interface/dist/parallax-interface.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@redbeed/parallax-interface/dist/parallax-interface.css"/>
Lizenz und Quellcode
PXI ist unter der MIT-Lizenz lizenziert, und der Quellcode kann auf GitHub eingesehen werden. Beiträge von allen, die dazu beitragen möchten, das Projekt weiterzuentwickeln, sind willkommen.
Abschlussbemerkungen
Mit PXI kann eine einfache und dennoch effektive Möglichkeit geboten werden, die visuelle Tiefe und Interaktivität einer Website zu erweitern. Dabei ist der spannende, an den iPad-Cursor erinnernde Hover-Effekt besonders hervorzuheben.
Die Nutzung von PXI in Ihren Projekten wird empfohlen, um die vielfältigen Möglichkeiten zu entdecken, die es für die Verbesserung der Benutzeroberfläche und des Nutzer-Engagements bietet.
Sollten Sie Ideen, Fehlerberichte, Verbesserungsvorschläge haben oder das Skript auf Ihrer Website implementiert haben, kann ein Issue auf Github.com eröffnet werden.