Wie kann man in CSS Transition sowohl die Scroll-Funktion als auch die Scale- und Filter-Funktion verwenden?

Question

Accepted Answer

Um in CSS eine Transition zu erstellen, die sowohl die Scroll-Funktion als auch die `scale`- und `filter`-Eigenschaften verwendet, kannst du die `transition`-Eigenschaft in Kombination mit JavaScript nutzen, um das Scrollen zu steuern. Hier ist ein einfaches Beispiel, wie du dies umsetzen kannst:

1. **HTML-Struktur**:
   ```html

```

2. **CSS-Stile**:
   ```css
   .container {
       height: 200vh; /* Damit man scrollen kann */
       position: relative;
   }

.box {
       width: 100px;
       height: 100px;
       background-color: red;
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) scale(1);
       transition: transform 0.5s, filter 0.5s;
   }

.box.scrolled {
       transform: translate(-50%, -50%) scale(1.5);
       filter: blur(5px);
   }
   ```

3. **JavaScript für das Scrollen**:
   ```javascript
   window.addEventListener('scroll', () => {
       const box = document.querySelector('.box');
       const scrollPosition = window.scrollY;

if (scrollPosition > 100) { // Beispielwert für Scroll-Trigger
           box.classList.add('scrolled');
       } else {
           box.classList.remove('scrolled');
       }
   });
   ```

In diesem Beispiel wird die `.box` beim Scrollen vergrößert und unscharf, wenn die Scroll-Position einen bestimmten Wert überschreitet. Die `transition`-Eigenschaft sorgt dafür, dass die Änderungen sanft ablaufen.

Wie kann man in CSS Transition sowohl die Scroll-Funktion als auch die Scale- und Filter-Funktion verwenden?

Verwandte Fragen

Wie können mehrere Funktionen in CSS-Transition verwendet werden?

Wie kann man in CSS einen Layer einsliden lassen?

Wie bekomme ich runde Ecken im Menü-Hintergrund?

Unterschiede von CSS: Inline-Style, CSS im Head-Bereich, CSS in externer Datei.

Was ist der Aufbau einer CSS-Anweisung?

Beispiel für CSS

Was bedeutet flex direction: row?

Was bedeutet border-radius: 20px 0px 10px 5px?

Wie vergrößere ich den Abstand zwischen einem Wort und dem Unterstrich bei einem Link mit CSS?

Wie kann ich das Sternchen in 'Code*' hochstellen?