
スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができる「jquery-scrollInTurn.js」
2015年2月10日jQueryプラグイン活用
「jquery-scrollInTurn.js」は、スクロールしていって指定した要素が現れた時、その子要素を順番にフェードイン表示させることができます。
スクロールして指定要素より上に戻った時、再びフェードイン表示させる・させないの指定も可能です。
JavaScript
(function($){ $(function() { $('#parent').scrollInTurn({ selector: '.child', delaySpeed: 100, fadeInSpeed: 300, fadeOutSpeed: 300, easing: 'linear', delayHeight: 50, fadeOutEvent: true }); }); })(jQuery);
HTML
<div id="contents"><p>↓scroll<br>↓scroll<br>↓scroll</p></div> <div id="parent"> <p class="child">child</p> <p class="child">child</p> <p class="child">child</p> </div>
CSS
#contents { text-align: center; height: 1200px; } #parent { border: 1px solid #ffbc30; width: 640px; padding: 30px; margin: 0 auto 160px; text-align: center; } #parent .child { background-color: #ffbc30; color: #ffffff; padding: 15px 20px; margin-bottom: 15px; } #parent .child:last-child { margin-bottom: 0; }