Lingkaran Clip-Path Mendedahkan Animasi Dengan Pergerakan Tetikus-tutorial js-php.cn

Lingkaran Clip-Path Mendedahkan Animasi Dengan Pergerakan Tetikus

Linda Hamilton

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

asal

662 orang telah melayarinya

Clip-Path Circle Reveal Animation With Mouse Movement

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!