Javascript rotator について。
こんばんは。
Javascriptについてソースを拝見してもわからなく
行き詰ってしまったのでこちらで質問させて頂きました。
この度、下記のJavaを使用してホームページを作成したく思っております。
【説明】http://www.skuare.net/test/j3DRotator_1.html
【デモ】http://www.skuare.net/test/j3DRotator.html
が、そこで一つお尋ねしたいのですが
テキストには遠近感がついていますが画像には遠近感が全くありません。
画像にも手前は大きく、奥に行けば小さくなるアクションを付ける場合は
どの様に改善すれば宜しいのでしょうか?
また、参考になるサイトでもあれば良いのですが・・・(涙
初歩的な質問だとは思いますが
何卒、ご教授宜しくお願い致します。
No.1ベストアンサー
- 回答日時:
ざっと見ただけですが…
$.fn.rotate の終わりのほうの
this[i].style.top = -Y + "px";
this[i].style.left = X + "px";
this[i].style.fontSize = size + "em";
this[i].style.opacity = (size*10)/5;
this[i].style.zIndex = elem[i].dist;
の部分で、各要素の位置やサイズを指定しているみたいです。
サイズに関してはfontSizeを指定しているだけなので、単純には画像のサイズは変わらないということになっているみたい。
オリジナルのデモは文字のみなので、画像までは考慮して作成していないのかも。
http://www.willjessup.com/sandbox/jquery/rotator …
…かと思ったら、最初に作成したものはこんな感じらしい。
http://www.willjessup.com/sandbox/jquery/solar_s …
(画像のサイズもちゃんと変わっていますね)
この(↑)HTMLソースのように、画像のサイズ指定をemで指定しておけば、fontSizeの指定がそのまま画像サイズに反映されるということみたいですね。
No.3
- 回答日時:
まわせ!まわせ!実験報告
No.1様の回答 + No.2様の回答 で、画像も伸びちじみ、
オパシティはまあいいか。
if(p.element.getElementsByTagName("img").length>0)
p.element.getElementsByTagName("img")[0].style.width = scale - (zz * 300 |0) + '%';
No.2
- 回答日時:
まわせ!まわせ~!むずかしいざひょうけいはむししてるけど・・・
すべてのぜんかくくうはくは、はんかくにしてちょ!
<!DOCTYPE html>
<title></title>
<style type="text/css">
#box {
width : 800px;
height : 800px;
background-color: black;
list-style :none;
margin: 0;
padding: 0;
}
#box li {
color : #fff;
}
</style>
<body>
<ul id="box">
<li>1
<li>2
<li>3
<li>4
<li>5
<li>6
<li>7
<li>8
<li>9
</ul>
<script>
(function ( ) {
var node = document.getElementById ('box');
var lis = node.getElementsByTagName ('li');
var cnt, li;
var parts = [ ];
var cx = node.offsetWidth / 2;
var cy = node.offsetHeight / 2;
var r = 300;
var n = 360 / lis.length;
var xr = 3;
var yr = 1;
var zr = .5;
var deg = Math.PI / 180;
var depth = 1000;
var scale = 700;
node.style.position = 'relative';
node.style.overflow = 'hidden';
// ざひょうのていぎ
for (cnt = 0; li = lis[cnt]; cnt++) {
li.style.position = 'absolute';
parts.push ( {
'element' : li,
'x' : Math.sin (n * cnt * deg) * r,
'y' : 0,
'z' : Math.cos (n * cnt * deg) * r,
'alpha' : 1,
'scale' : 1
});
}
(function ( ) {
var x, y, z, mx, my, mz, p, t, xx, yy, zz, s, ss;
for (cnt = 0; p = parts[cnt++]; ) {
x = p.x, y = p.y, z = p.z, s = p.element.style;
if (xr) { //x軸の回転
t = xr * deg;
my = y * Math.cos (t) - z * Math.sin (t);
mz = y * Math.sin (t) + z * Math.cos (t);
y = my, z = mz;
}
if (yr) {
t = yr * deg;
mx = x * Math.cos (t) - z * Math.sin (t);
mz = x * Math.sin (t) + z * Math.cos (t);
x = mx, z = mz;
}
if (zr) {
t = zr * deg;
mx = x * Math.cos (t) - y * Math.sin (t);
my = x * Math.sin (t) + y * Math.cos (t);
x = mx, y = my;
}
zz = (z + depth) / scale;
xx = (cx + x / zz) |0;
yy = (cy + y / zz) |0;
s.top = yy + 'px';
s.left = xx + 'px';
s.fontSize = scale - (zz * 300 |0) + '%';
p.x = x, p.y = y, p.z = z;
}
setTimeout (arguments.callee, 30);
})();
})();
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
その要素がjQueryでremove()済...
-
初心者です。gulpでコンパイル...
-
二次元配列の中の各行の要素を...
-
【Google Apps Script】「ライ...
-
ローディングアニメーションの...
-
jQueryでシンセサイザーを作っ...
-
ジャバスクリプトについて。
-
jQueryローディングアニメーシ...
-
フォームが空欄の時にフォーム...
-
画面に表示したらアニメーショ...
-
画像の表示位置
-
jsで質問です。 ボタンが二つ存...
-
switch文のswitch(n)の部分を複...
-
セレクトボックスを2つ設けて選...
-
セレクトボックスを2つ選択して...
-
jsで、len~(__=C.value)]||val...
-
jQueryでのレスポンシブが綺麗...
-
追加ボタンを押した際に ok ボ...
-
食材の期限を管理するためにGAS...
-
前回の質問の続き function mov...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
このプログラムに王様の逃げ道...
-
初心者です。gulpでコンパイル...
-
前回の質問の続き function mou...
-
鍵盤アプリで、スマホの画面に...
-
スマホ上で、左右スワイプで次...
-
jQueryで同じクラス名のものを...
-
読み込んだQRコードをフォーム...
-
追加ボタンを押した際に ok ボ...
-
Colorboxがうまく設置できません
-
階層別の組織図の自動作成について
-
二次元配列を使って順位をだす...
-
【GAS】WEBアプリでハイパーリ...
-
HTMLで作った時報アプリが動き...
-
セレクトを全て選択されていな...
-
画面遷移を行わずに同一ページ...
-
jsで質問です。 ボタンが二つ存...
おすすめ情報