フレーマー モーションを使用して美しいスクロール アニメーションを作成する

導入

スクロールは画面上で毎日行っていることですが、スクロールがユーザー エクスペリエンスにどのような影響を与えるか考えたことがありますか?今日の世界では、スクロールはユーザーにスムーズで満足のいくエクスペリエンスを提供する方法でもあります。 Framer Motion などのツールを使用すると、開発者はスクロールを魅力的で視覚的に魅力的なエクスペリエンスに変えることができます。

今日は、スクロールをアニメーション化するさまざまな方法を検討します。スクロールアニメーションの種類とその使い方について学びます。パターンを理解して、プロジェクトやサイトにスクロール アニメーションを追加できるようにします。

Next.js で Framer Motion を使用してアニメーションを作成します。他のフレームワークやライブラリを使用したい場合は、それを使用できます。

それでは、早速始めましょう。

スクロールアニメーションの種類

スクロール アニメーションには 2 種類あります:

1. スクロール-リンク アニメーション: スクロールした距離に基づいて移動または変化するアニメーション。スクロールすると要素が継続的に更新されます。

2. スクロール-トリガー アニメーション: 要素がビューポートに出入りすると、通常のアニメーションがトリガーされます。

Framer モーションを使用すると、両方を実現できます。両方を一つずつ理解していきましょう。

スクロール連動アニメーション

スクロール連動アニメーションとは、ユーザーがスクロールした距離にアニメーションの進行や動きが直接連動するアニメーションです。このタイプのアニメーションでは、ユーザーがスクロールするにつれて要素が連続的に変化します。

これは、あなたがポイント 1 にいる場合、アニメーションはあなたを追跡し、アニメーションもポイント 1 にいることを意味します。そして、スクロールしてポイント 2 に移動すると、アニメーションがそのポイントまでフォローします。

主な機能

• アニメーションはスクロールの進行状況と 同期されます。
• スクロールすると、スクロール量に応じてアニメーションがリアルタイムで更新されます。
• これらのアニメーションには、要素の移動、拡大縮小、回転、または外観の変更が含まれる場合があり、通常は Framer Motion の useScroll フックと useTransform フック (これらについては後ほど学習します) を使用します。

スクロールトリガーアニメーション

スクロール トリガー アニメーションは、スクロール中に要素が特定のビューポートに出入りするときに発生します。これは、ユーザーがページの特定の部分までスクロールしたときにのみアニメーションが開始されることを意味します。

つまり、ポイント 1 にいて、ポイント 3 にスクロール トリガーのアニメーションを設定した場合、このアニメーションはポイント 3 で発生します。これは、そのビューポート (この場合はポイント 3) に到達した場合にのみアニメーションがトリガーされることを意味します

これを理解するには、このビデオをチェックしてください。ここで、オレンジ色の要素がビューポートに表示されると、その要素が画面上に完全に表示され、その時点でナビゲーションバーが表示されることがわかります。

主な機能

• スクロール位置によってトリガー: アニメーションは、スクロールリンク アニメーションのようにスクロールと継続的に同期されるのではなく、特定のスクロール位置に到達するとアクティブ化されます。これは通常、whileInView や onEnter などの条件を使用して実現されます。

• 個別アニメーション: スクロールリンク アニメーションとは異なり、スクロールトリガー アニメーションは、要素が要素に出入りするときなど、特定の瞬間に発生します。ビューポート。これらには、フェードイン、スライドイン、またはユーザーが特定の点を超えてスクロールするときに一度だけ発生するその他の視覚効果が含まれる場合があります。

• 1 回限りのアニメーションまたは反復可能なアニメーション: スクロール トリガー アニメーションは、要素が最初に表示されたときに 1 回だけ再生されるように設定することも、要素が表示されるたびに繰り返すように設定することもできます。ユースケースに応じて、要素が再度ビューポートに入ります。
  

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

次は何ですか？

これら 2 種類のスクロール アニメーションとその違いを理解しました。次に、これらのアニメーションの作成に使用されるパターンを理解しましょう。これにより、任意のプロジェクトにスクロール アニメーションを追加できるようになります。

まず、これを実際に理解するためにプロジェクトを設定し、次に両方のタイプのアニメーションを作成します。

プロジェクトのセットアップ

必要な依存関係をすべて備えた Next.js プロジェクトをセットアップすることから始めましょう。このプロジェクトでは StalkBlitz を使用しますが、VSCode も使用できます。すべての手順は VSCode の観点から説明しますので、手順に従うことができます。

