piskaty
piskaty
hello@piskaty.at
alle experimente
interaktionsstudie · beispiel

Scroll drift

Ein wenig Bewegung, ausgelöst durch dein Scrollen.

Passe die Bewegung an und scrolle. Die Fotos reagieren auf die Scrollgeschwindigkeit und kommen sanft zur Ruhe.

Anpassen

0,65
Wolken ziehen um Berggipfel über grünen Hügeln.
Studie 01lenis + gsap
Stromleitungen als Silhouetten vor einem orangefarbenen Sonnenuntergang.
Studie 02lenis + gsap
Ein gewundener heller Weg durch einen dunklen Wald.
Studie 03lenis + gsap
Eine runde Dolde heller Blüten vor dunkelgrünem Hintergrund.
Studie 04lenis + gsap

Die Idee

Ein Bild bewegt sich ein kleines Stück mit deiner Scrollgeschwindigkeit und findet anschließend wieder zur Ruhe. Der Effekt soll das Bild unterstützen und beim Lesen kaum auffallen.

So funktioniert es

Lenis liefert die Scrollgeschwindigkeit. Der GSAP-Ticker übernimmt die Aktualisierung. Daraus entsteht ein begrenzter Versatz, dessen maximale Größe sich an der Bildhöhe orientiert.

Beispiel
javascript
const limit = Math.min(12, imageHeight * .04);const offset = gsap.utils.clamp(-limit, limit, velocity * .32);

Das Bild ist etwas größer als sein sichtbarer Rahmen. So erscheinen beim Verschieben keine leeren Ränder. Sobald du nicht mehr scrollst, gleitet es zurück.

Zurückhaltend bleiben

Auf Touch-Geräten bleibt das Scrollen nativ. Bei aktivierter Einstellung für reduzierte Bewegung werden sowohl sanftes Scrollen als auch der Parallax-Effekt deaktiviert.

Ein kleines Stück Code

Beispiel
javascript
const offset = gsap.utils.clamp(-12, 12, velocity * .3);gsap.to(image, {  y: offset,  duration: .6,  ease: "power3.out",  overwrite: true,});

Die Demo anpassen

Mit den Reglern kannst du Intensität und Richtung verändern oder den Effekt ausschalten. Die Richtung verwendet einen Faktor von −1 oder 1. „Zurücksetzen“ stellt die Intensität wieder auf 0,65. Die Systemeinstellung für reduzierte Bewegung hat immer Vorrang.