CSS Nite in SAPPORO Vol.15「先どりWebトレンド2015」に登壇して

このエントリーをはてなブックマークに追加

2014年10月月26日（日）に、CSS Nite in SAPPORO Vol.15 「先どりWebトレンド2015」が開催されました。

CSS Nite in SAPPORO Vol.15「先どりWebトレンド2015」

全部で９セッションと長丁場で様々な分野盛りだくさんだったので、参加者はかなりお腹いっぱいになったのではないかと思います。

今回は私も登壇をさせていただきました。

自分は技術寄りの話として CSS3アニメーションをお話をさせていただいたのですが、25分の持ち時間だったこともあり、かなり話を絞った内容になっています。

私のフォローアップというわけではないですが、私のセッションで話さなかったところ、JavaScriptでの連携について、ここで少し書いておこうと思います。

CSS3のアニメーションが採用される・するケース

CSS3のアニメーションが採用される主な理由は、JavaScriptでエフェクトを書くよりも動作が滑らかになる可能性が高いからです。必ずしも滑らかになる！とは限らないのは気をつけてもらいたいところで、例えば超速でエフェクト動かしたり何度もループさせて動かすなどということをやろうとすると、結局どちらでやっても早すぎて動きの経過がわからなかったりする場合もあるためです。

しかし、簡易なエフェクトでもJavaScriptで書くと、動きがカクカクしたり滑らかではないケースがでてくるため、動き自体はCSSに委ねるケースのほうが増えてきている印象です。

特にPCよりスマホでの動きのほうが顕著にカクカクしやすくて、何度もアニメーションさせるようなことをするとカクカクしたり、場合によっては止まったり、最初と最後しか見えなかったりなどなど。

なので、一度JavaScriptで作ってみたのだけど、カクカクしてしまって全然ダメだからCSSに置き換えてほしいと、依頼が来るケースが多かったりします。プログラマさんが頑張ってみて、だけどカクカクするからデザイナーに降りてくるようなケースだったり。

どのように実装するか

主に２パターンあって、一つがclassの追加・削除のみJavaScriptで行って、動き自体はCSSに予め仕込んおき、classの付け替えによってエフェクトを動作させるというようなパターンです。固定サイズで決まったサイズ動いたりする場合にはこの方法を採用しています。

予めclassを用意しておくタイプ

HTML

<button class="button--type1">色変化</button>
<div class="css-demo type1"></div>

CSS

デフォルトが水色のブロックに、 .is-color-change があればピンクになるようなスタイルです

.css-demo {
  width: 100%;
  height: 200px;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}
.type1 {
  background-color: #4fc1e9;
}
.is-color-change {
  background-color: #ed5565;
}

※上記のスタイルのみしかいれていないので、エフェクトかからないブラウザもあります。

JavaScript（jQuery）

$('.button--type1').on('click', function () {
  $(this).next().toggleClass('is-color-change');
});

デモ：ボタンクリックでブロックにclassがつきます

上のデモをクリックしてみてください。classを付け替えするのみですが、classのあるなしの変化だけでも transition の指定があればエフェクトがかかります。

このように、予めCSSに変化後のスタイルを用意して、変化を書けるセレクタに transition を指定しておくだけでちょっとした演出が可能なので、わざわざJavaScriptで見た目を作らなくても良いというメリットもあります。

動的に変化するようなタイプ

もう一つが、動的にサイズや色が変わるためにclassでは用意できない時です。この場合は変化の値をJavaScriptで行う必要がありますが、演出自体は先ほどと同じように transition をいれておくのみになります。

HTML

<button class="button--type1">色変化</button><input type="text" class="demo-color" value="">
<div class="css-demo type1"></div>
.css-demo {
  width: 100%;
  height: 200px;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}
.type2 {
  background-color: #4fc1e9;
}

※上記のスタイルのみしかいれていないので、エフェクトかからないブラウザもあります。

JavaScript（jQuery）

$('.button--type2').on('click', function () {
  $(this).next().css('background-color', $('.demo-color').val());
});
]$('.button--type3').on('click', function () {
  $(this).next().next().css('background-color', '');
});

デモ：ボタンクリックでブロックにinputにいれた色がつきます

今回は色でしたが、他にもスマホでデバイスのサイズを動的にとって計算などなどごにょごにょ〜の時などでも、あらかじめ transition を指定しておくだけで、スタイルが変わるときにエフェクトがかかります。

まとめ

JavaScript で動きをゴリゴリ作るのではなく、CSSで制御できる場合は積極的にCSSで対応することを、個人的にはおすすめしています。かといってエフェクトはCSSのみで行うのがベストかと言えば、そうではなくて、対応する箇所が多ければ、CSSの構成によっては修正箇所もたくさん出てくるなどのことは考慮しておくべきだろうと思っています。

いろいろな箇所で大量に同じような動作をする場合は、JavaScriptでの対応と同じように、使い回し専用のclassを用意しておいて、それがある場合はエフェクトするというような使い分けとスタイル設計などが重要になってきます。

最初からCSSでエフェクトしろとは言いません。作成後に整理した際にCSSに置き換えるということから慣れていくでも十分だと思います。いろいろと試して、どのようなときに利用すべきかを、把握して自分の知識として蓄積してくのも重要かと思います。

CSSでやるべきか、JavaScriptじゃなければできないのか・・・など、考えることが増えてしまってはいますが、まずは是非、チャレンジをしてもらいたいなーと思い、この記事に書いておこうと思います。

余談：CSSだけでもできるトリガー

CSSでの変化をするトリガー（きっかけ）を、過去にまとめています。

CSSアニメーションを実行するトリガーのまとめ５＋１個 | THE HAM MEDIA BLOG

こちらも是非参考にしてみてください。

参照：