こんにちは！WEBデザイナーのANAです。
今回は『アニメーション終了後のサイトを表示させる方法』をご紹介しています。
アニメーションを作成して、つくっているサイトに入れたはいいけど、アニメーションがただサイトの上にのっているだけ…なんじゃこりゃ状態。が今回このブログをかくきっかけになった出来事。
ここのブログにもよく登場するWATANABEさん(*’ω’)がAdobe edge animeteで素敵なアニメーションをつくってくれたのに、うまくサイトに実装できてない！
というわけで、簡単なやり方でなんとかできないか？と思いやってみたのが
「jQueryでsetTimeoutを使用してfunctionの実行を遅らせる」という方法。
つまりどんなことがしたいかというと、
サイトを開いた瞬間、アニメーションがはじまる⇒そのアニメーションが終わったら、本来の表示したいサイトを出す
と言う流れ。
今回Bike GIFをお借りして簡単に方法をご紹介しようと思います！
アニメーションを表示させる
まずはここから！
先ほどのアニメーションをサイトに入れておきます。
で、アニメーション終了後に表示させたいソースも書いておきます。
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
アニメーションを○○秒後に消す！
では次のステップ！
以下のjQueryでsetTimeoutを使用します。
$function(){
setTimeout(function(){
ここに処理をかくよ！
},5000);//5秒数後
});
$function(){
setTimeout(function(){
$('.anime').fadeOut();
},3800);//約4秒数後
});
アニメーションを再生中は下のコンテンツを出さない！
やり方としてはjQueryでcss指定してあげる。
アニメーションが再生中は下のコンテンツは非表示にするという指示を出してあげればいいのです。
$function(){
$(".anime").css("display", "none");//アニメーション中は非表示
setTimeout(function(){
$('.anime').fadeOut();
},3800);//約4秒数後
});
こうすれば、アニメーションが流れている間は消えています。
ただ、これだけの指示だとずっとdisplay:noneで
非表示のままなので、3.8秒後に表示する指示を出してあげます。
しかも、ただ出すわけでは面白くないのでフェードインして表示させます。
メインのコンテンツをフェードインさせながら出そう！
ここでも同じくsetTimeoutを使用します。
$(function(){
$(".mainSite").css({opacity:'0'});
setTimeout(function(){
$(".mainSite").css("display", "block");
$(".mainSite").stop().animate({opacity:'1'},1000);//1秒かけてコンテンツを表示
},3800);//約4秒後に
});
