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

CSSCSS

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

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

ファイル構成は

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でアニメーションを作成したりすれば動画のオープニングのようなことも可能です。

コメント

タイトルとURLをコピーしました