検索
以前ページスクロールで対象位置までスクロールしたら要素の表示・非表示処理に関する記事を書きました
jQueryでページスクロールの指定箇所で要素の表示・非表示を切り替える関数作ってやんよ!!!
今回はＬＰページなどでページスクロールをしていくと横から飛び出すイベントを作成。 前回は指定位置を固定ピクセル値で指定するものだったので、ユーザーのブラウザのウィンドウサイズに制限される要素が多いので、今回はブラウザの高さに左右されない仕様を設計。スライド式スクロールイベントページの作成
HTMLの記述
<div id="contents">
<div class="item">アイテム①</div>
<div class="item">アイテム②</div>
<div class="item">アイテム③</div>
<div class="item">アイテム④</div>
</div>
CSSの記述
#contents {
margin:0 auto;
width:90%;
height: 8000px;
display: block;
background:#999;
position:relative;
}
.item {
width:600px;
height:150px;
position:absolute;
background:#000;
color:#FFF;
line-height:150px;
font-size:200%;
text-align:center;
}
.item:nth-of-type(1){ top:1500px; }
.item:nth-of-type(2){ top:4500px; }
.item:nth-of-type(3){ top:6000px; }
.item:nth-of-type(4){ top:7500px; }
#slidEvent {
width: 100%;
height:10px;
background:#F00;
z-index:1;
}
★スクロール処理のテスト段階で役立つスクリプト★
//ページスクロール目安セット
$("body").prepend('<div id="hoge"></div>');
$("#hoge").css({'position':'fixed','left':'50px','top':'50px','width':'700px','z-index':'100'});
$(window).scroll(function(){
$("#hoge").text("現在のページスクロール値 " + $(this).scrollTop() + "px");
});
このようにスクリプトを追加するだけでリアルタイムでページスクロール値が出力されるのでご活用ください。
デザインによって見えにくい場合は、３行目にお好みでCSSの指定を追記してください。
JavaScriptの記述
$(function(){
//【１】フィールド指定値
var actionItem = $(".item");
var actionIgnite = 50;
var slideSpeed = 500;
var eventType = "slide";
//【２】イベント起動ポイントセット
var scrollFlag = true;
$("body").prepend('<div id="slidEvent"></div>');
var baseHeight = $(window).height() * (actionIgnite / 100);
$("#slidEvent").css({'position':'fixed','left':'0','top':baseHeight + 'px'});
//【３】ウィンドウサイズが変わった場合
$(window).resize(function(){
var baseHeight = $(window).height() * (actionIgnite / 100);
$("#slidEvent").css({'top':baseHeight + 'px'});
});
//【４】スクロールイベント開始
$(window).scroll(function(){
if(scrollFlag == true){
funcScrollIgnite();
}
});
//【５】アイテム制御フラグ
var passFlag = new Array();
for(i = 0; i < actionItem.length; i++){
passFlag[i] = "false";
}
//【６】イベント選択時のアイテム初期設定
if(eventType == "slide"){
var windowLimit = $(window).width();
actionItem.css({'opacity':'0','left':windowLimit});
}
//【７】スライドイベント実行処理
function funcScrollIgnite(){
var scrollTop = $(this).scrollTop();
var contentsHeight = [];
actionItem.each(function(){
var h = $(this).offset().top;
contentsHeight.push(h);
});
for(i=0; i < actionItem.length; i++){
if((scrollTop + baseHeight) > contentsHeight[i]){
actionItem.eq(i).css({'opacity':'1'}).animate({'left':0},slideSpeed);
}
}
passFlag[i] = true;
};
});
スクリプト処理の解説
上記スクリプトを各セクションごとにわかりやすい（？）解説をします。【１】フィールド指定値
//フィールド指定値
var actionItem = $(".item"); //①エフェクトを指定する要素
var actionIgnite = 50; //②エフェクトを発動させるウィンドウ高さ
var slideSpeed = 500; //③スライドさせるスピード値(1秒 = 1000)
var eventType = "slide"; //④選択エフェクトタイプ（スライド）
- ①エフェクトを指定する要素・・・HTMLでスライドさせたい要素の指定
- ②エフェクトを発動させるウィンドウ高さ・・・ブラウザの高さを他の処理で行っていて何％の時点で変数actionItemの要素を発動させるか指定できます。 例）80 → 80％（ブラウザの上から約８割の高さの位置）
- ③スライドさせるスピード値・・・変数actionItemの要素が指定位置までスライドしてくるスピード設定 例）1000 → 1秒かけて到達
- ④選択エフェクトタイプ・・・今回はスライドエフェクト以外の種類は作成していないので本当は不要なモノですが、今後別のアニメーションを作成する場合の拡張性を考えて作成。
【２】イベント起動ポイントセット
//イベント起動ポイントセット
var scrollFlag = true; //①スクロール制御フラグ
$("body").prepend('<div id="slidEvent"></div>'); //②イベント発火ポイント生成
var baseHeight = $(window).height() * (actionIgnite / 100); //③発火ポイント高さ位置取得
$("#slidEvent").css({'position':'fixed','left':'0','top':baseHeight + 'px'}); //④#slidEventの高さ位置指定
- ①スクロール制御フラグ・・・これも後のスクロールイベントにて重要な役割を果たすフラグを作成
- ②イベント発火ポイント生成・・・【１】-②の元になる要素を動的に作成
- ③発火ポイント高さ位置取得・・・【１】-②で指定した高さをここで取得
- ④#slidEventの高さ位置指定・・・③の値やその他のCSS指定をここに代入
【３】ウィンドウサイズが変わった場合
//ウィンドウサイズが変わった場合
$(window).resize(function(){
var baseHeight = $(window).height() * (actionIgnite / 100);
$("#slidEvent").css({'top':baseHeight + 'px'});
});
- ●上記のセクションでブラウザの高さを自動的に取得し、イベント発火ポイントの動的に設置されましたが、もしユーザーがページ閲覧中にブラウザのウィンドウサイズを可変させても対応できるように【３】-③と【３】-④の指定を$(window).resizeメソッドでも行っています。 ※これがないとブラウザ可変に対応できないので注意！
【４】スクロールイベント開始
//スクロールイベント開始
$(window).scroll(function(){
if(scrollFlag == true){
funcScrollIgnite();
}
});
- ●$(window).scroll(function()、つまりページでスクロールが行われた際に【２】-①で作成した変数scrollFlagがtrueであるかを判断し、是だった場合に【７】のユーザー定義関数funcScrollIgnite()を発動させます
【５】アイテム制御フラグ
//アイテム制御フラグ
var passFlag = new Array(); //①新規配列passFlag作成
for(i = 0; i < actionItem.length; i++){
passFlag[i] = "false"; //②変数actionItem要素の数だけ配列passFlagに"false"を代入
}
- ①新規配列passFlag作成 ここでスクロールイベントの条件をリアルタイムで反映させるために新規の配列を作成し、変数passFlagに代入
- ②変数actionItem要素の数だけ配列passFlagに"false"を代入 ①で作成した空の配列passFlagに変数actionItem要素の数だけfor文で"false"の値を代入していく。
【６】イベント選択時のアイテム初期設定
//イベント選択時のアイテム初期設定
if(eventType == "slide"){
var windowLimit = $(window).width(); //①現在のウィンドウ幅を変数windowLimitに代入 actionItem.css({'opacity':'0','left':windowLimit}); //②イベントタイプが"slide"の場合のアイテム初期設定
}
- ●このセクションもエフェクトが１種類の場合は必要ない処理ですが、とりあえず【１】-④で作成した変数eventTypeが条件のものであった場合、現在のブラウザウィンドウの横幅の値を変数windowLimitに代入し、変数actionItemの初期設定のCSSを動的に設定します。 ※CSSに直接記述するか、動的に書き換えるかだけの処理ですが、エフェクト次第では変数actionItemの初期位置が変更する事になると思うので、今後機能を増やす場合、あった方が良いかと・・・
【７】スライドイベント実行処理
function funcScrollIgnite(){
//①現在のスクロールを変数scrollTopに代入
var scrollTop = $(this).scrollTop();
//②空の要素を変数contentsHeightに代入
var contentsHeight = [];
actionItem.each(function(){
//③変数actionItem要素それぞれの開始位置を変数hに代入
var h = $(this).offset().top;
//④push関数で変数hの値を変数contentsHeightに代入
contentsHeight.push(h);
});
for(i=0; i < actionItem.length; i++){
//⑤もし変数contentsHeightの値が判定値を越えた場合
if((scrollTop + baseHeight) > contentsHeight[i]){
//⑥条件を満たしたactionItem要素をスライド移動
actionItem.eq(i).css({'opacity':'1'}).animate({'left':0},slideSpeed);
//⑦アイテム制御フラグの変更
passFlag[i] = true;
}
}
};
- ①現在のスクロールを変数scrollTopに代入 ページコンテンツ内の今現在のスクロールトップ値を変数scrollTopに代入します。
- ②空の要素を変数contentsHeightに代入 次の処理ように空の要素を変数contentsHeightに代入します。
- ③変数actionItem要素それぞれの開始位置を変数hに代入 each関数を使ってactionItem要素が存在する分にそれぞれの開始位置を取得し、変数hに代入していきます。
- ④push関数で変数hの値を変数contentsHeightに代入 ②で作成した空の変数contentsHeightにpush関数を使用して変数hに各値を代入していきます。今回の設定の場合alert出力をすれば確認できますが、この段階で変数contentsHeightに入っている値は『1500,4500,6000,7500』となっていると思いますが、それはつまりCSSで指定したclass名itemの１～４個目の開始位置の値が入っています。
- ⑤もし変数contentsHeightの値が判定値を越えた場合 for文でactionItem要素（class名item）の数だけ回し、scrollTop変数（現在のスクロールトップ値）とbaseHeight変数（ブラウザドキュメント開始位置からウィンドウのイベント発火地点までの値）を加算した値がcontentsHeight変数のそれぞれの値（1個目は1500px、2個目は4500px、3個目は6000px、4個目は7500px）を越えたか判定します。
- ⑥条件を満たしたactionItem要素をスライド移動 ⑤の条件をクリアしたactionItem要素のCSSのopacityを1（非透過）に戻しanimate関数にてコンテンツの外側に設置していたactionItem要素を0位置まで【１】-③で指定したslideSpeed変数のスピードでスライドさせます。
- ⑦アイテム制御フラグの変更 スライドが完了したactionItem要素がまた初期位置に戻らないように変数passFlagを完了の意味の"true"に書き換えます。