1. TypeScript を使用して新しい Next.js プロジェクトを作成します:
   

   npx create-next-app@latest
   

   インストール時に、次のプロンプトが表示されます:
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

2. Framer Motion をインストールします
   

     npm install framer-motion
   

3. デフォルトのファイルをクリーンアップします。
   app/page.tsx 内のデフォルトのコードを削除します。最初からスクロール アニメーションに焦点を当てていきます。ファイルは次のようになります。
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

4. 開発サーバーを起動します
   

     <motion.div
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true }}  // animation will occur only once
     />
   
   

スクロールアニメーションの作成

プロジェクトが設定されたので、両方のタイプのスクロール アニメーションを 1 つずつ作成できます。 app/page.tsx ファイルで直接コードの記述を開始することも、別のコンポーネントを作成してそれらすべてを app/page.tsx ファイルにインポートすることもできます。

スクロール連動アニメーションの作成

スクロールリンクされたアニメーションの例がいくつかあります:

• スクロール進行状況バー: ユーザーがページを下にスクロールすると表示される円形または線形の進行状況バー。

• 視差スクロール: 背景の画像または要素が前景に対して異なる速度で移動し、スクロールすると奥行き効果が生まれます。

• フェードイン要素: ユーザーがスクロールすると、コンテンツがビューにフェードインします。

• スケール変換: スクロールの進行状況に応じて、要素のサイズが徐々に拡大または縮小します。など

アニメーションを作成しましょう。 スクロールリンクアニメーションを作成する際には、これらのメソッドとフレーマー モーションのフックを頻繁に使用します。

1. スクロール進行状況検出 (useScroll): ユーザーのスクロール位置を追跡し、通常はページの進行状況を表す 0 から 1 までの値を返します。
   

   npx create-next-app@latest
   

2. スクロール データの変換 (useTransform): スクロール位置を不透明度、スケール、位置などの特定のアニメーション プロパティにマップします。これを使用して、スクロール中にフェード、移動、回転、拡大縮小、色の変更などのアニメーションをトリガーします。
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

3. モーション要素を使用したアニメーション: ターゲット要素を motion.div (または任意のモーション コンポーネント) でラップし、アニメーションをスクロールの進行状況にリンクします。
   

     npm install framer-motion
   

4. トランジション: スムーズなトランジションを適用して、アニメーションを滑らかで自然に感じさせます。
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

5. 初期状態と最終状態: 初期、アニメーション、またはスタイルの小道具を使用して、要素が最初にどのように見えるかを定義し、useTransform またはスクロール YProgress にリンクされたアニメーションを使用して最終状態を制御します。
   

       npm run dev
   

スクロール進行状況バー

まず、スクロール進行状況バーを作成します。これを行うには、テキスト エディタを開いて新しいコンポーネントを作成し、そこにコードを書き始めます。

   const { scrollYProgress } = useScroll();

ここでは以下を使用しました:

• useScroll: スクロール位置を 0 から 1 までの正規化された値として提供します。

• useTransform: スクロールの進行状況を、進行状況の円のストローク ダッシュ配列または適用したいその他の変換のいずれであるかに関係なく、必要な特定の値の範囲にマップします。

• モーション コンポーネント: Framer Motion の motion.circle を使用して、スクロールに基づいてストロークの長さをリアルタイムでアニメーション化します。

ダイナミックスケーリングテキストアニメーション

この例では、Framer Motion を使用して、テキスト要素のスクロールリンクされた 動的スケーリング効果 を作成します。

1. スクロールの進行状況の追跡: 進行状況バーと同様に、useScroll() を使用してページの現在のスクロールの進行状況を取得します。 scrollYProgress 値の範囲は、上部の 0 から完全にスクロールしたときの 1 までです。
   

     <motion.div
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true }}  // animation will occur only once
     />
   
   

2. スケールを制御するためのスクロール値の変換: useTransform() を使用して、スクロールの進行状況をユーザーのスクロールに応じて動的に変化するスケール値に変換します。この場合、scrollYProgress を [0, 0.5, 1] からスケール値 [1, 2, 1] にマップします。これは、テキストが元のサイズから拡大し、スクロールの中央でサイズが 2 倍になり、縮小することを意味します。一番下に到達したら元に戻ります。
   

   npx create-next-app@latest
   

