'GSAP 둘째 날: 회전하는 화살표가 있는 대화형 스크롤 애니메이션'-JS 튜토리얼-php.cn

'GSAP 둘째 날: 회전하는 화살표가 있는 대화형 스크롤 애니메이션'

Linda Hamilton

풀어 주다： 2024-12-17 12:25:23

원래의

896명이 탐색했습니다.

소개

? 안녕하세요 개발자 여러분!

웹에서 애니메이션의 무한한 가능성을 탐구하는 GSAP 여정의 7일차에 오신 것을 환영합니다. 오늘 저는 역동적인 텍스트와 회전하는 화살표가 특징인 대화형 스크롤 기반 선택 윤곽 애니메이션을 만드는 데 도전했습니다.

GSAP의 강력한 애니메이션 도구를 사용하면 페이지가 사용자 스크롤 방향(위 또는 아래)에 원활하게 반응하고 회전하도록 만들 수 있습니다. 뛰어 들어보세요!

우리는 무엇을 만들고 있나요?️

애니메이션에는 다음이 포함됩니다.

텍스트와 이미지가 스크롤되는 윤곽선입니다.
스크롤 방향에 따라 조정되는 반응형 애니메이션입니다.
화살표를 회전시켜 감각을 더해보세요!

여기에서 라이브 데모를 볼 수 있습니다.

HTML 구조

제가 사용한 간단한 HTML 마크업은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day-7 Scrolling Text Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>




<hr>


<hr>

<h3>
  
  
  JavaScript Animation with GSAP
</h3>

<p>Here’s the GSAP-powered JavaScript code that makes the magic happen:<br>
</p>

<pre class="brush:php;toolbar:false">window.addEventListener("wheel", function (dets) { 
    if (dets.deltaY > 0) {
        // Scrolling Down
        gsap.to(".marque", {
            x: "-200%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 180
        });
    } else {
        // Scrolling Up
        gsap.to(".marque", {
            x: "0%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 0
        });
    }
});

로그인 후 복사

작동 방식 ⚙️

이벤트 리스너: window.addEventListener("wheel")는 스크롤 방향을 감지합니다.
GSAP 애니메이션:
- gsap.to()는 선택 윤곽을 특정 방향으로 이동합니다.
- 화살표의 회전은 역동적이고 상호작용적인 느낌을 더해줍니다.
무한 스크롤: 반복 사용: -1을 사용하면 선택 윤곽이 끝없이 반복됩니다.