Javascript(JQuery)にて円軌道で画像を動かす。

 Javascript(JQuery)で画像を円軌道で移動させるサンプルです。画像をクリックするとクリックされた画像が正面で停止する仕様になっています。再度動かすときは、下側のボタンをクリックしてください。設定できる項目は、画像の移動軌道、画像のサイズ、初期位置、速度、移動方向、透明度ができます。
 設定項目が複雑なでの、初回は、横スクロールについて説明したいと思います。設定次第で縦スクロールも可能になっています。

円軌道スクロールサンプル

サンプルをもっと見たい方はこちら

使い方

設定変更は、「js/java.js」を編集します。

//中心座標とタグIDです。
var CID = “#Central”;
var pox = 250;
var poy = 120;

//最初の進行方向(right、left)
var ScrollDirection = “right”;

//ページがロードされたとき、画像を初期位置にセットする時間(ミリ秒)の設定です。1は初期アニメーション無しになります。
var TimerP = 1500;

//画像の移動速度(ミリ秒)200以上の数字で設定してください。
var Timer = 200;

//画像を設置する半径
var radius = 200;

//円の傾き「slopeX」「slopeY」は、(-89〜89)の数値で設定してください。両方の値が45の時正円になります。「slopeX」を45より小さくすると横長の楕円になります。
var slopeX = 45;
var slopeY = 10;

//最初の画像の位置(0〜360) 最初の画像を90にセットすると正面に来ます。0が右、90が正面、180が左、270が裏になります。
var setPosition = 90;

//最大表示にする位置 0が右、90が正面、180が左、270が裏になります。
var slopeF = 90;

//透過度の最低値(0.0〜1.0)正面の画像の透明度が1で、反対側の画像の透明度の設定になります。
var op = 0.2;

//画像の縮小倍率(0.0〜1.0)正面の画像の透明度が1で、反対側の画像の縮小倍率の設定になります。
var zo = 0.3;

 関数「setCenterAction」は、画像が正面(setPositionの位置)に来たとき、処理が行われる用になっています。引数の「n」は画像番号です。ご自由に処理を書いてください。

(注意してください
 今回のサンプルは、Jqeryのバージョンが古いと、うまく動かない場合があります。その時は1.5以上のバージョンにしてください。

 ソースコードは、以下のようになっています。もし良かったらダウンロードしてください。
tar形式でダウンロード
zip形式でダウンロード

Be the first to comment on "Javascript(JQuery)にて円軌道で画像を動かす。"

Leave a comment