javascriptの円形画像ギャラリーのサンプル

Question

こんにちは、現在ホームページを作ろうと思っていて
１点javascriptによる実装を考えております。

http://www.flashmo.com/preview/flashmo_098_3d_curve_wall
がイメージに近いのですが、これだとflashなので、
これに似たjavascriptを探しております。
（・ドラッグとかでスピードが変わらなくてもよく、
　　単にゆっくり回転している物を探しております。
　・単に画像ギャラリーのsliderを少し円形(3D）にしたものを
　　探しております。）

なにか情報がございましたら
どんな情報でも良いので、ご相談させてくださいませ。

失礼致します。

babu_baboo · Accepted Answer

　function sinIntDeg (n) {

　　return bufSin [n % 360 |0];
　}
　

　function cosIntDeg (n) {
　　return bufCos [n % 360 |0];
　}
　
　
　function aryToFixedString (ary) {
　　return ary.map (function (a) { return a.toFixed (10); } ).join (',');
　}
　

　function Tile (image, distance, angle, scale, offsetHeight) {
　　this.image = image;
　　this.distance = distance;
　　this.angle = angle;
　　this.scale = scale;
　　this.offsetHeight = offsetHeight;
　　this.position = {};
　　this.rotate ();
　}

　function TileRotateY (stepAngle) {
　　var a = this.angle += stepAngle || 0;
　　var r = this.distance;
　　
　　this.position = {
　　　x: sinIntDeg (a) * r,
　　　y: this.offsetHeight,
　　　z: cosIntDeg (a) * r
　　};
　　
　　return this;
　}
　
　
　function TileCreate (image, distance, angle, scale, offsetHeight) {
　　if (arguments.length < 2)
　　　throw new Error;
　　
　　return new Tile (
　　　image,
　　　distance || 100,
　　　angle || 0,
　　　scale || 1,
　　　offsetHeight || 0
　　);
　}
　

　Tile.prototype.rotate = TileRotateY;
　Tile.create = TileCreate;
　
　//________________________
　
　function FloorMember (member, angle, step) {
　　this.member = member;
　　this.angle = angle;
　　this.step = step;
　　this.timerId = null;
　}
　
　
　function FloorMemberRotate () {
　　this.angle += this.step;
　　
　　this.member.forEach (function (tile) {
　　　var p = tile.rotate (this.step).position;
　　　var sin = sinIntDeg (tile.angle);
　　　var cos = cosIntDeg (tile.angle);
　　　var ary = [
　　　　tile.scale * cos,　　　　　　 0,　　　　　　　 -sin,　　　　　 0,
　　　　　　　　　　　 0,　　tile.scale,　　　　　　　　　0,　　　　　 0,
　　　　　　　　　　 sin,　　　　　　 0,　 tile.scale * cos,　　　　　 0,
　　　　　　　　　　 p.x,　　　　　 p.y,　　　　　　　　p.z,　　　　　 1
　　　];

　　　tile.image.style['-webkit-transform'] = 'matrix3d('+ aryToFixedString (ary)+')';
　　}, this);
　}
　
　
　function FloorMemberStart () {
　　var that = this;
　　var func = function () { that.rotate (); };
　　if (! this.timerId) {
　　　this.timerId = setInterval (func, 30);
　　}
　}
　
　
　function FloorMemberCreate (images, radius, offsetFloor, step) {
　　if (arguments.length < 2)
　　　throw new Error;
　　
　　var member = [];
　　var imgs = Array.prototype.slice.call (images, 0);
　　var len = imgs.length;
　　var side = int (radius * 2 * Math.tan (Math.PI / len) + 0.5);
　　var img;
　　var aspectRatio = parseInt (imgs[0].height, 10) / parseInt (imgs[0].width, 10);
　　var height = int (side * aspectRatio + 0.5);
　　var offsetHeight = (offsetFloor || 0) * height;
　　var n = 360 / len;

　　for (var i = 0; i < len; i++) {
　　　img = imgs[i];
　　　img.width = String (side);
　　　img.height = String (height);
　　　member.push (new Tile (img, radius, n * i, 1, offsetHeight));
　　}
　　
　　return new FloorMember (member, 0, step || 1);
　}
　
　
　FloorMember.prototype.start = FloorMemberStart;
　FloorMember.prototype.rotate = FloorMemberRotate;
　FloorMember.create = FloorMemberCreate;
　
　this.FloorMember = FloorMember;
}) ();

