suchen

Heim >Web-Frontend >js-Tutorial >Clip-Path-Kreis zeigt Animationen mit Mausbewegungen an

Clip-Path-Kreis zeigt Animationen mit Mausbewegungen an

Linda Hamilton
Linda HamiltonOriginal
2024-12-14 00:42:11667Durchsuche

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>

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;
}

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);
});

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!

css html for JS animation ui
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Pfeilfunktionen in ES6: Klammern oder geschweifte Klammern – wann welche verwenden?Nächster Artikel：Pfeilfunktionen in ES6: Klammern oder geschweifte Klammern – wann welche verwenden?

In Verbindung stehende Artikel

Mehr sehen