マイクロソフトのサポート範囲、スマホの普及増大に伴いHTML5とCSS3を普通使える仕様の案件が増えて来ました。そんな時に便利なのがtransitionです。発火にjQueryを使いますが、アニメーションはtransitionに担当させることができます。
transitionの使い方
transitionは以下のプロパティーをショートハンドで使用できます。
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
transition-property
transitionの効果を適応するCSSプロパティを指定します。allで指定すると、適応できるプロパティ全てです。
transition-duration
transitionの効果が適応される時間を指定します。0にすると一瞬なのでアニメーションになりません。
transition-timing-function
transition効果のイージングを設定します。ease、linear、ease-in、ease-out、ease-in-outがデフォルトで設定されているイージングで、細かく設定する時はcubic-bezierを使用します。
cubic-bezierについて
cubic-bezierは3次ベジェ曲線で指定します。頻繁に使うならSCSS,SASSでコーディングする必要がありますがCompass Ceaser CSS Easing Transitionsをインストールしたほうが、いいと思います。詳しく取り扱っているサイトがありましたので以下に記しておきます。
transition-delay
transitionの効果が適応されるまでの時間をしていします。0の場合は省略か0sで単位まで指定。
transitionで下からにゅっと出てくる新着情報を作ってみる
当サイト、トップページの新着情報は下からにゅっと出てきます。transitionを使っています。ヒーローヘッダーで一回やってみたかったので実装しました。
jQuery
toggleClassでボタンの入れ替えと新着情報の展開を行っています。ちなみにcheckboxのcheckedを使えばjQueryに頼らずCSSのみで実装することも可能ですが、こちらの方が手軽です。
<script>
var _touch = ('ontouchstart' in document) ? 'touchstart' : 'click';
jQuery(function($){
$('.news-btn').on(_touch,function(){
$(this).toggleClass('news-btn-open'); //ボタンの入れ替え
$('.top-news').toggleClass('top-news-open'); //新着情報の展開
});
});
</script>
SCSS
大まかなポイントのみのスタイルを記載しています。サイトに合わせて調整してください。transitionはmargin-topに適応しています。展開した新着情報のmargin-topが30pxなのはイージング用です。transition-delayは0でも単位のsまで指定します。
//新着情報の大枠
.top-news-container{
width: 100%;
position: absolute;
left: 0;
bottom: 0;
height: 300px; //新着情報の最大の高さ
}
//展開する新着情報
.top-news{
background-color: rgba(29,31,35,.9);
width: 100%;
transition: margin-top 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
margin-top: 250px; //margin-topにtransitionを適応
height: 300px;
}
//展開した時の新着情報
.top-news-open{
transition: margin-top .6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
margin-top: 30px;
}
実装したトップページ
CSSには明るいけど、jQueryはちょっと・・・って方でも手軽に実装できます。
アイデア次第ではあるけれども
CSS3にはtransitionだけでなくanimationもあります。アイデア次第では面白い仕掛けがCSSだけで実装できますが、対応ブラウザの幅が狭いのが難点です。transition-propertyもSafariでは動いたプロパティがChromeでは動かないなんてこともありました。安全に行くならまだjQueryって感じがしますが、僕自身はどんどんやっていきたいと思っています。
