jQuery

【jQuery】CSSアニメーションとjQueryのフルスクリーンナビゲーションBouncy Navigation

February 9, 2015

フルスクリーンナビゲーションをCSS3 transitionsとjQueryで実装されています。
クリックイベントでアニメーション効果を与える面白いナビゲーション。

HTML

<div class="cd-bouncy-nav-modal">
	<nav>
		<ul class="cd-bouncy-nav">
			<li><a href="#0">Item 1</a></li>
			<!-- other list items here -->
		</ul>
	</nav>
	<a href="#0" class="cd-close">Close modal</a>
</div>

CSS

.cd-bouncy-nav-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
}
.cd-bouncy-nav-modal.fade-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s 0s, visibility 0s 0s;
}
.cd-bouncy-nav li {
  transform: translateY(100vh);
}
.fade-in .cd-bouncy-nav li {
  animation: cd-move-in 0.4s;
  animation-fill-mode: forwards;
}
@keyframes cd-move-in {
  0% {
    transform: translateY(100vh);
  }
  65% {
    transform: translateY(-1.5vh);
  }
  100% {
    transform: translateY(0vh);
  }
}