私もインタラクティブなページを作りましょう.

fade-効果による効果

開発が始まったばかりの頃は、通常機能を中心にしていました.
当たり前のことですが、機能中心の開発で、結果は私がやったほど満足できないことが多いです.この場合、結果の品質を向上させる非常に簡単な方法があります.
その中でもFade-effectを選びました

フェードアウト-効果

個人的には、簡潔で直感的なページの例だと思います.
「ログイン」ページには、各アイコンに独自の機能があり、スクロールしてユーザーに動的な応答を提供するアイコンがあります.

fade-effectを使用すると、より高度なページを作成できます.

3つのfade効果を実現する方法

この記事では、3つの方法を紹介しています.

1.jqueryの使い方

jqueryを使用してスクロールの位置を決定し、fade効果を生成する方法

これは私が探した最も古典的で、最も例のある方法です.
jqueryを使用してスクロールの位置を検索し、位置に基づいて各エンティティの透明度とスライド値を指定し、cssを使用してスタイルを変更します.
#メリット
古典的な方法なので、いろいろな例があります.
#欠点
jqueryとfade効果を使用するすべてのエンティティは、古典的な方法を使用することによって多くのオーバーヘッドを発生します.
コード実装

  $(window).on("load", function () {
    function fade() {
      let animation_height = $(window).innerHeight() * 0.5;
      let ratio = Math.round((1 / animation_height) * 10000) / 10000;
      $(".fade").each(function () {
        let objectTop = $(this).offset().top;
        let windowBottom = $(window).scrollTop() + $(window).innerHeight();
        if (objectTop < windowBottom) {
          if (objectTop < windowBottom - animation_height) {
            $(this).css({
              transition: "opacity 0.1s linear",
              transition: "left 0.1s linear",
              opacity: 1,
              left: "0px",
            });
          } else {
            $(this).css({
              transition: "opacity 0.5s linear",
              opacity: (windowBottom - objectTop) * ratio,
              transition: "left 0.5s linear",
              left: `${200 * (1 - (windowBottom - objectTop) * ratio)}px`,
            });
          }
        } else {
          $(this).css({
            opacity: 0,
            left: "200px",
          });
        }
      });
    }
    $(".fade").css({
      opacity: 0,
      left: "200px",
    });
    fade();

    $(window).scroll(function () {
      fade();
    });
  });

.fade {
  position: relative;
}

<section class="fade" id="intro">
 </section>

2.aosライブラリの使用方法

最もポピュラーなAnimation OnScollライブラリの使用方法

これは私が探した最も簡単な方法です.
大衆化されたオープンソースなので、いろいろな効果があります(Flip、Slide、Zoom、Anchor、Easing).
さらにreadmeの各オプションは、実装方法をよくリストしているので、これらのオプションを読んで従うことができます.
#メリット
優れた利便性、機能性
#欠点
まだ見つかっていません.
多くの場合、ほとんどの機能が発売され、準備が整っています.
しかし、最大の問題は、私はこの事実を知らないことです.

3.交差点観測器の利用方法

クロスオブザーバは、ビューポートと交差する領域を非同期で観察する機能を提供します。

つまり、現在の画面に表示されているエンティティが見つかり、何かを提供します.
したがって、この関数を使用すると、追跡するエンティティを位置決めしてobserverに登録し、そのエンティティがビューポートに入るときに実行する操作を定義できます.その後、セグメントは必要な操作を実行します.(ビューポートに入るとき)
コード実装

  const targets = document.querySelectorAll(".fade-class");
  const options = { root: null, threshold: 0.1, rootMargin: "-0px" };
  const observer = new IntersectionObserver(function (entries, observer) {
    entries.forEach((entry) => {
      const container = entry.target;
      if (entry.isIntersecting) {
        container.classList.add("fade-in");
      } else {
        container.classList.remove("fade-in");
      }
    });
  }, options);

  targets.forEach((target) => {
    observer.observe(target);
  });

.fade-class {
  position: relative;
  left: 200px;
  opacity: 0;
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s linear;
}
.fade-in {
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s linear;
  left: 0px;
  opacity: 1;
}

<section class="fade-class" id="intro">
</section>

終わりの時。

この3つの方法で実施した.
個人的には、快適さを選ぶ順番は以下の通りです.

aosライブラリ

を使用

intersection observer

jquery

したがって、直感的な効果が必要な場合は、ライブラリを使用して実施することを推奨します.
視覚的な効果だけでなく、より多くの機能が必要な場合は、交差点の観察者をお勧めします.
jqueryは書かないで
みなさんのFADE効果の実現方法は何ですか?友達の秘訣もコメントでシェアしましょう