Bootstrapにちょい足しアニメーション@春のJavascript祭り
•
20 likes•7,988 views
Twitter Bootstrapに心地よりアニメーションを加えるTipsです。
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Bootstrapにちょい足しアニメーション@春のJavascript祭り
Similar to Bootstrapにちょい足しアニメーション@春のJavascript祭り (20)
More from Masayuki Abe
More from Masayuki Abe (13)
Recently uploaded
Recently uploaded (10)
Bootstrapにちょい足しアニメーション@春のJavascript祭り
- 2. ● ACE01 / SmartRelease プロダクトマネージャー ● CPI エバンジェリスト 統括 ● KDDIウェブ 公認 CPI スタッフブログ 編集長 ● Drupal(g.d.o Japan)日本コミュニティー ● テックアカデミー 講師 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う 神戸生まれ、横浜育ち、7月31日生まれ 阿部 正幸（あべ まさゆき） ディレクタープログラマー プロマネ Evangelist
- 5. cpi-line
- 8. はじめに
- 20. 使わない理由が見当たらない
- 25. 全体的な特徴 ● 特徴的な写真素材 - プロのカメラマンに依頼しよう - ● スクロールに合わせてアニメーション - Parallax、Scroll Spy、Waypoint など - ● ゴーストボタンや、アニメーションボタン - animation.css など -
- 30. ● 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>
- 31. Animate.css
- 32. <h1 class="animated shake"> Shake animation </h1> Animate.css Animate.cssサイトより動作（shake）を確認し アニメーションをかけたい箇所に 「animated + 動作」を指定するだけ
- 33. .hover + Animate.css animationHover('#img','animated fadeIn'); animationHover('#img2','animated bounceIn'); function animationHover(element, animation){ element = $(element); element.hover( function() { element.addClass('animated ' + animation); }, function(){ //wait for animation to finish before removing classes window.setTimeout( function(){ element.removeClass('animated ' + animation); }, 2000); } ); };
- 34. Waypoint <script src= noframework.waypoints.min.js"></script> - スクロール位置を検出する - ① ダウンロードしたライブラリを読み込む
- 35. var waypoint = new Waypoint({ element: document.getElementById('wp1'), handler: function() { console.log( wp1ポイントに来ました '); } }) Waypoint ② <hoge id= wp1 >を監視し、wp1までスク ロールしたら、function(){ }が実行される
- 36. Waypoints + Animate.css① var waypoint = new Waypoint({ element: document.getElementById('wp1'), handler: function() { this.element.className = 'animated shake ; } }) ③ wp1までスクロールしたら、wp1のクラス名 を「animated shake」に変更し、 アニメーションを付与
- 37. Waypoints + Animate.css② <div id="section3" class="scrollhidden"> <!‒ contents here à </div> .scrollhidden{ visibility:hidden; } html css var waypoint = new Waypoint({ element: document.getElementById('section3'), handler: function() { this.element.className = 'animated slideInLeft'; },offset:400, }); javascript
- 38. animatedModal.js
- 40. <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
- 41. <script src= jquery/1.11.1/jquery.min.js"></script> <script src= animatedModal.min.js"></script> ● プラグインの読み込み <script> $("#demo01").animatedModal(); </script> ● ベーシックイニシャライズ animatedModal.js
- 42. animatedModal.js + Animate.CSS $("#demo01").animatedModal({ animatedIn:'bounceInUp', animatedOut:'bounceOut', color: '#39BEB9', animationDuration: '1s', }); 「animatedIn」起動時のアニメーション 「animatedOut」終了時のアニメーション