Sie landen auf einer Website, scrollen die Seite, und das Logo in der Ecke dreht sich sanft und reagiert auf jede Bewegung des Scrollrads. Das wirkt lebendig, technisch versiert und verleiht der Seite jenes besondere Etwas, das auffällt.

Diese Rotation zu erzeugen, ist einfacher, als es scheint. Sie benötigen keine schwergewichtigen Bibliotheken oder Megabyte an Animations-Frameworks. Alles, was Sie brauchen, ist ein div, ein paar Zeilen CSS und buchstäblich einen Block JavaScript.

Nachfolgend eine schrittweise Aufschlüsselung: von der Vorbereitung des Bildes bis zur Anpassung an mobile Bildschirme. Der Code ist getestet, funktionsfähig und hat keine Abhängigkeiten.

💡 Kurzüberblick:

• Bereiten Sie ein SVG- oder PNG-Objekt vor und fügen Sie es in das HTML ein
• Fixieren Sie die Position mit position: fixed und setzen Sie die Abstände mit Viewport-Einheiten
• Fügen Sie einen JavaScript-scroll-Handler hinzu, der das Objekt mittels transform: rotate() dreht
• Passen Sie die Rotationsgeschwindigkeit an, indem Sie window.scrollY durch einen Koeffizienten teilen
• Für mobile Geräte fügen Sie eine Media Query mit neuer Positionierung und Übergangszeit hinzu

1. Vorbereitung des Objekts

Das Objekt kann alles sein: ein Icon, Logo, eine Vektorform, ein Pfeilsymbol. Ich empfehle SVG, es verliert bei Transformationen nicht an Schärfe und wiegt fast nichts. Wenn Transparenz entscheidend ist und Sie keinen Vektor haben, funktioniert auch PNG.

Platzieren Sie das Bild in einem Container-div und setzen Sie es in den body, vorzugsweise nahe dem Anfang. Ein separates div vereinfacht die Verwaltung: Später können Sie benachbarte Elemente hinzufügen oder das Bild austauschen, ohne die Positionierungslogik anzufassen.

1
<div id="scrollContainer">
2
  <img src="img/scrollObject.svg" alt="scrollObject" id="scrollObject">
3
</div>

Sie können mehrere Objekte haben, weisen Sie einfach jedem eine eindeutige id zu und duplizieren Sie die JS-Logik mit Bindung an das jeweilige Element. Aber fürs Erste erstellen wir eine funktionierende Instanz.

2. Positionierung mit CSS

Wohin mit dem Objekt? Das hängt vom Ziel ab:

• Untere rechte Ecke, ein Miniatur-Icon, das den Inhalt nicht stört. Klassisch für Blogs und Portfolios.
• Obere linke Ecke, Indikator für die Scrollposition (Fortschrittsrad).
• Mitte der unteren Kante, großes dekoratives Element, das die Aufmerksamkeit auf den Footer lenkt.

Betrachten wir das Szenario untere rechte Ecke, es ist universell und verdeckt keine Navigation. In CSS schreiben Sie:

1
#scrollObject {
2
  position: fixed;
3
  right: 3vw;
4
  bottom: 3vh;
5
  top: auto;
6
  width: 7vh;
7
  height: auto;
8
  transition: 0.1s ease-out;
9
}

Der Schlüssel ist position: fixed. Dies fixiert das Element relativ zum Browserfenster, nicht zum Dokument. Beim Scrollen bewegt sich der Inhalt, aber das Objekt bleibt an Ort und Stelle. Die Einheiten vw und vh (Prozentsätze der Viewport-Breite und -Höhe) passen die Abstände automatisch für jeden Bildschirm an, vom Smartphone bis zum 4K-Monitor.

Die Eigenschaft transition: 0.1s ease-out glättet Ruckler bei Positionswechseln. Für die Rotation spielt sie eine untergeordnete Rolle, aber bei Größenänderungen oder Media-Query-Wechseln sieht der Übergang sauberer aus.

3. Rotationsanimation mit JavaScript

CSS kann einfache @keyframes, aber unsere Aufgabe ist es, den Rotationswinkel an die Scrollposition zu koppeln. Hier kommt JavaScript ins Spiel. Minimaler funktionsfähiger Code:

1
const scrollObject = document.getElementById("scrollObject");
2
 
3
window.addEventListener("scroll", () => {
4
  scrollObject.style.transform = `rotate(${window.scrollY}deg)`;
5
});

