JavaScript + CSS3を活用してスマートフォンサイト/アプリに動きを付けてみよう

JavaScript + CSS3を活用して
スマートフォンサイト／アプリに
動きを付けてみよう

WordPress+HTML5勉強会 in 神戸
2012/02/18

まずは自己紹介

若松浩昭
Twitter: @azuyuu
Facebook: facebook.com/azuyuu

• フロント周りの実装を主に担当
• 仕事のほとんどがスマートフォン対応
• HTML5-WEST.jp コアメンバー

今回の話のポイント

CSS3アニメーションを
活用しよう！！

ちょっと話の整理

• 制作案件の現状
→ スマートフォン案件が急激に増加中

• スマートフォン案件で求められるもの
→ 端末（OS・ブラウザ）の理解
→ 無駄のないコーディング
→ 動きの実装

本当に必要？

動きは必要なのか？

• UXの向上に貢献するのではないだろうか

• クライアントから要望がある

• 競合他社と差別化できる、かも

なくてもいいけど・・・。
需要があるのは確か。

ちなみに、ここでいう動きとは

• 派手に主張するやつ
→ フルFlashみたいにグリグリ動くレベル

• さりげなく主張するやつ
→ あくまでサイト/アプリの補足レベル

今日取り上げるのはこっち

動きを実装するにあたって

動きはどうやって付ける？

• JavaScriptでアニメーション

• CSS3でアニメーション

JavaScriptでアニメーション

• 実態はsetIntervalでひたすらループ処理

• 複雑な動きになると、書くのが面倒
（メンテナンスもしんどい）

• 処理速度は端末のスペックに依存

• スマートフォンでは処理落ちを覚悟

CSS3でアニメーション

• 実装・制御はJavaScriptより簡単

• メンテナンスがJavaScriptより楽

• Mobile Safariではさらに快適
（全てのCSS要素が快適なわけではない）

• Android端末は・・・

スマートフォンを対象とするなら

• JavaScriptでアニメーション

• CSS3でアニメーション

iPhoneで「ぬめー」っと動くのは
感動ものですよ！！

CSS3アニメーションの種類１

• transition
→ 簡単なアニメーション

a:hover {
-webkit-transition: all 1s linear;
-webkit-transform: translate3d(500px, 0, 0);
}

CSS3アニメーションの種類２

• animation
→ タイムライン・複雑なアニメーション

a:hover {
     -webkit-animation: animeSample 1s;
}

@-webkit-keyframes animeSample {
     0% { -webkit-transform: translate3d(0, 0, 0); }
     100% { -webkit-transform: translate3d(500px, 0, 0); }
}

動きを組み込んだ例

DEMO

簡単に仕組みを解説

• 例えば、ボタンをタップすることによっ
て、オーバーレイを表示する場合・・

STEP1. タグ構成

<!DOCTYPE html>
<html>
<div id="wrapper">

<a id="btn" role="button">開く</a>
</div>
<div id="overlay">

</div>
</html> ボタンをクリックしたら、
#overlayの要素が、画面の手前に
表示される

STEP2. JavaScriptでイベント

<script>
$(function() {
$("#btn").click(function() {

$("#overlay").addClass("open");

});
});
</script>
JavaScriptではclassを指定するのみ!!
アニメーション自体はCSSまかせ

STEP3. CSSでアニメーション

<style>
#overlay.open {
-webkit-animation: openOverlay 0.5s;
     -webkit-animation-ﬁll-mode : both;
}

@-webkit-keyframes openOverlay {
     0% { -webkit-transform: translate3d(0, -300px, 0); }
}
</style>

アニメーションの中身は全てCSSで定義

STEP4. 次のイベント

<script>
$(function() {
$("#overlay").bind("webkitAnimationEnd", function() {

$("#hoge").text("オーバーレイが表示されました");

});
});
</script>
アニメーション終了時に呼び出す処理を
ここに記述
transitionを使ってアニメーションした
場合は、 webkitTransitionEnd を使用

補足. アニメーションを変更

<style>
     0% { -webkit-transform: translate3d(0, -300px, 0); }
}

内容を切り替えてみる
     0% { -webkit-transform: scale(0); }
     50% { -webkit-transform: scale(1.2); }
     80% { -webkit-transform: scale(0.9); }
     100% { -webkit-transform: scale(1); }
}
</style>

注意事項1

• 疑似要素にアニメーション指定はできない
<style>
#overlay:after {
     display: block;
     content: "";
     width: 100px; アニメーションしない・・・
     height: 100px;
     opacity: 0;
-webkit-transition: all 0.3s linear;
}

#overlay.open:after {
     opacity: 1;
}
</style>

注意事項2

• 非表示の要素に対してはタイマーを
使用してアニメーションを指定

$("#btn").click(function() {
     var overlay = $("#overlay");
     overlay.css({ "display": "block" });

     setTimeout(function() {
          overlay.addClass("open");
     }, 100);
タイマーでアニメーションの
});
開始時間を遅延

CSS3アニメーション・・・

• スマートフォンなら気兼ねなく使える

• 慣れれば実装が非常に簡単

• 何より、動かすのは楽しい！！

是非、使ってみてください！！

JavaScript + CSS3を活用してスマートフォンサイト/アプリに動きを付けてみよう

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie JavaScript + CSS3を活用してスマートフォンサイト/アプリに動きを付けてみよう

Ähnlich wie JavaScript + CSS3を活用してスマートフォンサイト/アプリに動きを付けてみよう (20)

Mehr von Hiroaki Wakamatsu

Mehr von Hiroaki Wakamatsu (6)