blogImg

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

こんにちは!WEBデザイナーのANAです。

今回は『アニメーション終了後のサイトを表示させる方法』をご紹介しています。

アニメーションを作成して、つくっているサイトに入れたはいいけど、アニメーションがただサイトの上にのっているだけ…なんじゃこりゃ状態。が今回このブログをかくきっかけになった出来事。

ここのブログにもよく登場するWATANABEさん(*’ω’)がAdobe edge animeteで素敵なアニメーションをつくってくれたのに、うまくサイトに実装できてない!

 

というわけで、簡単なやり方でなんとかできないか?と思いやってみたのが

「jQueryでsetTimeoutを使用してfunctionの実行を遅らせる」という方法。

つまりどんなことがしたいかというと、

サイトを開いた瞬間、アニメーションがはじまる⇒そのアニメーションが終わったら、本来の表示したいサイトを出す

 

と言う流れ。

今回Bike GIFをお借りして簡単に方法をご紹介しようと思います!

 

 

 

アニメーションを表示させる

 

anime1

まずはここから!
先ほどのアニメーションをサイトに入れておきます。

で、アニメーション終了後に表示させたいソースも書いておきます。

HTMLは以下のような感じ。

<div class="anime">
<img src="http://smile-design.bz/tight/blog/anai/bicycle-gif.gif"/>
</div>
<div class="mainSite">

アニメーションが終わったらこれが表示されます。
</div>

css


body,html {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

.anime {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 background-color: #E9E3E3;
 position: relative;
}

.anime img {
 display: block;
 position: absolute;
 top: 28%;
 left: 40%;
}

.mainSite {
 width: 100%;
 height: 100%;
 max-height: 1080px;
 background-color: #FC6;
 position: relative;
}

.mainSite p {
 font-size: 160%;
 color: #FFF;
 position: absolute;
 top: 42%;
 left: 40%;
}

 

今こんな風にサイトが見えています。

【URL】http://smile-design.bz/tight/blog/anime1.html

 

 

 

 

アニメーションを○○秒後に消す!

 

anime2

 

 

では次のステップ!

以下のjQueryでsetTimeoutを使用します。

$function(){
setTimeout(function(){
                  ここに処理をかくよ!
},5000);//5秒数後
});

 

 今回は約4秒後に、自転車のアニメーションをフェードアウトしたいので以下のように指示をします。

 

$function(){
setTimeout(function(){
$('.anime').fadeOut();
},3800);//約4秒数後
});

 

 

たったこれだけでアニメーションが指定した秒あとにフェードアウトして消えてくれます。

 

 

 

 

ただ問題が、確かに約4秒後にアニメーションは消えて次の要素が出てきてくれるのだけど、
アニメーション再生中もスクロールしてしまえば、下にある要素が見えてしまう。

 

しかも、フェードアウトしたあとの、要素の出方がぱきっとしている…。

 

 

気にいらない私はもうひと加え!

 

 

 

アニメーションを再生中は下のコンテンツを出さない!

 

やり方としてはjQueryでcss指定してあげる。

 

 

アニメーションが再生中は下のコンテンツは非表示にするという指示を出してあげればいいのです。

$function(){
$(".anime").css("display", "none");//アニメーション中は非表示
setTimeout(function(){
$('.anime').fadeOut();
},3800);//約4秒数後
});

こうすれば、アニメーションが流れている間は消えています。
ただ、これだけの指示だとずっとdisplay:noneで
非表示のままなので、3.8秒後に表示する指示を出してあげます。

 

 

しかも、ただ出すわけでは面白くないのでフェードインして表示させます。

 

 

 

 

 

メインのコンテンツをフェードインさせながら出そう!

 

bicycle-gif

ここでも同じくsetTimeoutを使用します。

$(function(){
 $(".mainSite").css({opacity:'0'});
 setTimeout(function(){
 $(".mainSite").css("display", "block");
 $(".mainSite").stop().animate({opacity:'1'},1000);//1秒かけてコンテンツを表示
 },3800);//約4秒後に
});
約4秒後にコンテンツを表示、そしてフェードインさせるという指示を出しています!
この指示をしてあげれば~!

 

 

 

出来ました~!
無事に完成です!

 

こんなに簡単にできるんですね♪
みなさんもぜひsetTimeoutを使っていろんなことをしてみてください!

 

 

それではANAでした(*’▽’)