ホームページ >ウェブフロントエンド >jsチュートリアル >「GSAP の日: 回転矢印を使用したインタラクティブなスクロール アニメーション」
「GSAP の日: 回転矢印を使用したインタラクティブなスクロール アニメーション」
- Linda Hamiltonオリジナル
- 2024-12-17 12:25:23901ブラウズ
導入
? 開発者の皆さん、こんにちは!
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() は、マーキーを特定の方向に移動します。
- 矢印の回転により、ダイナミックでインタラクティブな雰囲気が加わります。
- 無限スクロール:repeat: -1 を使用すると、マーキーが無限にループし続けます。
課題と学習
? 課題: スクロール方向とマーキーの動きを同期させるのは困難でした。
? 解決策: GSAP の堅牢な API により、繰り返し、容易さ、継続時間などのプロパティを使用してアニメーションを簡単に微調整できるようになりました。
最終的な考え
このプロジェクトは、GSAP がどのようにしてスクロールベースのインタラクションを処理し、Web ページに命を吹き込むことができるかを示しました。個人のポートフォリオを作成している場合でも、クリエイティブな Web サイトを作成している場合でも、GSAP はアニメーションを魅力的かつ直感的に作成するのに最適なツールです。
? 自分で試して、あなたの作品を共有してください!
リソース
- GSAP ドキュメント
- ライブデモ
- GitHub のソースコード
以上が「GSAP の日: 回転矢印を使用したインタラクティブなスクロール アニメーション」の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。