コンテンツを上下に動かすには

解決済

質問者：karup
質問日時：2012/10/01 20:40
回答数：2件

Javascript初心者です。よろしくお願いします。
コンテンツをふわふわと上下に動かしたいです。
下記サイトの「ふわふわしてるコンテンツ」を参考にしました。
http://kaelab.ranadesign.com/mtctrl/mt-search.cg …

複数（20個程）のコンテンツを動かしたいのですが
それぞれに速度やふり幅を変えるにはどうすれば良いでしょうか。
今は、上記ブログに書いてあった下記コードを20個記載しています。
(function(){
var i = 0;
(function move(){
i = i > 0 ? -1 : 1;
var p = $("#test01").position().top;
$("#test01").animate({ top: p + i * 3 }, {
duration: 500,
complete: move
});
})();
})(jQuery);

また一定ではなく
animate({ top: p + i * 3 }と
animate({ top: p + i * 8 }
というふうに、ふり幅も２種類を繰り返し設定したい場合は
どうすれば良いのでしょうか。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： babu_baboo
回答日時：2012/10/03 10:29

かいとうがつきませんね。

jQuery をつかっていません。
ふりはばは、[[x,y],[x1,y1],......]のように相対的な座標をしていします
さゆうにも、えんけいにも、うごけます
ぜんかくくうはくは、はんかくにおきかえてください

<!DOCTYPE html>
<title></title>
<meta charset="UTF-8">
<body>

<div id="hoge">
　<p>test</p>
　<img src="" alt="" id="g0">
　<img src="" alt="" id="g1">
　<img src="" alt="" id="g2">
　<img src="" alt="" id="g3">
</div>

<script>
(function () {
　var DEFAULT_OFFSET_POSITION = [[0,0], [2,1], [4,3], [2,1], [0,0], [-2,1], [-4,3], [-2,1]];

　function getPosition (e) {
　　for (var x = 0, y = 0; e; e = e.offsetParent)
　　　x += e.offsetLeft, y += e.offsetTop;
　　if ('undefined' === typeof this.x) this.x = x;
　　if ('undefined' === typeof this.y) this.y = y;
　　return this;
　}

　function Dancer (target, offsetAryPoint, interval, position) {
　　this.target = target;
　　this.point = offsetAryPoint;
　　this.interval = interval;
　　this.position = position;
　　this.timerId = null;
　　this.index = 0;
　　this.max = offsetAryPoint.length;
　}

　function LOOP () {
　　var n = this.index;
　　var s = this.target.style;
　　s.top = this.position.y + this.point[n][1] + 'px';
　　s.left = this.position.x + this.point[n][0] + 'px';
　　this.index = (n + 1) % this.max;　　
　}
　
　function start () {
　　var that = this;
　　if (! this.timerId)
　　　this.timerId = setInterval (function () { LOOP.call (that) }, this.interval);
　　return this;
　}
　
　function stop () {
　　clearInterval (this.timerId);
　　this.timerId = null;
　　return this;
　}

　function create (target, offsetAryPoint, interval, position) {
　　if (1 > arguments.length)
　　　throw new Error;
　　
　　var p = getPosition.call (position || { }, target);

　　var s = target.style;
　　　　s.position = 'absolute';
　　　　s.top = p.y + 'px';
　　　　s.left = p.x + 'px';

　　var obj = new Dancer (
　　　　 target,
　　　　 offsetAryPoint || DEFAULT_OFFSET_POSITION,
　　　　 interval || 50,
　　　　 p
　　　　);
　　return obj.start ();
　}

　Dancer.prototype.start = start;
　Dancer.prototype.stop = stop;
　Dancer.create = create;

　this.Dancer = Dancer;
}) ();

var src = 'data:image/gif;base64,' +
　'R0lGODlhGAAYALMAAPr4+wBlAQaPARF9CSylD0K9Gk3OHlqzNFnSG23WMHa/TKHfXa3lbczs' +
　'ocDpgf///yH5BAEAAA8ALAAAAAAYABgAAATZ8Mkpg72Wah3GWYzjMMsxBBtlKU7jvq6jZFvH' +
　'wPjLnNzQxoyg8Ndw8CaBW4O0aDqdPwaqoig+r02GAFFozCSDJfaqBZgPjcEjcHCMn2UzQNA4' +
　'WJhvkEAOaAhAdyAMH1h7cn4kUgNMewIGCJAIhmZ+BYkDiwuTW5CTfQIFCAkgmAwJngIEnpWR' +
　'CTsDCVyefJ+hkQYJmLaqtJSgkZEFagQIj7x8lQbKywgEYMsGBZPJ0MtqEgTQ0p/V0M4TBMTQ' +
　'Ao7dxt/g2ebd4Snh697o7gQF3QXtKRvh+/v5EQA7';

var imgs = document.getElementById ('hoge').getElementsByTagName ('img');
imgs[0].src = imgs[1].src = imgs[2].src = imgs[3].src = src;

var circle = (function (r, n) {
　for (var a = [], i = 0; i < n * 2; i++)
　　a[i]=[Math.sin (i * Math.PI / n) * r |0, Math.cos (i * Math.PI / n) * r];
　return a;
}) (50, 60);

Dancer.create (imgs[3], circle, 30, {x:300, y: 200});
Dancer.create (imgs[2], [[0,1], [0,2], [0,4], [0,6], [0,4], [0,2], [0,1], [0,0]], 50);
Dancer.create (imgs[1], [[0,1], [0,2], [0,4], [0,6], [0,4], [0,2], [0,1], [0,0]], 100);
Dancer.create (imgs[0]);

</script>

- 0
- 件

通報する

この回答へのお礼

babu_baboo様
回答ありがとうございます。
お礼が遅くなってしまい申し訳ありません。

すすすすごいです！！！！
正直にいうと、半分くらい書いてもらったコードが理解出来ていないのですが
こまかく調整できて、まさに自分がやりたいことでした。

ありがとうございました！

通報する

お礼日時：2012/10/10 12:51

No.2

回答者： fujillin
回答日時：2012/10/03 18:38

＞上記ブログに書いてあった下記コードを20個記載しています

基本的にはそれでも問題はないと思います。
数を増減したり、変更したりするときにコードをいちいち修正しなければならないのが、面倒といえば面倒ですが…

もう少し効率よく行ないたいというのであれば、可変にしたい部分を引数で定義できるような形にして、オブジェクト化しておくと、あとは個数分そのオブジェクトをnewなどで作れば良くなります。
オブジェクト化に関しては、以下あたりをご参考になさってください。
http://www.graviness.com/javascript/object.html
http://ja.wikibooks.org/wiki/JavaScript_%E3%82%A …
http://www.atmarkit.co.jp/fdotnet/ajaxjs/ajaxjs0 …
http://www.graviness.com/virgo/javascript/object …

Ｎｏ1様がすでにその例を提示なさっていますが、ほぼ似たような例を…
（jQueryを使用していないのと、三角関数で動かす点も同じアイデアになっちゃってますが…）
周期（時間）、ふり幅（配列指定可能）、基準の表示位置、移動変換用関数などを指定可能な引数にしてあります。
停止用のボタンはおまけです。（あってもなくても問題ありません）
とりあえずのサンプルなので、解説はなしです。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>

<body>

<div id="hoge">
<img src="A.jpg" alt="A">
<img src="B.jpg" alt="B">
<img src="C.jpg" alt="C">

<input type="button" value="stop1" onclick="fuga[0].stop();">
<input type="button" value="stop2" onclick="fuga[1].stop();">
<input type="button" value="stop3" onclick="fuga[2].stop();">
</div>

<script type="text/javascript">

</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

fujillin様回答ありがとうございます。
お礼が遅くなってしまい申し訳ありません。
オブジェクト化は良く分からないので、早速リンクしてくださったサイトを読ませていただきます。

Ｎｏ1様もそうでしたが、fujillin様もオブジェクトを自由自在に動かせて
本当に本当にすごいです！！
書いてくださったコードを元に、ふわふわしたコンテンツを頑張ってみます。
ありがとうございました！！

通報する

お礼日時：2012/10/10 12:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！