jQuery・覚えておくと便利なスクロールで対象要素がフェードするサンプル3つ [IE7対応]
あまりやりすぎるとサイト訪問者の反感を買うので、シンプルな3つを用意しておくと便利。
検証済みブラウザとOS
- IE 7～
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X Yosemite
- iOS 8
- Android 4.1 / 5
フェードイン
- 対象要素がスクロール内に現れたらフェードインして終了
- .each() で繰り返し処理させればOK
1 2 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="js/fadein.js"></script> |
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 | <section id="block-01"> テキスト <!-- /#block-01 --></section> <section id="block-02"> <div class="block"> テキスト </div> <!-- /#block-02 --></section> <section id="block-03"> <div class="block"> テキスト </div> <!-- /#block-03 --></section> <section id="block-04"> <div class="block"> テキスト </div> <!-- /#block-04 --></section> <section id="block-05"> <div class="block"> テキスト </div> <!-- /#block-05 --></section> |
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 | // 各ブロック共通 section { min-height: 100%; } #block-01 { background: url(../images/bg_01.jpg) center no-repeat fixed; background-size: cover; } #block-02 { background: url(../images/bg_02.jpg) center no-repeat fixed; background-size: cover; } #block-03 { background: url(../images/bg_03.jpg) center no-repeat fixed; background-size: cover; } #block-04 { background: url(../images/bg_04.jpg) center no-repeat fixed; background-size: cover; } #block-05 { background: url(../images/bg_05.jpg) center no-repeat fixed; background-size: cover; } // iPad横向きで背景固定解除 #block-01, #block-02, #block-03, #block-04, #block-05 { @include max(1024) { background-attachment: scroll; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function() { var block = $(".block"), Window = $(window); block.css('opacity', '0'); Window.scroll(function() { block.each(function() { if (Window.scrollTop() > $(this).offset().top - Window.height()) { $(this).animate({opacity: "1"}, 500); } }); }); }); |
Sass用のメディアクエリはこちらを参考。
フェードイン繰り返し
else で切り替え、スクロールが対象要素より上に行けば元に戻る。
1 2 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="js/fadein-repeat.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(function() { var block = $(".block"), Window = $(window); block.css('opacity', '0'); Window.scroll(function() { block.each(function() { if (Window.scrollTop() > $(this).offset().top - Window.height()) { $(this).stop().animate({opacity: "1"}, 500); } else { $(this).css('opacity', '0'); } }); }); }); |
フェードイン・フェードアウト繰り返し
所定位置を起点として繰り返す。
1 2 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="js/fadeinout.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(function() { var block = $(".block"), Window = $(window); block.css('opacity', '0'); Window.scroll(function() { block.each(function() { if (Window.scrollTop() > $(this).offset().top - 500) { $(this).stop().animate({opacity: "1"}, 500); } else if (Window.scrollTop() < $(this).offset().top + 500) { $(this).stop().animate({opacity: "0"}, 500); } }); }); }); |
問題点
- タッチデバイスでカクつく
- jQuery .animate() メソッドは、慣性スクロールでレンダリングに誤差が生じる。
気になるならユーザーエージェント切り替えで iOS と Android はアニメーション無しにする。
コメントを投稿する