要素がブラウザの中央付近になったときに、エフェクトがかかるデザインをよく見かけるようになりました。
このサンプルでは、特定クラスで囲った要素までスクロールで移動したとき、画面中央を過ぎると新たなクラス当たるよう実装しました。
クラスにより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>