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); } 100% { -webkit-transform: translate3d(0, 0, 0); } } </style> アニメーションの中身は全てCSSで定義

STEP4. 次のイベント <script> $(function() { $("#overlay").bind("webkitAnimationEnd", function() { $("#hoge").text("オーバーレイが表示されました"); }); }); </script> アニメーション終了時に呼び出す処理をここに記述 transitionを使ってアニメーションした場合は、 webkitTransitionEnd を使用

補足. アニメーションを変更 <style> @-webkit-keyframes openOverlay { 0% { -webkit-transform: translate3d(0, -300px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } 内容を切り替えてみる @-webkit-keyframes openOverlay { 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を活用して スマートフォンサイト/アプリに 動きを付けてみよう

More Related Content

What's hot

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

More from Hiroaki Wakamatsu