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

HTML5fun@東京ワンランク上の 1カラムレイアウトデザインを作ろう

KDDIウェブコミュニケーションズ阿部正幸

おかげさまで 1周年

１年間の活動地域

東京　名古屋　岡山　北海道　金沢宮崎　神戸　福井　仙台

そして東京に戻ってきました☆

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

● 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 fixed; 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-offset="100” >

● ナビゲーション (bootstrapデフォ) <div id="navbar"> <ul class="nav navbar-nav"> <li><a href="#home">Home</a></li>

Animate.css

<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

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にアニメーションを付けよう

Technology

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