この記事は公開から6年、最終更新日からも6年経過しています。内容が古くなっている可能性があります。
目次
概要
画面スクロールに従い、表示されたコンテンツを上下左右に動かします。
基本方針
・上下左右に動く範囲は、画面の幅、高さに合わせます。
・上下左右方向にはみ出たら、逆方向に動かします。例：左→右に動いたコンテンツがウィンドウ幅をはみ出たら、右→左に動くように実装します。
・左→右、右→左、あるいは、上→下、下→上 に方向がトグルしますので、三角関数を用いることにしました。
実装コード(必要な部分のみ紹介 ※デモの実装とは若干異なります)
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];
}
デモ(ボックスを別々に上下左右に動かします)
・別ページが開きます。
ボックスをスクロールに応じて上下左右に動かします
・下記のような感じに４つのボックスが動きます。※下記はあるスクロールの状態での表示例です。
最後に
上下左右に動かすスピードや方向などは、あくまで例です。これを元に色々応用可能と思います。
