サイトのデザインに関して質問です。


(1)ウィンドウ枠の右下に枠から顔を出しているかたちで人物がいて(2)それに向かって左上からオブジェクトがまっすぐ飛来する。(3)オブジェクトは途中で真ん中にあるサイトタイトルを破砕する(4)最後にその人物にぶつかる。

という一連の動画を描きたいのですが、これをウィンドウ枠を固定せずに実行できるものでしょうか?ウィンドウ枠を変えても同じ動きをするように作りたいのですがどうしたらいいかわからなくて。

一番困っているのは、ウィンドウのサイズによってはそのオブジェクトの飛来する角度から変わってしまういうことなのですが、似たようなデザインのサンプルがありましたら教えて頂きたいです。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/05/08 11:34:36
  • 終了:--

回答(4件)

id:aki73ix No.1

aki73ix回答回数5224ベストアンサー獲得回数272004/05/08 12:08:06

ポイント30pt

良く私が使うのはTABLEをボーダレスにしてオブジェクトを並べる手法です

15パズル等を作ったときに使用しています

テーブルの枠1つにオブジェクトを1つ貼り付けます

縦書きのホームページを作るときにも使える方法です

id:ysht

えと、斜めに横切る動画、なのですがテーブルだと枠を横断できませんよね?

2004/05/08 17:16:11
id:staku No.2

staku回答回数21ベストアンサー獲得回数02004/05/08 12:37:23

ポイント30pt

角度とか気にせず、到達回数で割ったものを加算すればいいんじゃないでしょうか。

JavaScriptでいいんですかね? ものすごい手抜きなのですが、作ってみました。

微調整とか必要ですけど、だいたいこんな感じでいいのかなあ?

<html>

<head>

<script language=”JavaScript1.2”>

<!--

var x = 0;

var y = 0;

var cw = 0;

var ch = 0;

var reftime = 500; // 再描画間隔(ms)

var n = 20; // 到達回数

function init(){

x = 0;

y = 0;

cw = document.body.clientWidth;

ch = document.body.clientHeight;

var c = document.getElementById(”objC”);

c.style.top = ch / 2;

c.style.left = cw / 2;

var e = document.getElementById(”objE”);

e.style.top = ch - 36;

e.style.left = cw - 18;

setTimeout(”doPrint()”, reftime);

}

function doPrint(){

document.getElementById(”objA”).style.top = y;

document.getElementById(”objA”).style.left = x;

if (x > cw / 2) {

document.getElementById(”objC”).innerText = ”××××”;

}

x += cw / n;

y += ch / n;

if (x < cw) {

setTimeout(”doPrint()”,reftime);

}

}

//-->

</script>

</head>

<body>

<form name=”myForm”>

<input type=”button” value=”start” onclick=”init()”>

</form>

<div id=”objA” name=”objA” style=”position:absolute;top:0px;left:0px”>○</div>

<div id=”objC” name=”objC” style=”position:absolute;top:0px;left:0px”>タイトル</div>

<div id=”objE” name=”objE” style=”position:absolute;top:0px;left:0px”>○

大</div>

</body>

</html>

id:ysht

有難うございます、ちょっと試してみます。

2004/05/08 17:19:16
id:tarohbin No.3

tarohbin回答回数108ベストアンサー獲得回数02004/05/08 15:39:34

ポイント30pt

そんな動的なサイトは知りません。(ごめんなさい)が、理論では出来るはずです。

私の持つ技術では、かなり難しく考えてしまいします。問題は、画面のはじから中央までの線の角度で、下手すると人物オブジェクトの出現場所と降ってくるオブジェクトの出現場所が画面はじでなくなる事です。

CGIを使用したりジャバスクリプトなどで環境変数をとり画面の大きさ(スクリーンサイズ)を計って

マクロメディアのフラッシュなどを使えばある程度の事が、出来ると思います。

この時、画面の大きさによりプログラムを替えた物を呼び出す必要があるかも知れません。

ちなみに、私のサイトでとっているログ(10000件あたり)

1024×480-0.07%

1056×792-0.07%

1152×768-0.07%

1152×900-0.07%

1280×800-0.07%

1280×854-0.07%

1680×1050-0.07%

640×480-0.07%

800×512-0.07%

1440×900-0.47%

1152×870-0.70%

1280×960-0.70%

1600×1200-1.09%

1152×864-1.49%

1400×1050-1.49%

800×600-4.78%

1280×768-5.49%

1280×1024-12.55%

1024×768-70.48%

約20パターンあると思います。

がんばってください。

id:ysht

やはりそうですか。

素直にウィンドウをリサイズしてその枠で動かした方が件名なのかもしれませんね。

> 問題は、画面のはじから中央までの線の角度で、

2004/05/08 17:34:34
id:MITO No.4

MITO回答回数1ベストアンサー獲得回数02004/05/08 22:50:50

ポイント10pt

そこまで動かしたいのならFLASHアニメを挿入してみてはどうでしょう?

すみません、自分に言えるのはこれくらいです。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません