要素がブラウザの中央付近になったときに、エフェクトがかかるデザインをよく見かけるようになりました。
このサンプルでは、特定クラスで囲った要素までスクロールで移動したとき、画面中央を過ぎると新たなクラス当たるよう実装しました。
クラスによりCSSアニメを実装したり、応用できると思います。
また、中央を超えるとクラスが付きっぱなしパターンと、スクロールを戻すと元に戻るパターンの２つ用意しました。
下記がサンプルです。
↓
↓
↓
↓
↓
↓
中央で色が変わる
↓
↓
↓
スクロールで何度も
スクリプトはこちら
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>