3. テキスト要素のアニメーション化: motion.h1 コンポーネント内で、style プロパティにscaleValue を使用して、スクロール位置に基づいてテキストのスケーリング効果をスムーズにアニメーション化します。ユーザーがスクロールすると、テキストが「拡大」および「縮小」します。
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

4. セクションのスタイル設定: テキストは、視覚的な魅力を追加する背景のグラデーションを持つ全画面セクション内の中央に配置されます。背景は紫から藍への滑らかなグラデーションを作成し、ダイナミックなテキストをより際立たせます。
   

     npm install framer-motion
   

使用される概念:

• useScroll: このフックを再度使用して、ページのスクロールの進行状況を追跡し、アニメーションのトリガーとして機能します。

• useTransform: ここでは、スクロールの進行状況をスケール値にマッピングし、スクロール イベント中にテキストを滑らかに拡大または縮小します。

• motion コンポーネント: motion.h1 コンポーネントはリアルタイムでアニメーション化され、スクロール値の変化に応じてスケールが動的に調整されます。

私たちは再び同じ概念を使用しました。 useScroll use変形とモーション。つまり、これはスクロールリンクの部分です。次に、スクロールトリガーアニメーションを作成しましょう。

スクロールトリガーアニメーションの作成

スクロール トリガー アニメーションは、いくつかの例では動作しません。スクロール アニメーションをページの特定のコンポーネントにリンクできます。たとえば、2 つの要素とテキストを含む div を含むランディング ページがあるとします。現在、ページにはアニメーションがありませんが、ビューポートが表示されたときにアクティブになるアニメーションを追加したいと考えています。

これには、スクロールトリガーのアニメーションを使用します。前に学んだように、スクロール トリガー アニメーションは、特定のビューポートが表示されると発生します。そこで、このコードに Framer Motion 要素を追加しましょう。

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

1. framer-motion からモーションをインポートします

2. コンポーネント全体はセクション要素でラップされており、いくつかの基本的なスタイルが設定されています。

3. これは最初のモーション div です。メインコンテンツ (見出しと段落) が含まれます。これは、initial と whileInView を使用して、スクロール トリガーのアニメーションを作成します。

   initial={{ opacity: 0, y: 50 }}: 最初はボックスは非表示 (opacity: 0) で、50 ピクセル下に配置されます (y: 50)。
   whileInView={{ opacity: 1, y: 0 }}: ユーザーがビューにスクロールすると、完全に表示され (opacity: 1)、通常の位置 (y: 0) に移動します。
   トランジション={{ デュレーション: 0.8, イーズ: 'easeOut' }}: トランジションには 0.8 秒かかり、スムーズに終了します。

   内部のコンテンツは Tailwind クラスでスタイル設定され、パディング、不透明度 90% の背景、影、丸い角、最大幅が与えられます。

4. その後、2 番目のモーション div (上から下へのアニメーション テキスト) ができます。この は画面の上部から下に移動するテキストをアニメーション化します:

   initial={{ y: -100, opacity: 0 }}: テキストは通常​​の位置より 100 ピクセル上から始まり、表示されません。
   whileInView={{ y: 0, opacity: 1 }}: ビューに入ると、通常の位置に移動して完全に見えるようになります。
   トランジション={{ 遅延: 0.5、持続時間: 0.8 }}: アニメーションが開始される前に 0.5 秒の遅延があり、時間差効果が与えられます。

最終的な出力は次のようになります。

結論

今日のブログはここまでです。 useScroll、useTransition、whileInView の初期状態と最終状態など、これらのアニメーションの作成中に使用されるいくつかのメソッドを含む 2 種類のアニメーションについて説明します。

StalkBliz プロジェクトに追加したアニメーション サンプルを含むすべてのコード。ここでチェックして、コード付きのスクロール アニメーションのサンプルをさらに見ることができます。スクロール アニメーションの小道具、メソッド、例をさらに詳しく知りたい場合は、ここで Framer Motion のスクロール ドキュメントをチェックしてください。

このブログを読んでいただきありがとうございます。そこから何かを学んだ場合は、「いいね」を押して、友人やコミュニティと共有してください。私はブログを書いて、JavaScript、TypeScript、オープンソース、その他の Web 開発関連のトピックに関するコンテンツを共有しています。私のソーシャルメディアでお気軽にフォローしてください。次回でお会いしましょう。ありがとうございます:)

• ツイッター
• リンクトイン
• GitHub

以上がフレーマー モーションを使用して美しいスクロール アニメーションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。