icon_topicsテクニック

5分で出来るJQueryによるスクロールを利用したアニメーション

はじめまして
この度izmakerTodayに記事を書くこととなりました、izmaker開発担当の小暮です

映像知識はほとんどありません、昔あったiMovieHDで動画を貼りあわせてキャッキャするのが関の山です。
ですので得意分野のweb系のことや何か面白いものを見つけたら記事にしていこうと思います。

さて、タイトルにありますJQueryによるスクロールを利用したアニメーションに関してご紹介いたします。

まずこちらのサイトを御覧ください
若干挙動が重たいですが、画面をスクロールするとイラストが様々な動きを見せてくれると思います。
こんなアニメーションの簡単な作り方をご紹介したいと思います。
少し前に流行った「パララックス効果」も利用してますが、そちらはまた後ほど

準備

  1. HTMLで動かしたいオブジェクトにIDまたはクラスを当てます。
  2. CSSで該当オブジェクトに下記を設定します
    1. position:absoluteまたはrelative;
    2. leftで横位置を設定
    3. topで縦位置を設定

これで準備完了です。
次にJavaScriptで下記を設定します

$(function() {
$(window).scroll(function(){
var y = $(this).scrollTop();
$(‘設定したIDまたはクラス’).css(‘top’, parseInt(CSSで設定したtopの数値 +(y-アニメーション開始位置) / アニメーション速度) + ‘px’); //Y軸
$(‘設定したIDまたはクラス’).css(‘left’, parseInt(CSSで設定したleftの数値 -(y-アニメーション開始位置) / アニメーション速度) + ‘px’); //X軸
});
});

例えばこんな感じです

$(‘#pengin’).css(‘top’, parseInt(135 +(y-500) / 0.5) + ‘px’);
$(‘#pengin’).css(‘left’, 312 + ‘px’);

上記の例だとY軸しか設定していないので上下方向にスクロール速度の倍の速さで移動します
簡単に説明しますと

  • 「(y-500)」は「このオブジェクトは500pxスクロールしたらアニメーションを開始する」
  •  「/ 0.5」は「スクロール速度の2倍の速さで」

ということです。

数値の設定方法についての補足ですが、

  • topやleftなどの本来整数で設定されるべきものは、計算式を「parseInt()」で囲わないと動きません
  • アニメーション速度は、整数で数値を大きくするほど遅くなり、小数点以下の数値で数字を小さくするほど動きが早くなります。当然0を設定すると動きません

上記ではtopとleftのみの設定なっていますが、opacityで透明度を変更したりcolorで色を変更したりなど基本的になんにでも応用できます

例:$(‘#pengin’).css(‘opacity’, 1 – ((y-500) * 0.005)); //透明度

ページ内リンクを設定し、アンカーへのスクロールにイージングをかけてくれる「jquery.easingscroll」等を利用するとより面白いアニメーションが作成できます。