はじめに

「ある処理を実行させてから次の処理を実行させたい」という場面があると思います。 今回はページのロードが完了してからある要素の表示を遅らせるtipsです。

DEMO

まずはどんな動きになるかデモをご覧ください。 ページのロードが完了してから、画像が遅れて表示されます。 DEMO

実装していく

▼HTML
<div class="mv">
  <p id="js-delay-bounce-in" class="mv-title js-delay-bounce-in">
    <img src="images/title.png" alt="迎春">
  </p>
  <p id="js-delay-fade-in" class="mv-main js-delay-fade-in">
    <img src="images/main.png" alt="子年のイラスト">
  <p>
  <p id="js-delay-bounce-in2" class="mv-text js-delay-bounce-in">
    <img src="images/text.png" alt="今年もどうぞよろしくお願いいたします2020元旦">
  <p>
<div>
▼SCSS
/*--------------------------------
  animation bounce-in
--------------------------------*/
.bounce-in {
  animation: bounce-in .75s both;
}
@keyframes bounce-in {
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.05, 1.05, 1.05);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
/*--------------------------------
  delay animation bounce-in
--------------------------------*/
.js-delay-bounce-in {
  visibility: hidden;
  opacity: 0; 
  &.is-bounce-in {
    visibility: visible;
    opacity: 1;
  }
}
/*--------------------------------
  delay animation fade-in from under
--------------------------------*/
.js-delay-fade-in {
  transform: translateY(20px);
  visibility: hidden;
  opacity: 0;
  &.is-fade-in {
    transform: translateY(0px);
    transition: all 1s ease;
    visibility: visible;
    opacity: 1; 
  }
}
/*--------------------------------
  mv
--------------------------------*/
.mv {
  &-title {
    &>img {
      width: 230px;
    }
  }
  &-main {
    &>img {
      width: 285px;
    }
  }
  &-text {
    &>img {
      width: 200px;
    }
  }
}
▼JavaScript
/*--------------------------------
  delay animation bounce-in
--------------------------------*/
window.addEventListener("load",function() {
  document.getElementById( "js-delay-bounce-in" ).classList.add( "is-bounce-in","bounce-in" );
}, false)

window.addEventListener("load",function() {
  setTimeout(function(){ 
    document.getElementById( "js-delay-bounce-in2" ).classList.add( "is-bounce-in","bounce-in" );
  },
    (1000 * .8)
  );
}, false)
/*--------------------------------
  delay animation fade-in
--------------------------------*/
window.addEventListener("load",function() {
  setTimeout(function(){ 
    document.getElementById( "js-delay-fade-in" ).classList.add( "is-fade-in" );
  },
    (1000 * 1.6)
  );
}, false)
JavaScriptの部分だけ解説。 まずは、window.addEventListener('load', function() { 〜処理〜 }, false);を使って、DOMツリーに加え画像や全てのスクリプトが読み込まれたら目的の処理をさせます。 window.onload = function() { 〜処理〜 }でも同じ処理はできますがwindow.onloadの記述が複数ある場合、上書きされてしまうので最後に記述したイベントしか実行されません。 ちなみに、'load'の部分を'DOMContentLoaded'にすると「DOMツリーの構築が完了したら目的の処理をさせる」という命令にできます。 あとはsetTimeout()メソッドを使って処理を遅延させます。

さいごに

setTimeout()を使うことでカウントダウンタイマーやスライダーなども作ることができるので素敵ですね。 そして、イベントリスナーの種類は多岐に渡ります。どんなのがあるか調べてみると面白いです。 今更ですが、あけましておめでとうございます。 本年もどうぞよろしくお願いいたします。

参考ページ

https://www.sejuku.net/blog/19754