Scarlet CSS Animation Generator. - Arosso

Main Properties
Direction
Fill Mode 

@keyframes slideUp {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

.arosso-slideUp {
  animation: slideUp 0.8s 0.1s 2 ease-in-out alternate-reverse;
}
コピー ＋オプション
Slide Up

CSSアニメーション要素の発動条件を、スクロールで画面内に表示されたときに実行させる

通常のCSSアニメーションはページが読み込まれた直後にすぐに実行されてしまいます。

そこで、ファーストビューの外にあるアニメーション要素が画面内に表示されて初めて実行させるための便利なJavaScript Documentを解放しています。
必要な方は、ソースコードの改変も含めてどうぞご自由にお使いください。

このスクリプトでは、IntersectionObserverを使用して、スクロールイベントのリスニングを減らしパフォーマンスを向上させています。
また、アニメーション要素が一度画面外に出て、もう一度表示された際に再びアニメーションが実行されるようにしています。

このスクリプトに沿って、.animate,.animatedクラスが追加されたCSSアニメーションコードをセットでお使いください。


@keyframes slideUp {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

.animate { 
  opacity: 0;
  transition: opacity 0.3s ease;
}
.animated { 
  opacity: 1;
  transition: opacity 0.3s ease;
}
.arosso-slideUp.animated {
  animation: slideUp 0.8s 0.1s 2 ease-in-out alternate-reverse;
}
コピー
*1.アニメーションの種類によっては意図した動作にならない場合があります。その場合は、Delay,Direction,FillModeプロパティを削除したり値の見直しをお勧めします。 *2.あらゆる導入環境下でスクリプト並びにCSSコードが正常に動作する保証はいたしません。コードの一部を書き換えるなどして適宜ご使用ください。 

/* Arosso JavaScript Document */

document.addEventListener("DOMContentLoaded", () => {
  const animationElements = document.querySelectorAll(".animate");
  const options = {
    root: null,
    rootMargin: "0px", // ビューポートのオフセット値
    threshold: 0.3 // .animate要素が30%表示された時にコールバック
  };
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      const element = entry.target;
      if (entry.isIntersecting) {
        element.classList.add("animated");
      } else {　// アニメーションが再び実行されないようにする場合は else以下*を削除
        if (element.classList.contains("animated")) {
          element.classList.remove("animated");
        }
      }　// *ここまでを削除
    });
  };
  const observer = new IntersectionObserver(callback, options);
  animationElements.forEach(element => {
    observer.observe(element);
  });
});
コピー