Posted: 2016.09.21 / Category: javascript / Tag: jQuery, アニメーション

Dynamics.jsというライブラリを使ってスマホサイトでよくあるサイドナビゲーションのアニメーションを作成してみます。

HTML

HTMLはナビゲーションを開くためのボタン（#nav-toggle）とナビゲーション本体（#side-nav）を作成します。

HTML

<div id="nav-toggle">
	<span></span>
	<span></span>
	<span></span>
</div>
<nav id="side-nav">
	<ul id="side-nav-btn">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Business</a></li>
		<li><a href="#">Result</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<article>
	...
</article>
    

CSS

あまり関係な部分は省略しているCSS部分です。
widthを設定してrightでその分だけマイナスにすることで、初期配置は画面外になるようにしてます。

CSS

#side-nav {
    color: #fff;
    background: #0b8793;
    position: fixed;
    z-index: 1000;
    width: 400px;
    height: 100%;
    right: -400px;
    top: 0;
    padding: 20px;
}
#side-nav-btn {
    position: absolute;
    left: 400px;
}
    

JavaScript

dynamics.jsの他に、DOM的な事やイベント的な事にjQueryも使用しています。
ボタンの数だけdelayを少しずつ大きくすればバラバラな動きになります。
typeにdynamics.springを指定することでバウンドしたような動きになり、いい感じにしてくれます。

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dynamics.js/1.0.0/dynamics.min.js"></script>
<script>
	(function($) {
		$(function() {
			var $sideNav = $('#side-nav')[0];
			var $sideNavBtns = $('#side-nav-btn li');

			$('#nav-toggle').on('click',function(){
				if ($('body').hasClass('nav-open')) {
					$('body').removeClass('nav-open');
					dynamics.animate($sideNav, {
						translateX: 0
					}, {
						duration: 200,
						delay: 150
					});
					for(var i=0; i<$sideNavBtns.length; i++) {
						dynamics.animate($sideNavBtns[i], {
							translateX: 0
						}, {
							type: dynamics.spring,
							duration: 2000,
							friction: 400,
							delay: i * 50
						})
					}
				} else {
					$('body').addClass('nav-open');
					dynamics.animate($sideNav, {
						translateX: -180
					}, {
						type: dynamics.spring,
						duration: 800
					});
					for(var i=0; i<$sideNavBtns.length; i++) {
						dynamics.animate($sideNavBtns[i], {
							translateX: -360
						}, {
							type: dynamics.spring,
							duration: 1000,
							friction: 400,
							delay: (i * 150) + 200
						})
					}
				}
			});
		});
	})(jQuery);
</script>