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

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も使えないレイアウトでは重宝される設定です。

パララックス系の仕組みって必要?

派手な動きを見せるページは、ユーザーエクスペリエンスを高め、ページ滞在時間を伸ばすのが目的らしいがこれをする事でページのCVRが上がるのか少し疑問に思う。

面白さより、伝えたいことがしっかり伝わってCVに結びついてくれた方が断然良いわけだし。

スマホサイトではあまり見かけない

スマホでパララックス使ってるサイトが少ない。PCに比べたら断然画面も小さいし、軽くするためにも使わないのは当たり前か。

スマホからのアクセスの方が断然多いわけだし、パララックスをわざわざつくる意味が本当にないよね。お客さんの要望がなければまずつくることはないだろう。

Web制作会社の技術力アピールくらいか?

派手なデザインやたくさんアニメーションするようなサイトのメリットは、技術力のアピールくらいかない。

ホームページ制作会社のトップページやLPに使うくらいだろうか。

いろいろ考えた結果、手間をかけずに作れるのであれば問題ないけど、これつくるの時間やお金を取られるのであれば、つくる必要はない。費用対効果はすこぶる悪いだろう。結局はスムーズに作れるか技術力の高さ次第というわけだ。

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら