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

フルスクリーンナビゲーションを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);
}
}
 

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

  • LATEST
  • RELATED
  • POPULAR