ローディングアニメーション

当ページのリンクには広告が含まれています。

Swellでwebサイトを制作するときに、いろいろ調べてカスタマイズした方法を備忘録としていきたいと思います。
今までは、練習で作ったサイトを見直してカスタマイズ方法をコピーしていましたが、

Nao

あのサイトを作ったときのCSSってなんだっけ？

英語の単語帳のようにまとめてあれば、いざ使いたいときに便利かなと思いました。

トップページにローディングアニメーションを実装する方法

ほかの方のサイトを見ていて、トップページのメインビジュアルの前にロゴが出てきたり、短いアニメーションが出てくるのは、何だろうと思っていました。

Naio

ローディングアニメーションというらしい。
Webサイトのコンテンツが読み込まれている間に表示されるアニメーションのことです。

そこで、制作中の自サイトに装着してみました。

スマホでも確認できました。

制作方法①　ブログパーツを作成

ブログパーツを新規登録する。

フルワイドブロックにロゴを配置
ロゴの大きさはここの見た目通りになります。

このブログパーツを選択した状態で右側の「高度な設定」にて
「追加CSSクラス」のところに
「loading」と入力します。

これを保存します。

制作方法②コード入力 CSS

・サイトをホームページ設定にしているので
　そのトップページとなる固定ページの編集画面一番下のとこの「CSS用コード」にコードを入力

.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  background-color: #ffff;/* ロゴの背景色 */
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: fadeOut 5s 3s forwards;
}

.loading img {
  opacity: 0;
  animation: logo_fade 5s 0.2s forwards;
  width: 400px; /* ロゴのサイズを指定（パソコン） */
}

@media screen and (max-width: 959px) {
  .loading img {
    width: 300px; /* ロゴのサイズを指定（スマホ） */
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);/* ロゴの移動距離（上に20px) */
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}

.loading {
  pointer-events: none;
}

制作方法③コード入力 JS

・カスタマイザー＞高度な設定＞bodyタグ終了直前に出力するコード

<script>
  //ローディング画面表示用
  document.addEventListener('DOMContentLoaded', function () {
    var webStorage = function () {
      if (sessionStorage.getItem('access')) {
        // 2回目以降のアクセス
        document.querySelector('.loading').style.display = 'none';
      } else {
        // 初回アクセス
        sessionStorage.setItem('access', 'true');
        setTimeout(function () {
          document.querySelector('.loading').classList.add('loaded');
        }, 2500); // ローディングを表示する時間
      }
    };
    webStorage();
  });
</script>

ブログパーツの設置

最後に、作ったローディング画面用ブログパーツを、ウィジェット機能を使って配置します。

・外観→ウィジェット→フッター直前→ウィジェットの追加→カスタムHTML

「フッター直前」に「カスタムHTMLウィジェット」を追加し
下記コードをコピペする。

<div class="loading">
※①で作ったブログパーツのショートコードに置き換える
</div>

Naio

完成です

まとめ

SWELLに超簡単にプラグインなしでローディングアニメを実装する方法の紹介でした。