【css】アニメーションとして使える transition について

2016年1月23日

スティッキーヘッダー（スクロールしてもヘッダーがついてくる技法）の効果にアニメーションを使いたくて、今回cssプロパティのtransitionを使用しました。

以下がサンプルコードとなります。

【HTML】

<div id="header_wrap01" class="header_wrap">
<header id="header01">
<h1><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo_pc.png" alt=""/></a></h1>
<ul>
<li class="nav_home"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/home.png" alt=""/></a></li>
<li class="nav_blog"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/blog.png" alt=""/></a></li>
<li class="nav_contact"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/conatact.png" alt=""/></a></li>
</ul>
</header>
</div><!--header_wrap-->
<div id="header_wrap02" class="header_wrap">
<header id="header02" class="none">
<h1><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo_pc02.png" alt=""/></a></h1>
<ul>
<li class="nav_home"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/home02.png" alt=""/></a></li>
<li class="nav_blog"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/blog02.png" alt=""/></a></li>
<li class="nav_contact"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/contact02.png" alt=""/></a></li>
</ul>
</header>
</div><!--header_wrap-->

<h1><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo_pc.png" alt=""/></a></h1>

<ul>

<li class="nav_home"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/home.png" alt=""/></a></li>

<li class="nav_blog"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/blog.png" alt=""/></a></li>

<li class="nav_contact"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/conatact.png" alt=""/></a></li>

</ul>

</header>

</div>

<h1><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo_pc02.png" alt=""/></a></h1>

<ul>

<li class="nav_home"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/home02.png" alt=""/></a></li>

<li class="nav_blog"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/blog02.png" alt=""/></a></li>

<li class="nav_contact"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/contact02.png" alt=""/></a></li>

</ul>

</header>

</div>

※ヘッダーを2つ用意（#header01、#header02）して01→02切り替える
初期設定ではヘッダー02はcssでtop-48pxの位置に配置している。

【css】

#header_wrap02{
width:100%;
min-width:980px;
background-color:rgba(0,0,0,0.7);
position:fixed;
z-index:3;
top:-48px;
-webkit-transition:top 0.4s;
transition:top 0.4s;
}
.visible{
top:0 !important;
}

#header_wrap02{

width:100%;

min-width:980px;

background-color:rgba(0,0,0,0.7);

position:fixed;

z-index:3;

top:-48px;

-webkit-transition:top 0.4s;

transition:top 0.4s;

}

.visible{

top:0 !important;

}

.visiblueでtopのマイナス位置を0にして表示させる（js側でclassの追加・削除）
※ここでtransitionがポイント！
transition:top 0.4s;を指定しているが、これは、スティッキーヘッダーの表示・非表示をアニメーションさせるための記述です。
transitionプロパティは「あるスタイルから別のスタイルへの変化をアニメーションさせるプロパティ」です。ここではtopプロパティの値の変化を0.4秒のアニメーションを適用しています。

【jquery】

$(window).scroll(function(){
var $header = $('.header_wrap'),
$height = $header.outerHeight(),
$window = $(window).scrollTop();
if($window > $height){
$('#header_wrap01').css('display' , 'none');
$('#header_wrap02').addClass('visible')
$('#mt').css({'padding-top': '67px'});
}else{
$('#header_wrap01').css('display' , 'block');
$('#header_wrap02').removeClass('visible')
$('#mt').css({'padding-top': 0});
}
});