【CSS】モバイルヘッダーアニメーション。15 CSS Mobile Header Animations

15 CSS Mobile Header AnimationsはCSSとJavascriptを使用したモバイルヘッダーナビゲーション。アニメーションは15種類あります。

HTML

<div class="mobile">
<div class="mobile-inner">
<div class="mobile-inner-header"><div class="mobile-inner-header-icon mobile-inner-header-icon-out"><span></span><span></span></div></div>
<div class="mobile-inner-nav">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Blog</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<img src="_assets/photo1.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum felis eget commodo vulputate. Etiam finibus ex sem, sed molestie sapien euismod et. Nunc dolor magna, iaculis ut ipsum a, finibus imperdiet enim. Aliquam eget mi facilisis, dapibus felis sed, efficitur leo. Fusce vestibulum augue a ex feugiat pretium. Morbi eu aliquet mi. Nunc nec mi at quam rhoncus tincidunt eget non lectus.</p> <p> Nullam elementum ornare posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vel eros nec massa faucibus commodo vel eget dui. Donec tincidunt orci id dui varius, dapibus tristique dolor mollis. Sed non faucibus quam, id ultrices lectus. Nunc lacinia dui sed justo suscipit, nec ornare ligula fermentum. Sed vitae tincidunt enim. Maecenas eget magna ex. In suscipit risus sem.</p>
</div>
</div>

CSS

.mobile-inner-nav a{
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: returnToNormal;
animation-name: returnToNormal;
}
@-webkit-keyframes returnToNormal {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes returnToNormal {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

JavaScript

$(".mobile-inner-header-icon").click(function(){
$(this).toggleClass("mobile-inner-header-icon-click mobile-inner-header-icon-out");
$(".mobile-inner-nav").slideToggle(250);
});
$(".mobile-inner-nav a").each(function( index ) {
$( this ).css({'animation-delay': (index/10)+'s'});
});
 

【CSS】モバイルヘッダーアニメーション。15 CSS Mobile Header Animations

  • LATEST
  • RELATED
  • POPULAR