Was hier passiert: window.scrollY gibt die Anzahl der Pixel zurück, um die die Seite vertikal gescrollt wurde. Diese Zahl wird in die CSS-Funktion rotate() eingesetzt, ein Pixel Scrollweg entspricht einem Grad Drehung.

Wenn sich das Objekt zu schnell dreht, teilen Sie den Wert durch einen Koeffizienten:

1
const speedFactor = window.scrollY / 2;
2
const scrollObject = document.getElementById("scrollObject");
3
 
4
window.addEventListener("scroll", () => {
5
  scrollObject.style.transform = `rotate(${speedFactor}deg)`;
6
});

Wählen Sie einen Divisor, der zu Ihrer Seitenlänge passt. Ein Wert von /2 halbiert die Drehung, /4 macht sie sanft und kaum wahrnehmbar. Für lange Landingpages verwenden Sie /6 oder /8, damit das Objekt nicht bis zur Seitenmitte zehn volle Umdrehungen macht.

Hinweis zur Performance

Das scroll-Ereignis feuert dutzende Male pro Sekunde. Auf einer einfachen Seite mit einem transform ist das unmerklich, aber wenn Sie mehrere animierte Objekte oder ein schweres DOM haben, kapseln Sie die Logik in requestAnimationFrame:

1
const scrollObject = document.getElementById("scrollObject");
2
let ticking = false;
3
 
4
window.addEventListener("scroll", () => {
5
  if (!ticking) {
6
    requestAnimationFrame(() => {
7
      scrollObject.style.transform = `rotate(${window.scrollY}deg)`;
8
      ticking = false;
9
    });
10
    ticking = true;
11
  }
12
});

requestAnimationFrame gruppiert Aufrufe in Browser-Sync-Frames (üblicherweise 60 fps) und führt nicht bei jedem Scroll-Ereignis eine Neuberechnung der Styles durch, was CPU und Akku auf mobilen Geräten spart.

Fügen Sie außerdem will-change: transform zur CSS-Regel #scrollObject hinzu. Dies teilt dem Browser mit, vorab eine GPU-Compositing-Ebene zuzuweisen, und die Rotation wird hardwarebeschleunigt:

1
#scrollObject {
2
  /* ... other properties ... */
3
  will-change: transform;
4
}

4. Mobile Anpassung

Auf Bildschirmen kleiner als 600 Pixel kann die untere rechte Ecke mit Burger-Menüs oder „Zurück nach oben"-Buttons kollidieren. Eine sinnvolle Lösung ist, das Objekt in die untere Mitte zu verschieben, damit es keine interaktiven Elemente verdeckt:

1
@media only screen and (max-width: 600px) {
2
  #scrollObject {
3
    transition: 0.2s ease-out;
4
    margin-left: -4vh;
5
    width: 8vh;
6
    height: auto;
7
    top: 10px;
8
    left: 50%;
9
  }
10
}

Das Objekt wandert an den oberen Bildschirmrand, zentriert mit left: 50% und negativem margin-left, einer klassischen Technik zur horizontalen Zentrierung. Die Breite wird leicht erhöht (8vh statt 7vh), um den kürzeren Betrachtungsabstand auszugleichen.

Beachten Sie transition: 0.2s ease-out in der Media Query. Beim Wechsel von Desktop zu Mobil (oder bei Fenstergrößenänderung) springt das Objekt nicht abrupt, sondern gleitet sanft über 0,2 Sekunden in die neue Position.

Wenn Sie in Vue oder React arbeiten, extrahieren Sie das Scroll-Objekt in eine separate Komponente. Sie können es an die Wurzel App.vue oder in layout anhängen, sodass die Animation ohne Code-Duplizierung auf allen Seiten gleichzeitig präsent ist.

Moderne Alternative: CSS-Scroll-gesteuerte Animationen

In den Jahren 2024-2025 erhielten Chromium-Browser (Chrome, Edge, Opera) native Unterstützung für animation-timeline: scroll(), scroll-verknüpfte Animationen ohne eine einzige Zeile JavaScript. Das sieht so aus:

1
@keyframes rotate {
2
  to { transform: rotate(360deg); }
3
}
4
 
5
#scrollObject {
6
  animation: rotate linear;
7
  animation-timeline: scroll();
8
}

Vorteil: null JavaScript, Nachteil: derzeit nur in Chromium (Firefox und Safari arbeiten an der Implementierung). Für Progressive Enhancement können Sie kombinieren: Geben Sie modernen Browsern die CSS-Version und behalten Sie den JS-Handler als Fallback für den Rest. Details auf MDN.

