アイコン(ロゴ)アニメーション

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

デモページを見る

See the Pen 4-1-4ロゴアニメーション by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

動きを実現する仕組み

CSS のアニメーションで天地中央に配置したアイコン(ロゴ)を動かす。
jQuery でローディング画面をフェードアウトする。

[使用するライブラリ]
* jQuery

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/4-1-4.css">
    </head>
  2. body内のローディングを表示させたい場所に以下のHTMLを記載します。
    <div id="splash">
    <div id="splash_logo"><img src="img/loading.svg" alt="" class="fadeUp"></div><!--画像部分は適宜差し換えてください-->
    <!--/splash--></div>
    <div id="container">
    <p>ローディング後、この画面が見えます。</p>
    <!--/container--></div>
  3. body 終了タグ直前にjQueryと動きを制御する自作のJS の2 つを読み込みます。
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXv
    ZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="js/4-1-4.js"></script>
    </body>

自作のCSS内の書き方

/* Loading背景画面設定 */
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#333;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置 */
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定 */
#splash_logo img {
  width:260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
 

自作のJS内の書き方

//logoの表示
$(window).on('load',function(){
  $("#splash").delay(1500).fadeOut('slow');//ローディング画面を1.5秒(1500ms)待機してからフェードアウト
  $("#splash_logo").delay(1200).fadeOut('slow');//ロゴを1.2秒(1200ms)待機してからフェードアウト
});
 

この技術を使ったサンプルサイト

バリエーション
を見る

「機能」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top