GreenSockとTailwindCSSを使用してアニメーションを作成する方法（パート1）

一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して13日目です。クリックしてイベントの詳細を表示。

GreenSock Animation Platform（GSAP）は、JavaScriptが操作できるすべてのもの（CSSプロパティ、SVG、React、キャンバス、ジェネリックオブジェクトなど）をアニメーション化できると同時に、さまざまなブラウザーでの互換性の問題を解決し、非常に高速です（jQueryの20倍高速））。約1,000万のサイトと多くの主要ブランドがGSAPを使用しています。

アニメーションは実際には要素の属性値を1秒間に複数回変更しており、要素はフェードインとフェードアウト、回転、移動など、移動しているように見えます。一方、GSAPは開始値と終了値をキャプチャし、それらの間を1秒間に60回補間します。

技術的に言えば、GSAPは実際には「GreenSockProperty Manipulator」（GSPM）と呼ばれるべきです。

記事の概要

この記事は、次の部分で構成されています。

プロジェクトの設定方法
マークアップを書く
GSAPの概要
ページにアニメーションを追加
結論は

プロジェクトの設定方法

ランディングページの作成を開始する前に、いくつかの準備をする必要があります。

このセクションでは、次のことを行います。

プロジェクトが配置されているディレクトリを設定します。
GSAPとTailwindCSSを設定します。
フォントをインポートします。
簡単な開発サーバーをセットアップします。

プロジェクトディレクトリの設定方法

まず、ターミナルで次のコマンドを実行します。

mkdir gsap-landing
cd gsap-landing
mkdir build src
mkdir build/assets build/static
复制代码

コードは、次のようなフォルダツリーを作成する必要があります。

gsap-着陸構造

プロジェクトディレクトリ構造

GSAPの設定方法

GSAPをインストールするには、build in buildというファイルを作成し、index.htmlその中に次のコードを配置します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"></script>
    <title>Orfice</title>
</head>
<body>
    
</body>
</html>
复制代码

これにより、基本的なHTMLドキュメントが作成され、ヘッダーのスクリプトタグを介してGSAPにインポートされます。

TailwindCSSを設定する方法

TailwindCSSをインストールするには、プロジェクトのルートディレクトリにいることを確認してから、ターミナルで次のコマンドを実行します。

npm install tailwindcss
npx tailwind init
复制代码

これにより、プロジェクトルートに3つの新しいファイルが作成されます：package.json、、。package-lock.jsontailwind.config.js

src次に、という名前のフォルダーにファイルを作成し、input.cssその中に次のコードを配置します。

@tailwind base;
@tailwind components;
@tailwind utilities;
复制代码

プロジェクトのルートディレクトリに戻り、次の内容をtailwind.config.js次のように置き換えます。

module.exports = {
  content: [
  "./build/**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
复制代码

その後、package.jsonファイルを開き、その内容を次のように置き換えます。

{
  "scripts": {
    "build-css": "npx tailwindcss -i ./src/input.css -o ./build/static/output.css --watch"
  },
  "dependencies": {
    "tailwindcss": "^3.0.23"
  }
}
复制代码

次に、ターミナルを開き、次のコマンドを実行します。

npm run build-css
复制代码

このコマンドは、ファイルの作成と更新を処理します。build/static/output.cssこれは、ログインページのスタイルが存在する場所であるため、このチュートリアルが終了するまで、独自のターミナルウィンドウで実行し続ける必要があります。

build/index.html次に、GSAPがインポートしたスクリプトタグの上に次のコードを追加して、CSSをログインページにリンクします。

<link rel="stylesheet" href="static/output.css">
复制代码

これで、TailwindCSSのセットアップは完了です。

フォントをインポートする方法

build/index.htmlヘッダーを次のように置き換えます。

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="static/output.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"></script>
	<title>Orfice</title>
</head>
复制代码

次に、フォントをCSSに適用します。

それを開きsrc/input.css、最後に次のコードを追加します。


@layer base {
    body {
        @apply overflow-hidden h-screen;
        font-family: 'Be Vietnam Pro', sans-serif;
    }
}
复制代码

サーバーの設定方法

開発サーバーをセットアップするには、新しいターミナルウィンドウを開き、プロジェクトのルートディレクトリに移動して、次のコードを実行します。

npm install --save-dev live-server
复制代码

これがあなたがする必要があることです！サーバーを起動するには、ターミナルで次のコマンドを実行します。

live-server build
复制代码

live-serverコマンドが実行されているbuild/index.html限り、localhost：8080プロジェクトに変更を加えると、サービスが提供され、ページが自動的に更新されます。