定番
履歴

jQuery スクロールでクラス付加、解除

jQuery スクロールでクラス付加、解除
スクロールするとクラスを追加して、変化させるサンプルです。

要素がブラウザの中央付近になったときに、エフェクトがかかるデザインをよく見かけるようになりました。

このサンプルでは、特定クラスで囲った要素までスクロールで移動したとき、画面中央を過ぎると新たなクラス当たるよう実装しました。

クラスによりCSSアニメを実装したり、応用できると思います。

また、中央を超えるとクラスが付きっぱなしパターンと、スクロールを戻すと元に戻るパターンの2つ用意しました。

下記がサンプルです。

中央で色が変わる
スクロールで何度も

スクリプトはこちら

var posi_top,wih_half,current_view;

$(window).load(function(){

	var wih = window.innerHeight;
	var wih_half = wih/2;
	current_view = wih_half;
	set_posi();
});

$(window).resize(function() {

	var wih = window.innerHeight;
	var wih_half = wih/2;
	current_view = wih_half;
	set_posi();
});

$(window).scroll(function(){

	var wih = window.innerHeight;
	var wih_half = wih/2;
	current_view = $(this).scrollTop() + wih_half;
	set_posi();

});

function set_posi(){

	$('.demo_center').each(function() {
		var posi = $(this).offset();
		posi_top = posi.top;

		//初回のみ
		if(current_view > posi_top){
			$(this).addClass('do');
		}
	});

	$('.demo_center_toggle').each(function() {
		var posi = $(this).offset();
		posi_top = posi.top;

		//戻ればなんども
		if(current_view > posi_top){
			$(this).addClass('do');
		}else{
			$(this).removeClass('do');
		}
	});

}

スタイルは以下

.demo_center{
	margin:100px auto 100px;
	width: 200px;
	background-color: #F99;
	text-align: center;
}
.demo_center_toggle{
	margin:100px auto 100px;
	width: 200px;
	background-color: #F99;
	text-align: center;
}
.do{
	background-color: #900;
	color:#FFF;
}

HTMLは以下のようになります。


<div class="demo_center">中央で色が変わる</div>	

<div class="demo_center_toggle">スクロールで何度も</div>	

2018-06-05 23:27:35
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top