CyberMameCAN参考にさせて頂いたサイトです
効果を出すためのJavaScrptやCSS、レスポンシブデザインに対応するためにコードを使わせていただいたり、参考にさせていただいています。
ありがとうございます。
きっかけ
ブラウザを上にスクロールしたら下から出てくる画像やコンテンツなどが、ふぉあ〜ん、ふぉあ〜んと出てくる効果が面白いな〜、試しに作ってみたいなーと漠然と思っていたのですが、ちょっと機会があり勉強のために作ってみました。
まだ解析途中で（僕にはとても難しい・・・）すが、なんとかふぉあ〜んの効果が出来るようになりました。
Demo
ダウンロード
コードなど(抜粋)
Javascript
メニューが一番上に来たら固定にする処理も入っています。（navFix()）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
;(function () { // Animations var contentWayPoint = function() { var i = 0; $('.animate-box').waypoint( function( direction ) { if( direction === 'down' && !$(this.element).hasClass('animated') ) { i++; $(this.element).addClass('item-animate'); setTimeout(function(){ $('body .animate-box.item-animate').each(function(k){ var el = $(this); setTimeout( function () { el.addClass('fadeInUp animated'); el.removeClass('item-animate'); }, k * 200, 'easeInOutExpo' ); }); }, 100); } } , { offset: '85%' } ); }; var navFix = function() { $('#nav').waypoint( function() { $('body #nav').removeClass('nav_init') $('body #nav').addClass('nav_fix') }, { offset: 0 } ); $('#nav').waypoint( function() { $('body #nav').removeClass('nav_fix') $('body #nav').addClass('nav_init') }, { offset: 1 } ); }; // Document on load. $(function(){ contentWayPoint(); navFix(); }); }()); |
CSS
animate.cssが必要です。
あと以下のコードが意外と大切だった。
|
1 2 3 4 5 |
.animate-box { opacity: 0; } |
- animate-boxでクラスを定義してある要素を初めは透明にしておく
- offset: ‘85%’ 上から見て85%の位置に来たらJavascriptの処理が実行される
こういう流れなのかな。
こういうブログもありました。
- 初めてのレスポンシブ・ウェブデザイン
- Nivo Sliderのスライドショー（jQueryプラグイン）
- 画像拡大プラグイン ZoomIt + jQuery
- 横からぴょ～んと出てくる動き、CSS3のみで。
- Tumblrのリブログした画像をスライドショーの背景画像として設置 jQueryで
人気のあるブログ：
- 新しいgemのアップデート方法（rubygems-update）
- Coda2でscssを使うときのお供にcompassをどうぞ。
- bashでUTF-8に設定して日本語表示したり使ったり。Emacsでも。
- NginxをSSL付きで動かすために設定したこと
- Macでフォルダを結合したいとき
