CSSとJSでページを開いたときにアニメーションのロゴを数秒出す

ページを開いたときに数秒のオープニングを入れるスクリプトを紹介します。

今回はロゴを簡単にアニメーションさせるものおですが、応用すれば色々な演出が可能です。

ファイル構成は

index.html⇒オープニングを挿入するHTML

/js/start.js⇒開始時の操作

/css/style.css⇒スタイル

/images/logo.png⇒表示するロゴ

となります。

デモページ

HTML

まずはオーバーレイさせるブロックからです。

どこでも問題ないですがbodyの最初や最後に入れましょう。

またjavascriptファイルを読み込む記述もします。（jqueryを使用していますので読み込んでいな場合は読み込んでください。）

index.html

<div class="start">
	<p class="srtclass_block">
		<img src="./images/logo.png" alt="logo">
	</p>
</div>
<!-- jqueryを読み込んでいない場合は読み込む <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<script src="./js/start.js"></script>

CSS

CSSスタイルは開始時に画面いっぱいにレイヤーを出してロゴを中央に寄せます。

ロゴには縦のスケール指定でアニメーションをつけます。

style.css

.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.srtclass_block {
	position: fixed;
	z-index: 9001;
	display: block;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height:auto;
}
.srtclass_block img{
	width:100%;
	height:auto;
	animation-name:strfixed;
	animation-timing-function:ease-out;
	animation-fill-mode:forwards;
	animation-duration: 2s;
}
@keyframes strfixed {
	0% {
		opacity:0;
		transform: scaleY(0);
	}
	100% {
		opacity:1;
		transform: scaleY(1);
	}
}

javascript

javascriptはページ開始時に前面にレイヤーをスクリーンに報じしたものを指定時間後に消す作業を行います。

また、レイヤーを出している間にスクロールができないようにロックをかけます。

$(function() { //スクロールを停止 
	scrollpos = $(window).scrollTop();//現在表示位置取得 
	$('body').addClass('scroll-fixed').css({'top': -scrollpos});
	setTimeout(function(){ 
		$('.start').fadeOut(500);
		setTimeout(function(){ 
			$('.start').addClass('srtclass_none');
			$('body').removeClass('scroll-fixed').css({'top': 0});
			window.scrollTo( 0, scrollpos ) ;
		},500);
	},2500);
	//2.5秒後にロゴ含め真っ白背景をフェードアウト 
});

簡単ではありますがページを開いたときのつかみに使えると思います。

SVGでアニメーションを作成したりすれば動画のオープニングのようなことも可能です。