導(dǎo)入

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

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

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

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

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

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

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

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

Framer モーションを使用すると、両方を?qū)g現(xiàn)できます。両方を一つずつ理解していきましょう。

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

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

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

主な機能

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

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

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

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

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

主な機能

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

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

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

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

次は何ですか？

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

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

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

必要な依存関係をすべて備えた 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 內(nèi)のデフォルトのコードを削除します。最初からスクロール アニメーションに焦點を當(dāng)てていきます。ファイルは次のようになります。
   

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

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

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

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

プロジェクトが設(shè)定されたので、両方のタイプのスクロール アニメーションを 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. 初期狀態(tài)と最終狀態(tài): 初期、アニメーション、またはスタイルの小道具を使用して、要素が最初にどのように見えるかを定義し、useTransform またはスクロール YProgress にリンクされたアニメーションを使用して最終狀態(tài)を制御します。
   

       npm run dev
   

スクロール進行狀況バー

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

   const { scrollYProgress } = useScroll();

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

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

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

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

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

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

1. スクロールの進行狀況の追跡: 進行狀況バーと同様に、useScroll() を使用してページの現(xiàn)在のスクロールの進行狀況を取得します。 scrollYProgress 値の範(fàn)囲は、上部の 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 コンポーネント內(nèi)で、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. セクションのスタイル設(shè)定: テキストは、視覚的な魅力を追加する背景のグラデーションを持つ全畫面セクション內(nèi)の中央に配置されます。背景は紫から藍への滑らかなグラデーションを作成し、ダイナミックなテキストをより際立たせます。
   

     npm install framer-motion
   

使用される概念:

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

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

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

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

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

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

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

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

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

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

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 秒かかり、スムーズに終了します。

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

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

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

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

結(jié)論

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

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

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

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

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