cari

Rumah >hujung hadapan web >tutorial js >Lingkaran Clip-Path Mendedahkan Animasi Dengan Pergerakan Tetikus

Lingkaran Clip-Path Mendedahkan Animasi Dengan Pergerakan Tetikus

Linda Hamilton
Linda Hamiltonasal
2024-12-14 00:42:11663semak imbas

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>

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!

css html for JS animation ui
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Fungsi Anak Panah dalam ES6: Tanda kurung atau Pendakap Kerinting – Bila hendak menggunakan yang mana?Artikel seterusnya：Fungsi Anak Panah dalam ES6: Tanda kurung atau Pendakap Kerinting – Bila hendak menggunakan yang mana?

Artikel berkaitan

Lihat lagi