O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

1.321 visualizações

Publicada em

HTML5fun東京(2015年3月5日)に使用したスライドです。
BootstrapのTipsと、アニメーションを付けるためのライブラリの紹介

Publicada em: Tecnologia
  • Entre para ver os comentários

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

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

×