東京・小金井市のWEB制作会社の豆知識

MEMORANDUM

jQueryでページ遷移時にフィルターを左右に開閉してコンテンツを切り替える

公開日：2020-01-15
最終更新日：2020-02-25
182

採用サイトを作成した際に、ページ遷移にアクセントをつけたくて実装した開閉アニメーションの方法をメモ。
実例はランディングページ（LP）なので、コンテンツをページで分けているサイトでは調整が必要。

HTML

<nav class="gnav">
<ul>
<li><a href="">○○○○</a></li>
<li><a href="">○○○○</a></li>
<li><a href="">○○○○</a></li>
<li><a href="">○○○○</a></li>
<li><a href="">○○○○</a></li>
</ul>
</nav>

<article id="slider">
<div id="filter_left"></div>
<div id="filter_right"></div>
<section>
コンテンツを記載
</section>
</article>

CSS

#filter_left{
	background: #017b32;
	width: 50%;
	display: block;
	position: fixed;
	top: 0;
	z-index: 13; }
#filter_right{
	background: #017b32;
	width: 50%;
	display: block;
	position: fixed;
	top: 0;
	z-index: 13; }

jQuery

var winH = $(window).height();
var modalW = ($(window).width())/2;

$('.gnav a').click(function(){
	$('#filter_left').css({'left':'-'+modalW+'px', 'height':winH+'px'}).animate({'left':'0'}, {duration:'slow', easing:'swing', complete:function(){

		// ここにページ内遷移のスクリプトを記載（省略）

		setTimeout(function(){
			$('#filter_left').animate({left:'-'+modalW+'px'},{duration:'slow', easing:'swing', complete:function(){
				$('#filter_left').css({'height':'0'});
			}});
		}, 250);
	}});
	$('#filter_right').css({'right':'-'+modalW+'px', 'height':winH+'px'}).animate({'right:0'}, {duration:'slow', easing:'swing', complete:function(){
		setTimeout(function(){
			$('#filter_right').animate({right:'-'+modalW+'px'}, {duration:'slow', easing:'swing', complete:function(){
				$('#filter_right').css({'height':0});
			}});
		}, 250);
	}});
	return false;
});