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