アニメーション終了後にサイトを表示させる方法

こんにちは！
9月も終わりに近づいて、毎日毎日あっという間に終わっていきますね～

すぐ紅葉の季節が来るんでしょうね…汗
秋が楽しみです！

今回はアニメーション終了後にサイトを表示させる方法をご紹介します。
いろんなやり方がありますので、私のやり方は1つの参考程度に見ていただければと思ってます。

自分でアニメーション画像を作成して、サイトに入れたはいいけどなんかしたいことと違う。
ということで、備忘録として残しておくことにしました。

ちなみに今回私が実装したのは「jQueryでsetTimeoutを使用してfunctionの実行を遅らせる」という方法です。
もっと簡単なやり方もあるんですが、setTimeoutを使うことが最近多いのでそれも含めて書いておこうと思います。

流れとしては

●サイトを開いた瞬間、アニメーションがはじまる
↓
●アニメーションが終わったら、サイトを表示する

と言う流れです。

実際のデモがこんな感じ。(右下にある”RETURN”ボタン押してみてください。)

See the Pen アニメーション終了後にサイトを表示 by sayuri (@giraffeweb) on CodePen.0

HTMLは最初に出すアニメーションのブロックと、次に表示させたいサイトのHTMLのブロックをdivで囲んで分けているだけの単純なソースです。


<div class="anime">
<img src="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/cameras.gif"/>
</div>
//ここまでが最初のアニメーションのブロック

<div class="mainSite">
  <h1>I'm love it.</h1>
</div>
//アニメーション終了後に表示させるブロック

付随してcssも同様な感じです。

body,html {
 width: 100%;
 height: 100vh;
 margin: 0;
 padding: 0;
  overflow: hidden;
}
 
.anime {
 width: 100vw;
 height: 100vh;
 background-color: #cb5151;
 position: relative;
}
 
.anime img {
 display: block;
 width: auto;
 position: absolute;
 top: 50%;
 left: 50%;
  -webkit-transform: translate(-50%,-50%);
 -moz-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 -o-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
}
 
.mainSite {
 width: 100%;
 height: 100vh;
  padding: 0:
  margin; 0;
  background-image: url(https://creatornote.nakweb.com/wp-content/themes/giraffe/images/camera.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.mainSite h1 {
  font-family: 'Playfair Display', serif;
  padding-left: 60px;
  padding-top: 60px;
  margin: 0;
  font-size: 50px;
}

重要なのがsetTimeoutを使用してfunctionの実行を遅らせる指示を出してあげること。

まず、3秒後にmainSiteのブロックがフェードアウトする指示を出します。

$(function(){
$(".mainSite").css("display", "none");
setTimeout(function() {
    $('.anime').fadeOut();
	}, 3000);
});

そのあとに、最初はmainSiteのブロックをopacity:’0’にして表示させないようにしておいて
3秒後に表示させる指示を出します。

opacity:1;の横にある1000は1秒かけて表示するという意味です。

$(function(){
    $(".mainSite").css({opacity:'0'});
    setTimeout(function(){
    $(".mainSite").css("display", "block");
    $(".mainSite").stop().animate({opacity:'1'},1000);
    },3000);
});

結構簡単に実装できますよね。
参考になったでしょうか？setTimeoutはいろんなところで自由に使えるので
みなさんも使ってみてください。

Share: