ロゴ中央表示のローディングエフェクト

2019年11月28日 | Web

ウェブサイトを読み込む際に表示されるjQueryで簡単に実装できるローディング画面のエフェクトを作成しましたので掲載します。今回作りましたのは、読み込み時にロゴ（画像）を中央に表示し、読み込み完了後にバックグラウンドが左から右へアニメーションで移動していくエフェクトです。

DEMO

HTML


<div id="loader">
    <div class="loader-slide">
     <img src="images/logo.png" />
    </div>
  </div>

CSS


#loader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
}
#loader .loader-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #efefef;

}
#loader .loader-slide img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 40px;
}
#loader .loader-slide.open {
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 1s;
}
@keyframes slideOut {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

CSSの【translateX】を【translateY】に変更すると縦のアニメーションに変更できます。下から上へ幕が上がる様なアニメーションも試してみてください。

JS

jQueryのCDN読み込みをお忘れなく！！下記のCDNは、動作チェック済みです。


https://code.jquery.com/jquery-2.2.4.min.js

scriptのソースは下記になります。



$(function() {
$(window).on('load');
	$('.loader-slide').addClass('open');
	setTimeout(function(){
 	$('#loader').css('display','none');
 	},2000);
});