Flashを使わず動きのあるかっこいいトップページを作成したい

解決済

質問者：tkwavek
質問日時：2010/02/21 10:11
回答数：5件

自社ホームページのトップページ作成を任されているのですが
かっこいいトップページになりません。
Flashを使わずにjavascriptで以下の様なトップページ作成を試みています。
http://www.kagetu.com/
今の所、jquery.cross-slide.jsのajax?を使って画面がスライドするページは
できたのですが、スライドが止まって文字が浮かび上がってまた別の画像が
スライドするといったような複雑な動きができません。
どなたかここで掲載したようなホームページをjavascriptとかを使って
（Flashを使わず無料のツールで）作成する
方法をご存知の方いらっしゃいましたらご教授ください。
※コードも載せていただけると助かります。

通報する

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

質問の本文を隠す

回答 (5件)

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

No.1ベストアンサー

回答者： babu_baboo
回答日時：2010/02/21 13:19

こんなのはどう？ぜんかくくうはくは、はんかくに。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<title></title>

<body>
<h1>有名どこのライブラリ、俺は使えない ;_;</h1>
<script type="text/javascript">
//@cc_on

var mess = [
　'きっとこれは、ごみにかぎりなくちかいもの。',
　'だったら書くなよ！とじぶんでつっこむ！',
　'そこはそれ、まぁまぁということで・・・。',
　'きっと、あとから、じつはこうしたいのだけど、どうすればいいのでしょう？',
　'そういうひと、おおいよね～',
　'でも、おうようできないのなら、',
　'かねはらって、はじめから、いらいしたほうが、いいよね～',
　'しかも、お礼も言わず、放置プレーするひと多いよね～',
　'するのは、良いとして、されるのはいやだ！',
　'そして、それってけっこうむかつく by babu.',
　'これは、かんすうを、らべるのようにつかってみる実験。',
　'そうそう！これでかっこよくなるの？'
];

var Messenger = function ( mess, fadein_t, disp_t, fadeout_t, hide_t, cssText ) {
　var m = 0;
　var t = document.createTextNode( mess[ m ] );
　var e = document.createElement( 'p' );
　var o = 0;
　var s = 2;
　
　var fi = fadein_t / 100 / s;
　var fo = fadeout_t / 100 / s;
　
　e.appendChild( t );
　e.style.cssText = cssText;
　document.body.appendChild( e );

　function setAlpha ( ) {
　　var f = true;
　　if( 0 > o ) f = false, o = 0;
　　if( 100 < o ) f = false, o = 100;
　　e.style./*@if (@_jscript) filter = 'alpha(opacity='+ o + ')' @else@*/ opacity = o / 100 /*@end@*/;
　　return f;
　}
　
　function chgMess ( ) {
　　t.nodeValue = mess[ m = ++m % mess.length ];
　}
　
　function fadein ( ) {
　　setAlpha( o += s ) ? setTimeout( arguments.callee, fi ): setTimeout( fadeout, disp_t );
　}
　
　function fadeout ( ) {
　　setAlpha( o -= s ) ? setTimeout( arguments.callee, fo ): chgMess() || setTimeout( fadein, hide_t );
　}
　
　fadein();
};

new Messenger( mess, 1000, 1000, 1000, 1000, 'position:absolute; top:100px; left:200px; color: green;' );
new Messenger( mess, 500, 500, 500, 2000, 'position:absolute; top:150px; left:150px; color: red; font-size:150%' );

</script>

- 0
- 件

通報する

No.5

回答者： taloo
回答日時：2010/02/22 07:52

IE5.5を考慮するなら、その頃に使われていたNetscapeって、try-catchは実装されてましたっけ？

4.7が未実装ですが、
いつ実装されたのか知らないので、実装済みでしたら無視して下さい。
今時4.7なんて、とか、opacity未対応ブラウザで動かなくても問題はないと思いますが。

チャチャ入れすみません。

- 0
- 件

通報する

No.4

回答者： babu_baboo
回答日時：2010/02/21 21:30

追記。

fadein();
を
try { fadein(); } catch ( err ) { ; }
に。

あと「IE5.5 の注意事項を入れるのなら、Safari 1.x は名前付きの関数式をパースできないことも言わねばならない」
だそうなので、自分も含め必要な方は、お勉強。

- 0
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2010/02/21 21:06

ご指摘ありがとうございます

いつも書き出し始める雛形が上書きされてました。反省。

せめて書き出しを以下に修正。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

＞IE5.5 では ActiveX 無効時に・・・・
過去にTAG indexでも指摘されたのですが、ここでそこまで書くべきなのか悩みます。

- 0
- 件

通報する

No.2

回答者： Chaire
回答日時：2010/02/21 20:46

No.1

XHTML はタグ省略できません。千歩譲って外部解析対象実体だとしても、script 要素内に「<」があるため整形式違反。ちょっと酷いです。

なお、IE5.5 では ActiveX 無効時に filter にアクセスするとポップアップ警告がしつこいので try...catch すべきなのですが、今では忘れられた項目でしょうか（類似現象を利用して ActiveX 判別も可能）。条件コンパイルを使うなら try...catch を IE4 から隠すことも可能なはずです。