jQuery.scrollFade.js デモ

jQuery.scrollFade.jsの使い方

jQuery、jquery.easing、jquery.scrollFade.jsの3つを読み込みます。そして、フェードさせたい要素に対してscrollFadeメソッドを実行させます。scrollFadeメソッドは、フェードアウト前の透明度(out)、フェードにかける時間(duration)を引数として設定できます。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.scrollFade.js"></script>
<script type="text/javascript">
jQuery( function( $ ) {
	$( '.scrollFade' ).scrollFade();
} );
</script>
		
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
ふたつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
みっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
よっつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー
いつつめのエリアだよー