今回はデザイン→できる！、HTML→OK！、CSS→なんとかいけるよ。。、Javascript→なんか怖い。。。っていう人向けです。
まずはサンプルページはこちら。
作っているうちに遊んでしまいました。
最初に今回のお題です。(コードだけだけど・・・)
ボタンを押すと、アニメーションします。Webサイト使っていると当たり前に見るエフェクトですね。
これをちょっと前まではどうやっていたかというと、jQueryを使ってやっていました。
$(document).ready(function(){
$('.button').on({
'click' : function(){
$('.target').fadeIn(500, 'ease');
$('.target').css({
'padding-top' : '50px',
'padding-left' : '50px',
});
}
});
});
いまでは、このような使い方をすることが多いです。
//jQuery
$(document).ready(function(){
$('.button').on(
'click' : function(){
$('.target').toggleClass('active');
});
});
/* CSS */
.target{
opacity: 0;
padding-top: 0;
padding-left: 0;
transition: all 0.5s ease;
}
.target.active{
padding-top: 50px;
padding-left: 50px;
}
jQueryの仕事はクラスを付与するだけ、残りの設定はCSSでやろう、ということですね。
jQueryを使う
CSS3がガンガン使えるようになってこういうことは当たり前になっていますけど、ほんのちょっと前はこんなことしてました。
Flashが使われなくなり始め、さまざまなJavascriptのライブラリの中からjQueryが頭ひとつ抜け出し、ブラウザが新しくなってCSS3で表現できることがずっと広がった。そういう経緯です。
jQueryの場合はアニメーションに限りませんが初めにセレクタを選ぶ。「$(‘selector’)」の部分ですね。
それから、そのセレクターの動作、英語の動詞にあたるような部分を書きます。「.fadeIn()」などです。
終わりは「; (セミコロン)」です。
上記の例では初めに「.button」が「on」すると言っています。
on()は、clickやmouseenterなどの動作の時に命令を発動させます。
例では「click」イベントが起こったときに、
$('.target').fadeIn(500, 'ease'); //①
$('.target').animate({
'padding-top' : '50px',
'padding-left' : '50px',
}, 500, 'ease'); //②
の2つの命令をしています。
①では500ms(ミリセカンド)、つまり0.5秒かけてフェイドインをさせています。’ease’はイージングの指定です。
②は0.5秒かけてpadding-topとpadding-leftがそれぞれ50px移動します。これによって、ターゲットは右下に広がるように見えるはずです。
CSSのアニメーションについて
CSSでアニメーションするには2通りの方法があります。
1.transitionを使う方法と2.animationを使う方法です。
transitionは自動ではスタートしません。またループもできません。
しかしサイト制作上、よく使うアニメーションはこちらを使うことが多いです。
transitionとは「遷移」のことですから、ある状態からある状態へ移行する、というイメージでしょうか。
animationはtransitionに比べ、より細かいアニメーションの設定ができます。
キーフレームごとにプロパティの設定ができるので、自分の想像に近い動きを細かくつけていくことができます。
CSSアニメーションでの注意点
CSSのアニメーションでは基本的に数値や計算式で操れるものしかアニメーションできません。
例えばtopの値が0から50pxにすることも50%にすることも5emにするのもOKです。
しかし、margin-leftの値を0からautoにする、これはアウトです。
transitionを使って、margin-rightとmargin-leftをautoにし、ボックスをアニメーションさせながら中央に寄せるということはできません。
もちろん、text-alignをleftからcenterにしてもアニメーションはしません。
数値を扱うものしか使えない、とおぼえておいてください。
先ほどのボックスをアニメーションさせながら中央に寄せる、なんていうのはJavascriptで計算しながらやってもいいです。
※marginをautoして中央寄せのアニメーションはできませんが、同じ動きならおそらく下のコードで行けると思います。
.target-parent{
position: relative;
width: 100%;
height: 200px;
}
.target{
position: absolute;
top: 50%;
left: 0;
transform: translateX(0) translateY(-50%);
transition: all 0.5s ease;
}
.target.anime{
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
発火
これまではjQueryを使ってアニメーションしていた動きはCSSでも表現できることがわかりました。
CSSのアニメーションを使う場合は何らかの発火イベントを利用することが多くなります。
例えば上述のクリックのイベントもそうですし、当たり前によく使うのはボタンの上にカーソルがのった時、などですね。このカーソルがボタンにのる動きはCSSのセレクタ(:hover)で判定できますから、CSSだけでアニメーションを完結させることができます。
しかし、CSSのセレクタだけでは判定できないものも多くあります。
例えばお申込みフォームで、「利用条件に同意する」のチェックボックスにチェックが入っていないと、送信ボタンが押せない仕掛けはよく見るでしょう。(あれはCSSなしでjQeury(Javascript)だけで実装したりしますが)
もしくは、要素が画面の上部にスクロールしたらアニメーションが始まるという場合もありますね。
こういう時によく使う方法が、アニメーションの動き自体はCSSで設定しておく。→何らかの条件を満たした場合にjQueryを使ってその要素にクラスを付与する。→アニメーション！みたいな方法です。
上記の例でいえば、.targetにはアニメーションする前の状態とtransitionでアニメーションすることが書かれています。
そして.target.animeには、.targetに.animeというクラスが付与された場合に起こる結果が書いてあります。
例えばクリックされたときに、例えばスクロールしてきた時に、jQueryのaddClass()を使ってクラスを付与してあげれば、アニメーションがスタートするわけです。
下の例では.buttonがクリックされたときに.targetにクラスactiveが付与され、アニメーションが始まります。
$(document).ready(function(){
$('.button').on(
'click' : function(){
$('.target').addClass('active');
});
});
また、jQueryを使うならば、toggleClass()もよく使うのでおぼえておくと便利です。
下の例では、.buttonがクリックされたときに.targetにクラスactiveがなければクラスactiveを付与、あった場合はクラスactiveを削除します。
$(document).ready(function(){
$('.button').on(
'click' : function(){
$('.target').toggleClass('active');
});
});
さまざまなジェネレーターやライブラリ
自分で実装するとなると、こんがらがる部分も初めのうちは多いと思います。
そんな人でもカンタンにアニメーションができるように、ありがたいことにjQueryにせよCSSにせよいろいろなライブラリやジェネレータが出てきました。
作者さんたちに感謝しつつ、こういうのを使うのも制作スピードを上げる上では有用だと思います。
Javascriptは怖いと思ってるデザイナーさんに、今回やったのはjQueryを利用して、クラスを付けたり消したりしただけです。
たった5行。慣れると便利ですから、ちょっとずつ触っていってみてくださいね。
