サイト内のボックスをスクロールに応じて上下左右に動かします #JavaScript #jQuery #works

  • スポンサーリンク

  • スポンサーリンク

概要

画面スクロールに従い、表示されたコンテンツを上下左右に動かします。

基本方針

・上下左右に動く範囲は、画面の幅、高さに合わせます。
・上下左右方向にはみ出たら、逆方向に動かします。例:左→右に動いたコンテンツがウィンドウ幅をはみ出たら、右→左に動くように実装します。
・左→右、右→左、あるいは、上→下、下→上 に方向がトグルしますので、三角関数を用いることにしました。

実装コード(必要な部分のみ紹介 ※デモの実装とは若干異なります)

HTML

<body class="scrollDemo">
	<h1>ボックスをスクロールに応じて上下左右に動かす</h1>
	<div id="box1" class="box"></div>
	<div id="box2" class="box"></div>
	<div id="box3" class="box"></div>
	<div id="box4" class="box"></div>
</body>

CSS(初期の位置やボックスのサイズなどを規定します)

/* ボックスをスクロールに応じて上下左右に動かします */
.scrollDemo {
	height:5000px;
	width:100%;
	border:1px solid black;
}

.scrollDemo .box {
	position: fixed;
	height: 50px;
}
.scrollDemo #box1 {
	background: #888888;
	left: 0;
	top:90px;
	width:25%;
}
.scrollDemo #box2 {
	background: #ff8888;
	left: 25%;
	bottom:10px;
	width:25%;
}
.scrollDemo #box3 {
	background: #88ff88;
	left: 50%;
	top:90px;
	width:25%;
}
.scrollDemo #box4 {
	background: #8888ff;
	left: 75%;
	bottom:10px;
	width:25%;
}

スクロールにともない、各ボックスの位置を制御するJavaScript(スピードの制御も行っています)

$(function() {
	var top1 = $('#box1').offset().top; //初期値を取得
	var top2 = $('#box2').offset().top; //初期値を取得
	var top3 = $('#box3').offset().top; //初期値を取得
	var top4 = $('#box4').offset().top; //初期値を取得
	var left1 = $('#box1').offset().left; //初期値を取得
	var left2 = $('#box2').offset().left; //初期値を取得
	var left3 = $('#box3').offset().left; //初期値を取得
	var left4 = $('#box4').offset().left; //初期値を取得
	var window_size = getWindowSize(); //ウィンドウサイズを取得
	var window_width = window_size[0]; //ウィンドウ幅
	var window_height = window_size[1]; //ウィンドウ高さ

	$(window).scroll(function() {
		var value = $(this).scrollTop(); //スクロールの値を取得
		var value_rad1 = ( value / 1.5 ) * ( Math.PI / 180 ); //速度調整
		var value_rad2 = ( value / 5 ) * ( Math.PI / 180 ); //速度調整
		var offset_x1 = ( window_width / 2.0 ) + ( window_width / 2.0 ) * Math.sin( value_rad1 - ( Math.PI / 2 )); //横方向のオフセット
		var amp_y = window_height - top - 50; //タイトル等表示部分の高さを除く
		var offset_y1 = ( amp_y / 2.0 ) + ( amp_y / 2.0 ) * Math.sin( value_rad1 - ( Math.PI / 2 ));; //縦方向のオフセット(速度速い)
		var offset_y2 = ( amp_y / 2.0 ) + ( amp_y / 2.0 ) * Math.sin( value_rad2 - ( Math.PI / 2 ));; //縦方向のオフセット(速度遅い)
	    $('#box1').css('left', left1 + offset_x1 ).css('top', top1 + offset_y1 ); //左から右へ、右から左へ
	    $('#box2').css('top', top2 - offset_y2); //下から上へ
	    $('#box3').css('top', top3 + offset_y2); //上から下へ
	    $('#box4').css('left', left4 - offset_x1).css('top', top4 - offset_y1); //右から左へ、左から右へ
	});
});

おまけとして、ウィンドウサイズを取得するJSを紹介します

function getWindowSize() {
	var sW,sH;
	sW = window.innerWidth;
	sH = window.innerHeight;

	return [sW,sH];
}

デモ(ボックスを別々に上下左右に動かします)

・別ページが開きます。
ボックスをスクロールに応じて上下左右に動かします
・下記のような感じに4つのボックスが動きます。※下記はあるスクロールの状態での表示例です。
スクロールに応じてボックスを上下左右に    

参考サイト:有難うございます!

【jQuery】パララックスデザインの作り方 | Nedia What's up!

最後に

上下左右に動かすスピードや方向などは、あくまで例です。これを元に色々応用可能と思います。


  • スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA