Jetzt testen

Analyse · Debug Overlay

Mit ?debug=1 aktivierst du die analyse des SmartParallax-Systems – zeige FPS, aktive Elemente und Performance in Echtzeit

Starte Analyse · Debug Overlay

Analyse – Debug-Overlay für Performance und Kontrolle

Der SmartParallax-Debug-Modus wird durch Anhängen von ?debug=1 an die Seiten-URL aktiviert.
Dadurch erscheint unten rechts ein Overlay, das in Echtzeit wichtige Daten zum Parallax-System anzeigt.
So kannst du Bewegungen, Auslastung und Effektanzahl sofort überprüfen – ideal für Entwickler, Designer und Performance-Tuning.

Aktivierung

Einfach ?debug=1 an die aktuelle Seiten-URL anhängen

Aktiviere Debug

Das Debug-Overlay wird automatisch eingeblendet und bleibt aktiv, bis die Seite neu geladen wird.

AnzeigeBedeutung
FPSFrames per Second – zeigt, wie flüssig die Berechnung läuft
ms/frameDurchschnittliche Rechenzeit pro Frame
Active ElementsAnzahl der aktuell aktiven Parallax-Container
Viewport RangeSichtbarer Scrollbereich
Version / Lizenzstatusoptional, falls aktiviert
<div class="parallax-image parallax-rotate-10-r <code>parallax-origin-top-right</code>">
  
</div>

Wirkung von parallax-origin-top-right

In diesem Besipiel verwenden wir:

  • parallax-
  • parallax-x
  • parallax-zoom-
  • parallax-rotate-
  • parallax-origin-top-right

Deinen Ideen sind keine Grenzen gesetzt

P A R A L L A X S M R T

Verwendung

  • Performance: Scroll- und GPU-Auslastung messen
  • Debugging: mögliche Performance-Bottlenecks sichtbar machenke.
  • Drehungen: parallax-origin-bottom-right erzeugt visuelle Spannung bei Logos oder Symbolen.

Mit aktiviertem Debug lassen sich auch Timing, -s, -g, -r oder Effektkombinationen gezielt testen.

Beispiel-Ideen

Ursprung: oben links
Ursprung: unten zentriert
Ursprung: unten rechts