More Related Content
Similar to JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Similar to JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう (20)
More from Hiroaki Wakamatsu
More from Hiroaki Wakamatsu (6)
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
- 2. まずは自己紹介
若松 浩昭
Twitter: @azuyuu
Facebook: facebook.com/azuyuu
• フロント周りの実装を主に担当
• 仕事のほとんどがスマートフォン対応
• HTML5-WEST.jp コアメンバー
- 4. ちょっと話の整理
• 制作案件の現状
→ スマートフォン案件が急激に増加中
• スマートフォン案件で求められるもの
→ 端末(OS・ブラウザ)の理解
→ 無駄のないコーディング
→ 動きの実装
本当に必要?
- 13. CSS3アニメーションの種類2
• animation
→ タイムライン・複雑なアニメーション
a:hover {
-webkit-animation: animeSample 1s;
}
@-webkit-keyframes animeSample {
0% { -webkit-transform: translate3d(0, 0, 0); }
100% { -webkit-transform: translate3d(500px, 0, 0); }
}
- 17. STEP1. タグ構成
<!DOCTYPE html>
<html>
<div id="wrapper">
<!--メインコンテンツ-->
<a id="btn" role="button">開く</a>
</div>
<div id="overlay">
<!--オーバーレイのコンテンツ-->
</div>
</html> ボタンをクリックしたら、
#overlayの要素が、画面の手前に
表示される
- 18. STEP2. JavaScriptでイベント
<script>
$(function() {
$("#btn").click(function() {
$("#overlay").addClass("open");
});
});
</script>
JavaScriptではclassを指定するのみ!!
アニメーション自体はCSSまかせ
- 19. STEP3. CSSでアニメーション
<style>
#overlay.open {
-webkit-animation: openOverlay 0.5s;
-webkit-animation-fill-mode : both;
}
@-webkit-keyframes openOverlay {
0% { -webkit-transform: translate3d(0, -300px, 0); }
100% { -webkit-transform: translate3d(0, 0, 0); }
}
</style>
アニメーションの中身は全てCSSで定義
- 20. STEP4. 次のイベント
<script>
$(function() {
$("#overlay").bind("webkitAnimationEnd", function() {
$("#hoge").text("オーバーレイが表示されました");
});
});
</script>
アニメーション終了時に呼び出す処理を
ここに記述
transitionを使ってアニメーションした
場合は、 webkitTransitionEnd を使用
- 21. 補足. アニメーションを変更
<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>
- 23. 注意事項2
• 非表示の要素に対してはタイマーを
使用してアニメーションを指定
$("#btn").click(function() {
var overlay = $("#overlay");
overlay.css({ "display": "block" });
setTimeout(function() {
overlay.addClass("open");
}, 100);
タイマーでアニメーションの
});
開始時間を遅延