FloorMember.create (document.querySelectorAll ('#screen img[alt="f0"]'), 1000, 0, 1).start ();
FloorMember.create (document.querySelectorAll ('#screen img[alt="f1"]'), 1000, 1, 2).start ();
FloorMember.create (document.querySelectorAll ('#screen img[alt="f2"]'), 1000, 2, 3).start ();

</script>

ipad2 で、うごかしてみました。　そこそこ速くうごきますよ！

babu_baboo · Answer

おはようございます。あそんでいたら、あさになりました。 ipad なら、ごきぼうどおりにうごきます(?) ながいので、ぶんかつです。 fujillin さんに、しげきされ・・・ sample

fujillin · Answer

＃5です。

初期位置が予定と違っているのに気が付きました。
計算ミスってましたので、訂正。

//　var animationOffset = 0;　削除（使用していなかった）

var setUnitData = function(){
　　var sylinder = getSylinderPos();
//　imageOffsetX = sylinder(0).sx;　符号間違え
　　imageOffsetX = -sylinder(0).sx;

for(x = 0; x<screenW; x += unitW)
　　　units.push(sylinder(x));
　　unitN = units.length;
　　imageOffsetX = 0; // 追加してます
　}

初期表示の位置だけなので、あまり問題にはならないけれど、
他にもいろいろあるかも。

fujillin · Answer

//　つづき

fujillin · Answer

＃3です。 canvasを使ったことがないので、お勉強のために作ってみました。なんとかアニメーションに耐えられそう。立体の座標計算もよくわからないので、かなりいい加減です。（要領も悪い）それなのでとてもこのままでは使えませんが、とりあえず雰囲気は出ているので、サンプル代わりに… （＜＞のクリックで速度が変わります）（全角空白は半角に） sample

taloo · Answer

>No.3
なるほど、CSSで描く時は、transform: matrix3d()を使えばいけるかもしれません。
（私自身、matrix3d()の使い方がわかっていませんので、、、）

http://jsfiddle.net/vEWEL/11/
http://jsfiddle.net/paulsidebottom/jbfSj/
via: http://stackoverflow.com/questions/8861739/css-matrix3d-transform

fujillin · Answer

#1です。

ちょっと探してみたら、canvasを利用して画像を変形する方法を紹介しているものがありました。
http://jsfiddle.net/fQk4h/

この方法を応用して円筒曲面からの投影を行なえば、それなりに綺麗にできると思いますが、計算量が多くなりそうなのでアニメーションに耐えられるかどうかは不明です。

taloo · Answer

軸移動（No.1参照サイトのような移動）を表現するのはwidth、heightを小さくするだけです。
軸回転が組合わさる場合はCSS3のtransformが必要です。

{
transform-style: preserve-3d;
perspective: 500;
transform: rotateY(60deg);
}

このような書き方で軸回転します。

※すみません、両方とも「軸回転」というのが正式な呼び方かもしれませんが、
非常にわかりづらいと思いますので、個人的に「軸移動」「軸回転」と使い分けています。

CSSでは台形に変形させる方法はなかったと思います（skewという平行四辺形に変形させるものはあります。）
ので、heightを調整して擬似的に見せかける程度では無いでしょうか。

ご参考まで。

fujillin · Answer

「carousel」、「3Ｄ」などをキーに検索してみればいろいろと見つかると思います。

原理的にはこんな感じでしょうか？
（ご質問にあわせるには、近景部分を非表示するなどが必要ですが…）
http://www.professorcloud.com/mainsite/carousel.htm

javascriptの円形画像ギャラリーのサンプル

function sinIntDeg (n) {

おはようございます。

＃5です。

// つづき

＃3です。

>No.3

#1です。

軸移動（No.1参照サイトのような移動）を表現するのはwidth、heightを小さくするだけです。

「carousel」、「3Ｄ」などをキーに検索してみればいろいろと見つかると思います。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　function sinIntDeg (n) {

//　つづき