View
573
Download
4
Category
Preview:
Citation preview
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
<script src=“jquery/1.11.1/jquery.min.js"></script> <script src=”animatedModal.min.js"></script>
● プラグインの読み込み
<script> $("#demo01").animatedModal(); </script>
● ベーシックイニシャライズ
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 阿部 正幸
Recommended