Breakdance: Dynamischer, interaktiver Hover-Schatten von actiware (Subtil & Edel)

Webdesign,

Kennst du diese modernen, hochwertigen Webseiten, bei denen Elemente fast magisch auf deine Mausbewegung reagieren? Ein starrer Schatten (Drop Shadow) wirkt oft altbacken. Heute zeige ich dir, wie du in Breakdance einen interaktiven, dynamischen Schatten baust, der deiner Maus sanft folgt.

Wir bauen eine extrem edle, „flache“ Variante. Das bedeutet: Der Schatten bricht nicht wild aus, sondern bleibt dicht an der Karte, was für einen sehr hochwertigen, subtilen Tiefeneffekt sorgt.

Das Beste daran: Wir nutzen reines Vanilla JavaScript und modernes CSS. Keine schweren Plugins, keine Performance-Einbußen!

 

Schritt 1: Die Struktur in Breakdance vorbereiten

Damit der Effekt reibungslos funktioniert, brauchen wir ein sauberes Container-Setup in Breakdance.

  1. Füge ein Div-Element zu deiner Seite hinzu. Dieses Div wird unsere interaktive Karte.

  2. Gehe auf den Tab Settings -> Advanced -> Classes und gib dem Div die Klasse .aw-hover-card.

  3. optional: Gehe auf Design -> Borders und stelle deinen gewünschten Ecken-Radius ein (z. B. 12px). Unser Code wird diesen Radius später automatisch für den Schatten übernehmen.

 

Schritt 2: Das CSS (Das Design des Schattens)

Nun geben wir der Karte ihr Aussehen und sorgen dafür, dass der Schatten nicht abgeschnitten wird. Gehe in Breakdance auf Global Settings -> Custom Code -> CSS (oder füge es direkt in ein Stylesheet ein) und kopiere diesen Code:

CSS

 
/* AUTOR: MN / DATUM: 2026-02-19 / 20:15
   BESCHREIBUNG: Breakdance Hover-Schatten – Subtiles und flaches Design
*/
.aw-hover-card {
  --shadow-x: 0px;
  --shadow-y: 0px;
  
  position: relative;
  /* Wichtig: Eine feste Farbe verdeckt den Schatten im Inneren der Karte */
  background-color: #ffffff !important; 
  border-radius: inherit; 
  border: 1px solid rgba(0, 0, 0, 0.08); 
  
  z-index: 1;
  /* Zwingt Breakdance dazu, den Schatten außen sichtbar zu machen */
  overflow: visible !important; 
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.aw-hover-card::after {
  content: "";
  position: absolute;
  inset: 0; 
  border-radius: inherit;
  z-index: -1; 
  opacity: 0;
  pointer-events: none;
  
  transition: opacity 0.3s ease;
  
  /* Der kompakte, edle Schatten:
     5px Blur sorgen für einen definierten, nahen Schattenwurf.
  */
  box-shadow: var(--shadow-x) var(--shadow-y) 5px rgba(0, 0, 0, 0.15);
}

/* Schatten einblenden, wenn die Maus über die Karte fährt */
.aw-hover-card:hover::after {
  opacity: 1;
}

/* Minimales Anheben der Karte für den 3D-Effekt */
.aw-hover-card:hover {
  transform: translateY(-1px);
}

Schritt 3: Das JavaScript (Die Interaktion)

Damit der Schatten weiß, wo deine Maus ist, brauchen wir ein kleines Skript. Gehe in Breakdance auf Global Settings -> Custom Code -> Scripts und füge Folgendes ein:

JavaScript

 
/* AUTOR: MN / DATUM: 2026-02-19 / 20:15
   BESCHREIBUNG: Breakdance Hover-Effekt – Schatten folgt der Maus (Dezente Tiefe)
*/
document.addEventListener("mousemove", function(event) {
    // Prüfen, ob die Maus über einem Element mit unserer Klasse ist
    const card = event.target.closest(".aw-hover-card");
    if (!card) return;

    // Maße der Karte auslesen
    const rect = card.getBoundingClientRect();
    
    // Das exakte Zentrum der Karte berechnen
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    // Position der Maus relativ zum Zentrum ermitteln
    const x = event.clientX - rect.left - centerX;
    const y = event.clientY - rect.top - centerY;

    // Faktor 0.035 sorgt für eine extrem feine, kaum merkliche Bewegung (edler Look)
    const moveX = (x * 0.035).toFixed(1);
    const moveY = (y * 0.035).toFixed(1);

    // Die berechneten Werte live an unser CSS senden
    card.style.setProperty('--shadow-x', `${moveX}px`);
    card.style.setProperty('--shadow-y', `${moveY}px`);
});

// Schatten sanft auf 0 zurücksetzen, wenn die Maus die Karte verlässt
document.addEventListener("mouseout", function(event) {
    const card = event.target.closest(".aw-hover-card");
    
    if (card && (!event.relatedTarget || !card.contains(event.relatedTarget))) {
        card.style.setProperty('--shadow-x', '0px');
        card.style.setProperty('--shadow-y', '0px');
    }
});

Speichere deine Seite ab und lade sie neu. Fahre mit der Maus über deine Karte – du wirst sehen, wie der Schatten nun sanft und extrem hochwertig auf deine Bewegungen reagiert!

💡 Kleine Begriffserklärung für Anfänger (Fachausdrücke)

  • Vanilla JavaScript: Das bedeutet „reines“ JavaScript. Wir nutzen keine externen, schweren Code-Bibliotheken (wie z. B. jQuery), die deine Webseite langsam machen könnten.

  • Event Delegation: Anstatt jeder einzelnen Karte ein eigenes Skript zuzuweisen, „lauscht“ unser Skript auf das gesamte Dokument (document.addEventListener). Das ist enorm zuverlässig und funktioniert in Breakdance fehlerfrei, egal wann ein Element geladen wird.

  • inset: 0: Ein moderner CSS-Befehl. Er spannt den unsichtbaren Schatten exakt auf die gleichen Außenkanten wie deine weiße Karte.

  • Blur-Radius: Der Weichzeichner im CSS (5px in unserem Code). Je kleiner der Wert, desto schärfer und näher wirkt der Schatten.

  • Overflow visible: Ein CSS-Befehl, der sicherstellt, dass grafische Effekte, die über den eigentlichen Rand eines Elements hinausragen (wie unser Schatten), nicht unsichtbar abgeschnitten werden.

Recommended for you