AOSは非常に人気のスクロールアニメーションライブラリですが、それは敏感なデザインといくつかの予想外の欠点があります.Rellaxは、デスクトップとモバイル上で視差アニメーションのための上昇スターです.
私は反応ウェブサイトプロジェクトの両方でプレーした後にこの短いレビューを書きました.

AOS (アニメーション)

AOS すべてのスクロールロジックを処理するアニメーションライブラリです.

長所

超簡単に実装する.
データ属性を追加するdata-aos アニメーションクラスでfade-up フェードアップアニメーションをするには.

<div data-aos="fade-up"></div>

AOSはたくさんの組み込みアニメーションクラスのようなfade-up , fade-in , zoom-in , flip-up .
私たちはJSでAOSを初期化する必要があるだけです、そして、それがViewPortに入るとき、我々のdivは色あせます.

 AOS.init();

カスタムアニメーションも追加できます.

[data-aos="my-fade-up"] {
  transform: translate3d(0, 100px, 0);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="my-fade-up"].aos-animate {
  transform: translate3d(0, 0, 0);
    opacity: 1;
}

データの属性をカスタマイズすることができますアニメーションの持続時間、遅延、またはアンカー、オフセットなどを追加します.
私のプロジェクトでは、アニメーションをフェードインとアップするためにAOSを使用しました.

短所

いいえ、組み込みの応答のサポートを内蔵.
あなただけのモバイルで再生するアニメーションをしたい場合は、あなた自身を作成する必要があります.組み込みクラスが欲しいと言いますfade-up 携帯電話ではなく、デスクトップで再生します.よく、あなたはできません😅. このようにメディアクエリを使ってフェードアップする必要があります.

@media (min-width:1024px) {
  [data-aos="my-fade-up"] {
    transform: translate3d(0, 100px, 0);
    opacity: 0;
    transition-property: transform, opacity;
  }

  [data-aos="my-fade-up"].aos-animate {
    transform: translate3d(0, 0, 0);
      opacity: 1;
  }
}

AOSに関する評定

あなたが知っていないかどうか-またはスクロールロジックを処理するために、アニメーションを作成するには、AOSはリアルタイムのセーバーです!
無効にするか、画面のサイズに応じて別のアニメーションを表示する必要があるユーザーのための大きな選択ではありません.
代替は、CSSアニメーション自身を作成し、スクロールを聞くために交差点オブザーバーAPIを使用することです.私はそれに紹介ポストを作りました.
そこにライトライブラリが組み込まれているsal.js 私は本当に遊ぶのを楽しみにしています.

rellax

Rellax デスクトップ＆モバイル(Parallaxは、モバイル上で動作しないことで有名です)で動作する視差ライブラリです.

長所

超簡単に実装する

要素をクラスに追加します

<div class="rellax">
  I’m slow and smooth
</div> 

で指定したクラスを参照してrellaxを初期化します.

var rellax = new Rellax('.rellax'); 

ReactJSでは、クラスの代わりにrefsを使用することができます.

カスタマイズデータ属性.

たとえば、次のコードは、モバイルとPCの異なる速度で視差を再生するために使用されます.

<div class="rellax" 
  data-rellax-speed="1" 
  data-rellax-mobile-speed="-10"
  data-rellax-desktop-speed="10">
  I’m slow on mobile but fast on pc!
</div> 

私は、私のサイトの主人公セクションのためにそれを使いました:

短所

唯一の欠点は、時々アニメーションがジャンプすることができますです.

それを記録しようとすると非常に悪くなります(私のAMDプロセッサは古いi 3のようです).😄).

rellaxに関する評決

あなたがParallaxを試してみるならば、あなたはそれがモバイルで働いているParallaxを得ることがどれくらい難しいかについてわかっています.rellxは、時折ジャンプを気にしない場合は、リアルタイムのセーバーです😅.
もう一つはgsapを使うことですscrollTrigger plugin .

読書ありがとう😄✨!!

あなたが同意して、同意するものを共有してください.
そして、あなたが最も使用するもの😍.