Cursor-Effekt in der Vorschau
Niedriger = Partikel bleiben langer
Kopieren Sie diesen Code und fugen Sie ihn vor </body> in Ihrer Website ein.
| Effekt | Visuell | Am besten fur | Verhalten |
|---|---|---|---|
| Funkeln | ✦ Farbige Punkte | Allgemein, SaaS-Landingpages | Partikel stromen radial vom Cursor mit leichter Schwerkraft |
| Blase | 🫧 Expandierende Ringe | Kreative Portfolios, Kinderseiten | Blasen schweben mit glanzendem Highlight nach oben |
| Stern | ⭐ 5-zackige Sterne | Spiele-Websites, Unterhaltung | Sterne drehen sich, wahrend sie vom Cursor wegtreiben |
| Herz | ❤️ Herzformen | Dating-Seiten, Hochzeitsseiten, Valentinstag | Herzen taumeln mit Rotation und verkleinern sich beim Ausblenden |
| Neon-Spur | 💫 Leuchtende Ringe | Tech-Startups, Dark-Mode-Seiten | Ringe expandieren mit Schlagschatten und hinterlassen einen Neon-Glow |
| Schneeflocke | ❄️ 6-armige Kristalle | Winter-/Feiertagsthemen, saisonale Seiten | Schneeflocken drehen sich sanft, wahrend sie in zufallige Richtungen treiben |
Der Code erstellt ein <canvas>-Element, das mit pointer-events: none am Viewport fixiert ist — was bedeutet, dass es visuelle Partikel uber Ihrem Inhalt rendert, ohne Klicks, Links oder Interaktionen zu blockieren. Bei jedem mousemove-Ereignis erzeugt es eine konfigurierbare Anzahl von Partikeln an der Cursorposition mit zufalligen Geschwindigkeitsvektoren. Die requestAnimationFrame-Schleife aktualisiert die Partikelpositionen (mit leichter Schwerkraft fur Funkel-/Spur-Effekte), reduziert die Deckkraft basierend auf der Ausblendgeschwindigkeit und entfernt tote Partikel. Eine Begrenzung auf 300 Partikel verhindert Speicherwachstum. Die Canvas-Grose passt sich bei Fenstergrosenanderung automatisch an und bleibt immer im Vollbild.
| Plattform | Installationsmethode | Schwierigkeit |
|---|---|---|
| WordPress | Design → Theme-Datei-Editor → footer.php, oder verwenden Sie das Plugin „Insert Headers and Footers" | Einfach |
| Shopify | Onlineshop → Themes → Code bearbeiten → theme.liquid, vor </body> einfugen | Einfach |
| Wix | Einstellungen → Benutzerdefinierter Code → Code hinzufugen, in den Bereich Body - End einfugen | Einfach |
| Squarespace | Einstellungen → Erweitert → Code-Injection → Footer | Einfach |
| Webflow | Website-Einstellungen → Benutzerdefinierter Code → Vor dem </body>-Tag | Einfach |
| Statisches HTML | Direkt vor </body> in einer beliebigen .html-Datei einfugen | Einfach |
Der Effekt ist auf Leistung optimiert: Das gesamte Rendering verwendet ein einziges <canvas>-Element mit 2D-Kontext — kein WebGL-Overhead, keine DOM-Manipulation pro Partikel. Mit den Standardeinstellungen (3 Partikel pro Frame, 300 Obergrenze) fugt der Effekt etwa 1-2% CPU-Auslastung auf moderner Hardware hinzu. Die Reduzierung der Partikelanzahl auf 1 und das Erhohen der Ausblendgeschwindigkeit auf Maximum ergibt die leichteste Konfiguration. Das Skript ist etwa 2 KB minifiziert — kleiner als die meisten Analytics-Tracking-Snippets.
Nach dem Einfugen des Codes konnen Sie ihn direkt weiter anpassen: Andern Sie den Wert cfg.type, um Effekte ohne Neugenerierung zu wechseln, passen Sie cfg.count fur mehr oder weniger Partikel an oder modifizieren Sie den Parameter cfg.spread, um die Entfernung zu andern, die Partikel zurucklegen. Der Code ist Vanilla-JavaScript — kein Build-Schritt, keine Minifizierung erforderlich. Fortgeschrittene Benutzer konnen die switch-Anweisung erweitern, um benutzerdefinierte Formen hinzuzufugen: Der Canvas-2D-Kontext unterstutzt Kreisbogen, Bezier-Kurven, Linien und Bild-Sprites.
Wahlen Sie Ihren bevorzugten Effekt (Funkeln, Blase, Stern, Herz, Neon-Spur oder Schneeflocke), passen Sie Farben und Dynamik in den Steuerelementen an und klicken Sie dann auf Code kopieren. Fugen Sie das generierte Skript vor dem </body>-Tag einer beliebigen HTML-Seite ein. Der Code ist vollstandig eigenstandig — er erstellt ein Canvas-Element, uberwacht Mausbewegungen und rendert Partikel. Keine externen Abhangigkeiten oder CDN-Links erforderlich.
Der Effekt uberwacht mousemove-Ereignisse, die auf Touch-Geraten nicht ausgelost werden. Auf Mobilgeraten bleibt die Canvas-Ebene vorhanden, ist aber unsichtbar (aufgrund von pointer-events: none), sodass sie nicht mit Beruhrungen, Scrollen oder anderen Seiteninteraktionen interferiert. Der Effekt ist rein dekorativ und funktioniert auch ohne Mausspur normal auf Mobilgeraten.
Der Effekt verwendet requestAnimationFrame und eine Begrenzung auf 300 Partikel, was ihn sehr leichtgewichtig macht. Jedes Partikel ist ein einziger Canvas-Zeichenaufruf. Auf modernen Geraten ist die Leistungsauswirkung vernachlassigbar (etwa 1-2% CPU). Sie konnen die Partikelanzahl und Grose in den Steuerelementen reduzieren, um die Ressourcennutzung auf alterer Hardware weiter zu senken.
Ja — der generierte Code ist Vanilla-JavaScript ohne Abhangigkeiten. WordPress: in footer.php einfugen oder ein Plugin „Insert Headers and Footers" verwenden. Shopify: unter Theme → Code bearbeiten → theme.liquid vor </body> einfugen. Wix: Einstellungen → Benutzerdefinierter Code verwenden. Squarespace: Einstellungen → Code-Injection → Footer. Es funktioniert auf jeder Plattform, die benutzerdefiniertes JavaScript erlaubt. Siehe die Kompatibilitatstabelle oben fur detaillierte Anweisungen.
Verwenden Sie die Farbwahler fur Primarfarbe und Sekundarfarbe im Generator-Panel. Jedes Partikel wahlt zufallig eine der beiden Farben aus und erzeugt so einen gemischten, dynamischen Effekt. Fur einen monochromen Look setzen Sie beide Farben auf denselben Wert. Der generierte Code bettet Ihre gewahlten Farben direkt ein — Sie mussen das Skript nach dem Einfugen nicht mehr bearbeiten.