jQueryスクロールベースのアニメーションの紹介

コアポイント

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

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

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

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

メソッドではなく）。 。

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

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

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

彼らは反応しますか？

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 应用特效和动画
    }
});

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

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

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

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

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

   $(window).scroll(function() {
       if ($(this).scrollTop() > 0) {
           // 应用特效和动画
       }
   });

   スクロール効果の基本を導入したので、4つの異なる例でそれを見てみましょう。

   注：簡単にするために、ウィンドウ幅の属性の異なる値に応じてこれらの効果がどのように変化するかにのみ焦点を当てます。同じプロセスも、ウィンドウの高さ特性にも使用できます。

   例＃1

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

   上記のコードは、

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

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

   このコードは、次のように書くこともできます .banner h2この効果を実行するには、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以下です。この場合、アニメーションは、ウィンドウスクロールバーの上位の位置が600pxを超える場合にのみトリガーされます。

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

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

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

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

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

   以上がjQueryスクロールベースのアニメーションの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。