jQuery(JavaScript)　でページ表示（切り替え）のアニメーションを作ろう　　

jQuery　ページ表示でアニメーションを作ろう　　

webサイトなどでよくあるページが表示された時のアニメーションをjQueryで作成してみましょう。

初心者の方でもわかりやすく簡単に解説していきます。

全体的な流れとしては、この様になります。

①、ページ表示時にアニメーションとして表示したい要素をHTMLで作る　（ロゴや画像、GIFなど）

②、CSSでスタイル作成

③、jQueryで①をアニメーションで表示（本来のページを非表示に）

④、jQueryで③をアニメーションで消して、本来のページを表示

それでは、一つずつ解説していきます。

①、ページ表示時にアニメーションとして表示したい要素をHTMLで作る　（ロゴや画像、GIFなど）

まず始めに、アニメーションとして表示したい要素をHTML で作成します。

<div class="anime">
  <img src="https://static.motionelements.com/img/gif/gif-creator-in-out.180410.gif"/>
</div>	

②、CSSでスタイル作成

まずは、divの要素をCSSでスタイルを作成します。

width,heightなどはお好みで、大事なのはbackground-colorとposition:relativeあたり。

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

次に画像のCSS

.anime img {
 display: block;
 position: absolute;
 top: 118%;
 left: 120%;
}

③、jQueryで①をアニメーションで表示（本来のページを非表示に）

まずは、表示したいロゴなどのアニメーションをjqueryで書いていきます。

setTimeoutで時間を指定できる、3800は時間。これで約4秒ぐらい

約４秒かけて(‘.anime’)をfaceoutするということ。

setTimeout(function(){
			$('.anime').fadeOut();
		},3800);

④、jQueryで③をアニメーションで消して、本来のページを表示

　次に本来のページの表示をゆっくり表示する。

(“.mainSite”)は、本来表示されるページを囲ったdiv要素としています。

この(“.mainSite”)をcssでopacity:’0’、つまり完全な透明にします。

そしてまた　setTimeout　で時間を指定します。また3800,約４秒かけて

(“.mainSite”)のcssを(“display”, “block”)に、

(“.mainSite”)をアニメーションで、透明度を０から１、つまり完全な透明から透明度を０に。後ろの1000は約１秒。

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

　この様になります。　

まとめ

以上が、ページ表示のアニメーションの作り方です。

いかがでしょうか？上手くいきましたでしょうか。

構造さえ理解できれば、それほど難しいものではないと思います。

ぜひこの記事を参考にサイトにアニメーションを取り入れて、webサイトのクオリティを上げていきましょう

WordPressをお使いの場合だとキャッシュの問題や、jQueryの書き方などが少し変わる場合があるので、お気をつけください。

そうした問題の解決法などもまた別の記事で書いていこうと思います。

こちらの記事もおすすめ