jqueryでスクロール量を取得するパララックスサイトコーディング

久しぶりにパララックスをつくった。スクロール量を取得して、特定の値で発火する仕組み。または、スクロール量の値をそのまま使うだけ。jqueryのscroll(fu)を使えば、いろいろできる。

fixedやabsoluteで真ん中に寄せるコーディングがわかってればレスポンシブも対応可能なはず。

久しぶりだったからできるか少々不安だったけど、落ち着いて考えれば大して難しい事でもない。、

作ったjsを細かく説明してみよう


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script>
$(function(){
	
	//スクロール中に実行される
    $(window).scroll(function () {
	    
	    //画面のスクロール量の数値を変数に入れる
        var ScrTop = $(this).scrollTop();
        
        //#checkValのvalue値にスクロール量の値を入れる
        $("#checkVal").val(ScrTop);
        
        //#checkValのvalue値が1000以上になったとき実行される
        if ($('#checkVal').val() > 1000) {    
	        
	        //#fixedのmargin-topの値をスクロールの値と計算して数値にする
			$("#fixed").css("margin-top" , -ScrTop + 800); 
			
		//条件以外の時に実行される
        } else {
	        
	        //#fixedに設定されているstyle要素を削除
	        $("#fixed").removeAttr("style");
        }
    });
});
</script>
<style>
/* 簡易リセット　*/
* {
	margin: 0;
	padding: 0;
}
body {
	margin: auto;
	/* 仮の高さ */
	padding-bottom: 3000px;
	width: 768px;
}
/*fixedの画面中央レイアウト*/
#fixed {
	margin: -200px 0 0 -200px;
	display: inline-block;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	vertical-align: middle;
	color: #FFF;
	background: #000;
	text-align: center;
}
/*vertical-align middleを効かせるための要素*/
#fixed:before {
	display: inline-block;
	height: 100%;
	width: 0;
	content: "";
	vertical-align: middle;
}
#fixed span {
	display: inline-block;
	vertical-align: middle;
}
</style>
<div id="fixed">
<span id="scroll">TEST</span>
</div>
<input type="text" id="checkVal" style="position: fixed;" value="0" />

とりあえずこんな感じだけど多分無駄も多い。わざわざinputのvalで条件を判断する意味はないだろうし。

発火の値が数値固定だから画面の縦の大きさによってはブレるので、マルチデバイスを考えたら微妙な作り方かも知れない。

fixedの画面センタリング表示はtopの50%指定して、センターに持ってきたい要素の高さの半分をネガティマージンに設定することで真ん中に持ってくることができます。左右のセンターも同じようにrightかleftの50%で設定します。margin:autoもtext-align:centerも使えないレイアウトでは重宝される設定です。