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

最終更新日

javascript-animation

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秒ぐらい

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

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

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

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

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

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

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

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

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

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

 この様になります。 

 

まとめ

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

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

 

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

 

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

 

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

 

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

 

こちらの記事もおすすめ

sasurai

旅と写真を愛する人。 web制作の仕事をしています。 写真も撮ります。お仕事のお問い合わせはお気軽に。

シェアする