Html5fun@東京 Bootstrapにアニメーションを付けよう

HTML5fun@東京
ワンランク上の 1カラムレイアウトデザイン
を作ろう
KDDIウェブコミュニケーションズ
阿部正幸

１年間の活動地域
東京名古屋岡山北海道金沢
宮崎神戸福井仙台
そして東京に戻ってきました☆

ありがとうございました
- 来期も全国で開催します -

● ACE01 / SmartRelease プロダクトマネージャー
● CPI エバンジェリスト統括
● KDDIウェブ公認 CPI スタッフブログ編集長
● Drupal(g.d.o Japan)日本コミュニティー
●日本ディレクション協会講演部
● HTML5 Fun 理事
OSSを広げる活動、Web制作に関する情報発信を行う
神戸生まれ、横浜育ち、7月31日生まれ
阿部正幸（あべまさゆき）
ディレクタープログラマープロマネ Evangelist

Venture
Since
1998
Web
Service
Hosting

Web制作を『超ラク』にする

直近こんな記事書きました
企業からイベント協賛費をもらうため
の提案書と御作法
Facebookの「いいね」を押さずに
記事を読む方法
CMS選定に困ったWeb担当者様。
失敗しないCMSの選び方

本日は『ワンカラムレイアウト』
を作る際の
『BootstrapのTips』と
『心地よい動き』を付けるためのライブラリ
を紹介します

全体的な特徴
● 特徴的な写真素材
- プロのカメラマンに依頼しよう -
● スクロールに合わせてアニメーション
- Parallax、Scroll Spy、Waypoint など -
● ゴーストボタンや、アニメーションボタン
- animation.css など -

本日のサンプル
「bootstrap 1カラムレイアウト」でググってね

パララックスとは
二地点での観測地点の位置の違いにより、対象点が見える方向が
異なること、または、その角度差。
もっぱら、「視差により距離を測定する」、「視差があることによる問題」
という2つの観点から扱われる。
情報：wikipedia

パララックスとは
二地点での観測地点の位置の違いにより、対象点が見える方向が
異なること、または、その角度差。パララックス (英:parallax)ともいう。
もっぱら、「視差により距離を測定する」、「視差があることによる問題」
という2つの観点から扱われる。
情報：wikipedia
意味わかりません
実際に見てみましょう

パララックス
<div id="home" class="home">
<div class="text-top">
<h1>Hello World</h1>
<h3>Bootstrap-based one column layout</h3>
</div>
</div>

#home {
background: url(img.jpg) no-repeat center center ﬁxed;
display: table;
position: relative;
-webkit-background-size: cover; /*crome、Fafari */
-moz-background-size: cover; /* Firefox */
-o-background-size: cover; /* Opera */
background-size: cover;
}
パララックス

Scroll Spy
スクロールに
合わせて、
アクティブが
変わる

● Scrollspyの起動
<script type="text/javascript">
$('body').scrollspy({ target: 'navbar' })
</script>
● Scrollspyを監視するターゲット
<body data-spy="scroll data-target="#navbar
data-oﬀset="100 >
● ナビゲーション (bootstrapデフォ)
<div id="navbar">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>

<h1 class="animated shake">
Shake animation
</h1>
Animate.css
Animate.cssサイトより動作（shake）を確認し
アニメーションをかけたい箇所に
「animated + 動作」を指定するだけ

Waypoint
<script src= noframework.waypoints.min.js"></script>
- スクロール位置を検出する -
① ダウンロードしたライブラリを読み込む

var waypoint = new Waypoint({
element: document.getElementById('wp1'),
handler: function() {
console.log( wp1ポイントに来ました ');
}
})
Waypoint
② <hoge id= wp1 >を監視し、wp1までスク
ロールしたら、function(){ }が実行される

Waypoints + Animate.css
var waypoint = new Waypoint({
element: document.getElementById('wp1'),
handler: function() {
this.element.className = 'animated shake ;
}
})
③ wp1までスクロールしたら、wp1のクラス名
を「animated shake」に変更し、
アニメーションを付与

animatedModal.js
オシャレなモーダルウィンドウ

<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

animatedModal.js + Animate.CSS
$("#demo01").animatedModal({
animatedIn:'bounceInUp',
animatedOut:'bounceOut',
color: '#39BEB9',
animationDuration: '1s',
});
「animatedIn」起動時のアニメーション
「animatedOut」終了時のアニメーション

まとめ
1カラムレイアウトのフレームは「booststrap」
や、「Foundation」などのフレームワークが便利
グローバルナビゲーションのスクロールに合わせた
アクティブは「Scroll Spy」が便利。
その他アニメーションは「Waypoint」でスクロール
位置を検出し「Animate.css」などで動きを
付けると便利。

ご清聴ありがとうございました
ID：chiyo.abe
阿部正幸

Html5fun@東京 Bootstrapにアニメーションを付けよう

More Related Content

What's hot

Viewers also liked

Similar to Html5fun@東京 Bootstrapにアニメーションを付けよう

More from Masayuki Abe

Recently uploaded

Html5fun@東京 Bootstrapにアニメーションを付けよう