⁉️🤔 Häufig gestellte Fragen

Kann ich nicht nur die Rotation, sondern auch Skalierung oder Deckkraft animieren?

Ja. transform unterstützt mehrere Funktionen gleichzeitig. Um ein Objekt beim Scrollen zu drehen und zu verkleinern: scrollObject.style.transform = \rotate(${window.scrollY}deg) scale(${1 - window.scrollY / 5000});. Die Deckkraft wird getrennt von transform über opacity gesteuert. Kombinieren Sie bis zu fünf oder sechs Parameter, aber testen Sie: Mehrere Transformationen können auf schwachen Geräten Mikroruckler verursachen. Ein oder zwei Parameter plus will-change: transform sind eine sichere Obergrenze für 60 fps.

Was ist besser: SVG oder PNG für die Animation?

SVG, ohne Frage. Es skaliert ohne Schärfeverlust bei jeder Drehung und Bildschirmauflösung, wiegt weniger, und der Browser rendert es als Vektor (keine Pixeltreppen an Kanten nach rotate). Nehmen Sie PNG nur, wenn Sie bereits fertige Rastergrafiken haben und keine Zeit für eine Neuerstellung bleibt. Vermeiden Sie JPEG für rotierende Objekte, Kompressionsartefakte werden nach der Drehung deutlicher sichtbar.

Wie erreiche ich, dass die Animation erst startet, wenn sich das Objekt im sichtbaren Bereich befindet?

Verwenden Sie IntersectionObserver. Anstatt an den globalen scroll zu binden, überwachen Sie, ob das Objekt in den Viewport eingetreten ist, und aktivieren erst dann die Rotation. Das spart Ressourcen, wenn das Element außerhalb des Bildschirms ist. Grundvorlage: Erstellen Sie einen Observer mit threshold: 0, fügen Sie im Callback eine .active-Klasse hinzu bzw. entfernen Sie sie und binden Sie den JS-Scroll-Handler an das Vorhandensein dieser Klasse.

Warum ruckelt die Animation auf meiner Website?

Drei typische Ursachen. Erstens: kein will-change: transform, der Browser übergibt das Element nicht dem GPU-Compositing und berechnet das Layout bei jedem Frame neu. Zweitens: Eigenschaften, die Reflow verursachen (wie width, height, margin oder padding), werden im selben Scroll-Handler auf das Element angewendet. Ersetzen Sie sie durch transform: scale() und transform: translate(). Drittens: Der Scroll-Callback läuft ohne requestAnimationFrame und erzeugt zusätzliche Repaints zwischen den Frames. Kapseln Sie die Logik in das rAF-Muster (Beispiel im Abschnitt „Hinweis zur Performance").

Ist JavaScript zwingend erforderlich? Es gibt reine CSS-Lösungen.

CSS-@keyframes sind an Zeit gebunden, nicht an die Scrollposition. Ja, animation-timeline: scroll() ändert das Spiel, aber die Browserunterstützung ist noch unvollständig (siehe Abschnitt 4). Stand Mitte 2026 ist die JavaScript-Lösung mit scrollY + transform immer noch der zuverlässigste browserübergreifende Weg, um Rotation an Scrollen zu koppeln. Der gesamte Code passt in 5 Zeilen, zieht keine Abhängigkeiten nach sich und funktioniert von Internet Explorer 10 bis zum neuesten Chrome.

Sollten Sie Ihrer Website eine Scroll-Animation hinzufügen?

Ein Objekt beim Scrollen zu drehen, ist nicht nur ein „cooler Trick". Es ist eine Mikrointeraktion, die dem Besucher ein haptisches Feedback gibt: „Ich bewege die Seite und etwas passiert". Richtig konfiguriert, irritiert oder lenkt sie nicht ab, sondern verleiht der Website Persönlichkeit.

Wenn die Website minimalistisch ist, beschränken Sie sich auf ein kleines Objekt in der Ecke und einen Koeffizienten von /4 oder /6. Für Landingpages und Portfolios können Sie mutiger spielen: ein großes zentrales Element mit /2, kombinierte Rotations- und Skalierungsanimation, Bildwechsel beim Erreichen eines bestimmten scrollY-Wertes.

Hauptregel: Scroll-Animation soll Inhalt ergänzen, nicht mit ihm um Aufmerksamkeit konkurrieren. Ein Objekt, sanfte Bewegung, keine Aufdringlichkeit, und Ihre Website wird in Erinnerung bleiben.