剪辑路径圆通过鼠标移动显示动画-js教程-PHP中文网

剪辑路径圆通过鼠标移动显示动画

Linda Hamilton

发布： 2024-12-14 00:42:11

原创

661 人浏览过

Clip-Path Circle Reveal Animation With Mouse Movement

计划是什么？

我们将创建一个动画，其中图像通过随鼠标移动的圆圈显示。您还可以调整圆圈的大小并尝试其行为。

这是您需要的：

GSAP： 用于黄油般平滑的动画。
Tweakpane： 用于动态调整动画的流畅 UI。
HTML 和 CSS： 设置页面并设置页面样式。

超文本标记语言

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

登录后复制

预览

以上是剪辑路径圆通过鼠标移动显示动画的详细内容。更多信息请关注PHP中文网其他相关文章！