Clip-Path-Kreis zeigt Animationen mit Mausbewegungen an-js-Tutorial-php.cn

Clip-Path-Kreis zeigt Animationen mit Mausbewegungen an

Linda Hamilton

Freigeben： 2024-12-14 00:42:11

Original

663 Leute haben es durchsucht

Clip-Path Circle Reveal Animation With Mouse Movement

Was ist der Plan?

Wir erstellen eine Animation, bei der ein Bild durch einen Kreis sichtbar wird, der sich mit der Maus bewegt. Sie können auch die Größe des Kreises anpassen und mit dem Verhalten experimentieren.

Das brauchen Sie:

GSAP: Für butterweiche Animationen.
Optimierungsbereich: Für eine elegante Benutzeroberfläche, um die Animation im Handumdrehen anzupassen.
HTML & CSS: Zum Einrichten und Gestalten der Seite.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clip-Path Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <img 
    src="https://images.unsplash.com/photo-1696149328298-6e2f257bd45a?q=80&w=2104&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
    alt="Clip-path animation">
  <script src="script.js"></script>
</body>
</html>

Nach dem Login kopieren

CSS

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
  clip-path: circle(var(--size, 10%) at var(--x, 50%) var(--y, 50%));
  transition: clip-path 0.6s;
}

Nach dem Login kopieren

JS

import gsap from "https://esm.sh/gsap";

// Smooth animations
const xTo = gsap.quickTo("img", "--x", { duration: 0.6, ease: "power3" });
const yTo = gsap.quickTo("img", "--y", { duration: 0.6, ease: "power3" });
const sizeTo = gsap.quickTo("img", "--size", { duration: 0.6, ease: "power3" });

// Update based on mouse movement
window.addEventListener("mousemove", (e) => {
  xTo((e.clientX / window.innerWidth) * 100);
  yTo((e.clientY / window.innerHeight) * 100);
});

Nach dem Login kopieren

Vorschau

Das obige ist der detaillierte Inhalt vonClip-Path-Kreis zeigt Animationen mit Mausbewegungen an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!