コアポイント

• スクロールベースのアニメーションと特殊効果は、Web開発者が動(dòng)的でインタラクティブなWebエクスペリエンスを作成できるようにするテクノロジーです。ユーザーがページを下にスクロールし、CSSとjQueryで操作および実裝するとトリガーされます。
レスポンシブなスクロールベースの効果を作成するには、ブラウザウィンドウの幅と高さの特性を定義する必要があります。これらのプロパティがなければ、ユーザーがウィンドウをサイズ変更すると、効果は適切に機(jī)能しません。
• このチュートリアルは、ウィンドウ幅屬性の値に基づいてどのように変化するかを示す4つのスクロールベースのアニメーションと効果の例を提供します。これらの例には、不透明度、高さ、幅、左、右、およびさまざまな要素の底部プロパティのアニメーションが含まれます。
• このチュートリアルには、スムーズなスクロール効果の作成、スクロール方向の検出、jQueryアニメーションの停止など、一般的な問題の解決策を提供するFAQセクションも含まれています。
Webページのテクノロジーは、1日ごとに変化しており、新しいテクノロジーとテクニックが次々と登場(chǎng)し、いくつかの古いテクノロジーが徐々に排除されています。したがって、Webデザイナーとフロントエンド開発者は、最新のWebデザインのトレンドの多くに精通している必要があります。視差のスクロール、固定ヘッダー、フラットデザイン、シングルページのWebサイト、アニメーションは、現(xiàn)在最もホットなWebトレンドの一部です。

このチュートリアルでは、CSSとjQueryを使用してスクロールベースのアニメーションと特殊効果を作成する方法を?qū)Wびます。

このデモをクリックして、作成する4つの特殊効果を表示できます。しかし、特殊効果の説明を始める前に、簡(jiǎn)単に紹介しましょう。

注：このチュートリアルで使用されているコードは、オブジェクトのキャッシングとCSSアニメーションを使用することで改善できます（jqueryの

メソッドではなく）。 。

animate()スクロールベースのアニメーションと特殊効果とは何ですか？

スクロールベースのアニメーションと特殊効果は、フロントエンドの開発者がリッチでインタラクティブなWebエクスペリエンスを作成できるようにする斬新でよく知られているアプローチです。ユーザーがページを下にスクロールし、CSSとjQueryを使用して簡(jiǎn)単に操作および実裝するとトリガーされます。 ユーザーがページを下にスクロールしているかどうかを検出するには、jQueryのscroll（）イベントを使用します。

ユーザーがスクロールしていることがわかったら、jQueryのscrolltop（）メソッドを使用して、ウィンドウスクロールバーの垂直位置を取得し、必要な特殊効果を適用できます。

彼らは反応しますか？

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 應(yīng)用特效和動(dòng)畫
    }
});

レスポンシブスクロールベースの効果を作成する場(chǎng)合は、次のプロパティを定義する必要があります。

ブラウザウィンドウの幅プロパティ。 ブラウザウィンドウの高さプロパティ。

これらのプロパティが定義されていない場(chǎng)合、ユーザーがウィンドウを水平または垂直にサイズするときに適切に機(jī)能しない「靜的な」スクロールベースの効果を作成します。

jQueryの幅（）およびheight（）メソッドを使用して、これらのプロパティの値を簡(jiǎn)単に取得できます。

1. 次のコードスニペットには、スクロールベースの効果を作成するために考慮しなければならないすべての必要なチェックが表示されます。

   $(window).scroll(function() {
       if ($(this).scrollTop() > 0) {
           // 應(yīng)用特效和動(dòng)畫
       }
   });

   スクロール効果の基本を?qū)毪筏郡韦恰?つの異なる例でそれを見てみましょう。

   注：簡(jiǎn)単にするために、ウィンドウ幅の屬性の異なる値に応じてこれらの効果がどのように変化するかにのみ焦點(diǎn)を當(dāng)てます。同じプロセスも、ウィンドウの高さ特性にも使用できます。

   例＃1

   この効果は、ウィンドウスクロールバーの上位の位置が60pxを超えるとトリガーされます。この場(chǎng)合、実行されたコードスニペットは次のとおりです。

   上記のコードは、

   $(window).scroll(function() {
       if ($(this).width() <= 549 && $(this).height() <= 549 && $(this).scrollTop() > 600) {
           // 應(yīng)用特效
       } else if ($(this).width() > 549 && $(this).width() <= 991 && $(this).scrollTop() > 480) {
           // 應(yīng)用特效
       } else if ($(this).scrollTop() > 450) {
           // 應(yīng)用特效
       }
   });

   要素の子要素を隠し、最初に隠された子要素を示しています。

   このコードは、次のように書くこともできます .banner h2この効果を?qū)g行するには、Codepenの完全なデモをご覧ください。 .info

   の例

   次の特殊効果は、ブラウザスクロールバーの上位位置だけでなく、ウィンドウの幅にも依存します。より具體的には、次の仮定を作成しました

   if ($(window).scrollTop() > 60) {
       $('.banner h2').css('display', 'none');
       $('.banner .info').css('display', 'block');
   } else {
       $('.banner h2').css('display', 'block');
       $('.banner .info').css('display', 'none');
   }

   ウィンドウの幅屬性の値は、549px以下です。この場(chǎng)合、アニメーションは、ウィンドウスクロールバーの上位の位置が600pxを超える場(chǎng)合にのみトリガーされます。

   ウィンドウの幅屬性の値は、550pxから991pxの間です。この場(chǎng)合、ウィンドウスクロールバーの上位位置が480pxを超える場(chǎng)合にのみ、アニメーションがトリガーされます。 ブラウザの幅屬性の値は991pxを超えています。この場(chǎng)合、ウィンドウスクロールバーの上位位置が450pxを超える場(chǎng)合にのみ、アニメーションがトリガーされます。

   上記の仮定は、次のコードスニペットにつながります：
   実行されるアニメーションを含むコードは次のとおりです。
   上記のコードは、
   3. 要素の不透明度、高さ、幅をアニメーション化します。
   この効果を?qū)g行するには、Codepenの完全なデモをご覧ください。

   if ($(window).scrollTop() > 60) {
       $('.banner h2').hide();
       $('.banner .info').show();
   } else {
       $('.banner h2').show();
       $('.banner .info').hide();
   }

   （その後の例3および4、および結(jié)論とFAQの部分は、スペースの制限により、元のテキストに基づいて同様の書き直しを行い、元の意味を変更せず、語彙の一部を置き換えて、文の構(gòu)造。）

   寫真の元の形式と位置を保持することを忘れないでください。

   以上がjQueryスクロールベースのアニメーションの紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。