html5fun@東京 bootstrapにアニメーションを付けよう
TRANSCRIPT
![Page 1: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/1.jpg)
HTML5fun@東京 ワンランク上の 1カラムレイアウトデザイン を作ろう
KDDIウェブコミュニケーションズ 阿部 正幸
![Page 2: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/2.jpg)
![Page 3: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/3.jpg)
おかげさまで 1周年
![Page 4: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/4.jpg)
![Page 5: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/5.jpg)
![Page 6: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/6.jpg)
![Page 7: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/7.jpg)
![Page 8: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/8.jpg)
![Page 9: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/9.jpg)
1年間の活動地域
東京 名古屋 岡山 北海道 金沢 宮崎 神戸 福井 仙台
そして東京に戻ってきました☆
![Page 10: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/10.jpg)
ありがとうございました - 来期も全国で開催します -
![Page 11: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/11.jpg)
● ACE01 / SmartRelease プロダクトマネージャー ● CPI エバンジェリスト 統括 ● KDDIウェブ 公認 CPI スタッフブログ 編集長 ● Drupal(g.d.o Japan)日本コミュニティー ●日本ディレクション協会 講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う
神戸生まれ、横浜育ち、7月31日生まれ 阿部 正幸(あべ まさゆき)
ディレクター プログラマー プロマネ Evangelist
![Page 12: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/12.jpg)
Venture Since 1998
Web Service Hosting
![Page 13: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/13.jpg)
Web制作を 『超ラク』 にする
![Page 14: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/14.jpg)
![Page 15: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/15.jpg)
直近こんな記事書きました
企業からイベント協賛費をもらうための提案書と御作法
Facebookの「いいね」を押さずに 記事を読む方法
CMS選定に困ったWeb担当者様。 失敗しないCMSの選び方
![Page 16: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/16.jpg)
本日は『ワンカラムレイアウト』 を作る際の
『BootstrapのTips』と 『心地よい動き』を付けるためのライブラリ
を紹介します
![Page 17: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/17.jpg)
![Page 18: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/18.jpg)
![Page 19: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/19.jpg)
![Page 20: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/20.jpg)
![Page 21: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/21.jpg)
全体的な特徴
● 特徴的な写真素材 - プロのカメラマンに依頼しよう -
● スクロールに合わせてアニメーション - Parallax、Scroll Spy、Waypoint など -
● ゴーストボタンや、アニメーションボタン - animation.css など -
![Page 22: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/22.jpg)
ベーステンプレート
![Page 23: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/23.jpg)
本日のサンプル 「bootstrap 1カラムレイアウト」でググってね
![Page 24: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/24.jpg)
パララックスとは
二地点での観測地点の位置の違いにより、対象点が見える方向が
異なること、または、その角度差。
もっぱら、「視差により距離を測定する」、「視差があることによる問題」
という2つの観点から扱われる。
情報:wikipedia
![Page 25: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/25.jpg)
パララックスとは
二地点での観測地点の位置の違いにより、対象点が見える方向が
異なること、または、その角度差。パララックス (英:parallax)ともいう。
もっぱら、「視差により距離を測定する」、「視差があることによる問題」
という2つの観点から扱われる。
情報:wikipedia
意味わかりません
実際に見てみましょう
![Page 26: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/26.jpg)
パララックス
<div id="home" class="home"> <div class="text-top"> <h1>Hello World</h1> <h3>Bootstrap-based one column layout</h3> </div> </div>
![Page 27: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/27.jpg)
#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; }
パララックス
![Page 28: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/28.jpg)
Scroll Spy
スクロールに 合わせて、 アクティブが 変わる
![Page 29: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/29.jpg)
● 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>
![Page 30: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/30.jpg)
Animate.css
![Page 31: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/31.jpg)
<h1 class="animated shake"> Shake animation </h1>
Animate.css
Animate.cssサイトより動作(shake)を確認し アニメーションをかけたい箇所に 「animated + 動作」を指定するだけ
![Page 32: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/32.jpg)
Waypoint
<script src=”noframework.waypoints.min.js"></script>
- スクロール位置を検出する -
① ダウンロードしたライブラリを読み込む
![Page 33: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/33.jpg)
var waypoint = new Waypoint({ element: document.getElementById('wp1'), handler: function() { console.log(‘ wp1ポイントに来ました ');
} })
Waypoint
② <hoge id=“wp1”>を監視し、wp1までスクロールしたら、function(){ }が実行される
![Page 34: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/34.jpg)
Waypoints + Animate.css var waypoint = new Waypoint({ element: document.getElementById('wp1'), handler: function() { this.element.className = 'animated shake’; }
})
③ wp1までスクロールしたら、wp1のクラス名を「animated shake」に変更し、
アニメーションを付与
![Page 35: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/35.jpg)
animatedModal.js
![Page 36: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/36.jpg)
animatedModal.js
オシャレなモーダルウィンドウ
![Page 37: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/37.jpg)
<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
![Page 38: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/38.jpg)
<script src=“jquery/1.11.1/jquery.min.js"></script> <script src=”animatedModal.min.js"></script>
● プラグインの読み込み
<script> $("#demo01").animatedModal(); </script>
● ベーシックイニシャライズ
animatedModal.js
![Page 39: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/39.jpg)
animatedModal.js + Animate.CSS
$("#demo01").animatedModal({ animatedIn:'bounceInUp', animatedOut:'bounceOut', color: '#39BEB9', animationDuration: '1s', });
「animatedIn」起動時のアニメーション 「animatedOut」終了時のアニメーション
![Page 40: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/40.jpg)
まとめ
1カラムレイアウトのフレームは「booststrap」 や、「Foundation」などのフレームワークが便利 グローバルナビゲーションのスクロールに合わせた アクティブは「Scroll Spy」が便利。 その他アニメーションは「Waypoint」でスクロール 位置を検出し「Animate.css」などで動きを 付けると便利。
![Page 41: Html5fun@東京 Bootstrapにアニメーションを付けよう](https://reader034.vdocuments.mx/reader034/viewer/2022050818/55a524cd1a28abe50e8b45df/html5/thumbnails/41.jpg)
ご清聴ありがとうございました
ID:chiyo.abe 阿部 正幸