パララックス　円運動をさせる〜jQuery

パララックス効果の中で円運動をさせるスクリプトを書いてみました。

円運動は円の半径を決めてその角度を少しずつ変化させることで実現できます。
x座標とy座標を数式で表すと次のようになります。
rが半径でradianが角度（ラジアン）です。
x = r*cos(radian)
y = r*sin(radian)

角度Ａ度(angle)からラジアンに変換する式は次のとおりです。
angle＊(Math.PI / 180)

以上の円運動の基本公式を活用すればスクロール量をangleとすることで円運動をさせることができます。

円運動のサンプル
＊パララックス用ですからスクロールすると動きます。

スクリプト

$(function() {
    var pos = $("#no1").offset();//最初の位置
    var angle = 0;
    var radius = 200;		//半径
    var v = 5;		//加速度
    $(window).scroll(function() {
       var y = $(this).scrollTop();
       var radian = angle*(Math.PI/180);
       angle = y/v;
       angle %= 360;
       $("#no1").css("left", pos.left + radius*Math.cos(radian) );
       $("#no1").css("top", pos.top + radius*Math.sin(radian) );
    });
});

HTML

<p id="no1">A</p>

p要素の中のテキストAをimgタグで画像にするとその画像が円運動します。

画像の円運動サンプル
＊パララックス用ですからスクロールすると動きます。