Scroll- und Hover-Effekte

Tauche ein in die magische Welt von GSAP und Elementor!

In diesem Tutorial zeige ich dir Schritt für Schritt, wie du mit ein wenig Code-Zauberei einen Scroll- und Hover-Effekt erschaffst, der sich anfühlt, als stamme er direkt aus den Hallen von Hogwarts.

Der CSS Code

				
					.text > :first-child{ /* Wählt das erste Kindelement innerhalb eines Elements mit der Klasse .text aus */
  margin: 0; /* Entfernt den Standard-Außenabstand */
  color: rgb(182, 182, 182, 0.2); /* Setzt die Schriftfarbe auf ein sehr helles Grau mit 20 % Transparenz */
  background: linear-gradient(to right, #b6b6b6, #b6b6b6) no-repeat; /* Erstellt einen grauen linearen Verlauf als Hintergrund, ohne Wiederholung */
  -webkit-background-clip: text; /* Sorgt dafür, dass der Hintergrund nur auf den Text angewendet wird (Safari/Chrome) */
  background-clip: text; /* Gleiche Funktion für andere Browser: Hintergrund nur innerhalb der Textbuchstaben anzeigen */
  background-size: 0%; /* Der Verlauf ist zunächst nicht sichtbar (auf 0 % skaliert) */
  transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s; /* Animiert die Hintergrundgröße mit einer weichen Übergangskurve über 0,5 Sekunden */
  border-bottom: 1px solid #2F2B28; /* Fügt unten eine dünne, dunkle Linie hinzu */
  display: flex; /* Macht das Element zu einem Flex-Container */
  flex-direction: column; /* Ordnet mögliche Kindelemente vertikal an */
  align-items: flex-start; /* Richtet Kindelemente am linken Rand aus */
  justify-content: center; /* Zentriert Kindelemente vertikal innerhalb des Containers */
  position: relative; /* Setzt eine relative Positionierung, damit absolut positionierte Kindelemente sich daran orientieren */
}

.text > :first-child span{ /* Stile für ein <span> innerhalb des ersten Kindelements von .text */
  position: absolute; /* Positioniert das <span> absolut im Verhältnis zum Eltern-Element */
  width: 100%; /* Füllt die gesamte Breite des Eltern-Elements */
  height: 100%; /* Füllt die gesamte Höhe des Eltern-Elements */
  background-color: #FFFF00; /* Setzt den Hintergrund auf Gelb */
  color: #0D0D0D; /* Setzt die Textfarbe auf sehr dunkles Grau (fast Schwarz) */
  
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%); /* Schneidet das Element so zu, dass nur eine dünne Linie (Mitte) sichtbar ist */
  transform-origin: center; /* Legt den Ursprung für Transformationen (z. B. clip-path-Animationen) auf die Mitte fest */
  transition: all cubic-bezier(.1,.5,.5,1) 0.4s; /* Animiert alle veränderbaren Eigenschaften sanft über 0,4 Sekunden */
  
  display: flex; /* Wieder ein Flex-Container für Inhalt im <span> */
  flex-direction: column; /* Richtet den Inhalt vertikal aus */
  justify-content: center; /* Zentriert Text vertikal innerhalb des <span> */
}

.text > :first-child:hover > span{ /* Wenn das erste Kindelement von .text mit der Maus berührt wird */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); /* Erweitert das gelbe <span> auf die volle Fläche (animiert) */
  cursor: pointer; /* Zeigt beim Darüberfahren einen Mauszeiger (Handsymbol) */
}

a { /* Stile für alle Links */
  text-decoration: none; /* Entfernt Unterstreichung */
  color: inherit; /* Übernimmt die Textfarbe des Eltern-Elements */
}

Dieses Snippet einfach unter Erweitert -> Custom CSS einfügen. Fertig!

Das JavaScript

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> 
<!-- Lädt die Hauptbibliothek GSAP (GreenSock Animation Platform) – sie ermöglicht performante Animationen in JavaScript -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollTrigger.min.js"></script>
<!-- Lädt das GSAP-Plugin "ScrollTrigger", mit dem Animationen durch Scrollen ausgelöst werden können -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollToPlugin.min.js"></script>
<!-- Lädt das "ScrollToPlugin", das sanftes Scrollen zu bestimmten Positionen ermöglicht (wird hier aber nicht verwendet) -->

<script>
    gsap.registerPlugin(ScrollTrigger);
    /* Registriert das ScrollTrigger-Plugin bei GSAP, 
       damit es in den Animationen verwendet werden kann */

    const textElements = gsap.utils.toArray('.text > :first-child');
    /* Sammelt alle ersten Kindelemente innerhalb von Elementen mit der Klasse .text 
       und speichert sie in einem Array (egal ob es 1 oder mehrere gibt). 
       Beispiel: <div class="text"><h1>...</h1></div> → h1 wird erfasst. */

    textElements.forEach(text => {
      /* Geht jedes dieser Elemente im Array nacheinander durch */

      gsap.to(text, {
        backgroundSize: '100%', 
        /* Animiert die CSS-Eigenschaft "background-size" von ihrem Startwert (0%) auf 100%.
           → Der Hintergrundverlauf, der zuvor im CSS definiert wurde, füllt sich allmählich über den Text. */

        ease: 'none', 
        /* Keine Beschleunigung oder Verlangsamung – die Animation läuft linear mit dem Scrollen */

        scrollTrigger: { 
          /* Erstellt für jedes Element einen individuellen ScrollTrigger */

            trigger: text, 
            /* Bestimmt, welches Element die Animation auslöst – hier das jeweilige Textelement selbst */

            start: 'center 80%', 
            /* Startpunkt der Animation:
               Wenn die Mitte des Elements (center) den Bereich erreicht, 
               der 80% vom oberen Rand des Viewports entfernt ist → Animation startet. */

            end: 'center 20%', 
            /* Endpunkt der Animation:
               Wenn die Mitte des Elements 20% vom oberen Rand des Viewports erreicht → Animation endet. */

            scrub: true, 
            /* Verknüpft den Animationsfortschritt mit der Scrollposition:
               → Beim Hoch- oder Runterscrollen bewegt sich die Animation synchron. */
        },
      });
    });
</script>

Dieses Snippet einfach in ein HTML Element auf der Seite kopieren.

Bereit loszulegen?

Lassen Sie uns gemeinsam einen Weg finden, wie Sie Online in Schwung bringen.