Html5fun@東京 Bootstrapにアニメーションを付けよう
•
5 likes•1,463 views
HTML5fun東京（2015年3月5日）に使用したスライドです。 BootstrapのTipsと、アニメーションを付けるためのライブラリの紹介
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Html5fun@東京 Bootstrapにアニメーションを付けよう
Similar to Html5fun@東京 Bootstrapにアニメーションを付けよう (20)
More from Masayuki Abe
More from Masayuki Abe (11)
Recently uploaded
Recently uploaded (9)
Html5fun@東京 Bootstrapにアニメーションを付けよう
- 3. おかげさまで 1周年
- 11. ● ACE01 / SmartRelease プロダクトマネージャー ● CPI エバンジェリスト 統括 ● KDDIウェブ 公認 CPI スタッフブログ 編集長 ● Drupal(g.d.o Japan)日本コミュニティー ●日本ディレクション協会 講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う 神戸生まれ、横浜育ち、7月31日生まれ 阿部 正幸（あべ まさゆき） ディレクタープログラマー プロマネ Evangelist
- 13. Web制作を 『超ラク』 にする
- 15. 直近こんな記事書きました 企業からイベント協賛費をもらうため の提案書と御作法 Facebookの「いいね」を押さずに 記事を読む方法 CMS選定に困ったWeb担当者様。 失敗しないCMSの選び方
- 21. 全体的な特徴 ● 特徴的な写真素材 - プロのカメラマンに依頼しよう - ● スクロールに合わせてアニメーション - Parallax、Scroll Spy、Waypoint など - ● ゴーストボタンや、アニメーションボタン - animation.css など -
- 22. ベーステンプレート
- 26. パララックス <div id="home" class="home"> <div class="text-top"> <h1>Hello World</h1> <h3>Bootstrap-based one column layout</h3> </div> </div>
- 27. #home { background: url(img.jpg) no-repeat center center fixed; display: table; position: relative; -webkit-background-size: cover; /*crome、Fafari */ -moz-background-size: cover; /* Firefox */ -o-background-size: cover; /* Opera */ background-size: cover; } パララックス
- 29. ● Scrollspyの起動 <script type="text/javascript"> $('body').scrollspy({ target: 'navbar' }) </script> ● Scrollspyを監視するターゲット <body data-spy="scroll data-target="#navbar data-offset="100 > ● ナビゲーション (bootstrapデフォ) <div id="navbar"> <ul class="nav navbar-nav"> <li><a href="#home">Home</a></li>
- 30. Animate.css
- 31. <h1 class="animated shake"> Shake animation </h1> Animate.css Animate.cssサイトより動作（shake）を確認し アニメーションをかけたい箇所に 「animated + 動作」を指定するだけ
- 32. Waypoint <script src= noframework.waypoints.min.js"></script> - スクロール位置を検出する - ① ダウンロードしたライブラリを読み込む
- 33. var waypoint = new Waypoint({ element: document.getElementById('wp1'), handler: function() { console.log( wp1ポイントに来ました '); } }) Waypoint ② <hoge id= wp1 >を監視し、wp1までスク ロールしたら、function(){ }が実行される
- 34. Waypoints + Animate.css var waypoint = new Waypoint({ element: document.getElementById('wp1'), handler: function() { this.element.className = 'animated shake ; } }) ③ wp1までスクロールしたら、wp1のクラス名 を「animated shake」に変更し、 アニメーションを付与
- 35. animatedModal.js
- 37. <a id="demo01" href="#animatedModal">DEMO01</a> <div id="animatedModal"> <div class="close-animatedModal"> CLOSE MODAL </div> <div class="modal-content"> <!̶モーダルコンテンツ--> </div> </div> ● モーダルコンポーネント animatedModal.js
- 38. <script src= jquery/1.11.1/jquery.min.js"></script> <script src= animatedModal.min.js"></script> ● プラグインの読み込み <script> $("#demo01").animatedModal(); </script> ● ベーシックイニシャライズ animatedModal.js
- 39. animatedModal.js + Animate.CSS $("#demo01").animatedModal({ animatedIn:'bounceInUp', animatedOut:'bounceOut', color: '#39BEB9', animationDuration: '1s', }); 「animatedIn」起動時のアニメーション 「animatedOut」終了時のアニメーション