Lingkaran Clip-Path Mendedahkan Animasi Dengan Pergerakan Tetikus

Apa Rancangannya?

Kami akan mencipta animasi di mana imej didedahkan melalui bulatan yang bergerak dengan tetikus anda. Anda juga akan dapat mengubah suai saiz bulatan dan bereksperimen dengan gelagat.

Ini yang anda perlukan:

• GSAP: Untuk animasi halus mentega.
• Tweakpane: Untuk UI yang licin untuk melaraskan animasi dengan pantas.
• HTML & CSS: Untuk menyediakan dan menggayakan halaman.

HTML

  <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">


  <img src="/static/imghwm/default1.png" data-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" class="lazy" alt="Clip-path animation">
  <script src="script.js"></script>

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

Pratonton

Atas ialah kandungan terperinci Lingkaran Clip-Path Mendedahkan Animasi Dengan Pergerakan Tetikus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!