클립 경로 원은 마우스 움직임으로 애니메이션을 표시합니다.
- Linda Hamilton원래의
- 2024-12-14 00:42:11667검색
계획은 무엇입니까?
마우스로 움직이는 원을 통해 이미지가 드러나는 애니메이션을 만들어 보겠습니다. 또한 원의 크기를 조정하고 동작을 실험해 볼 수도 있습니다.
필요한 사항은 다음과 같습니다.
- GSAP: 버터처럼 부드러운 애니메이션을 위한 것입니다.
- Tweakpane: 애니메이션을 즉석에서 조정할 수 있는 매끄러운 UI를 위해.
- HTML 및 CSS: 페이지를 설정하고 스타일을 지정합니다.
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);
});
시사
위 내용은 클립 경로 원은 마우스 움직임으로 애니메이션을 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.