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

2010/02/21 10:11

このQ&Aのポイント

自社ホームページのトップページ作成を任されているが、かっこいいトップページにならない。
フラッシュを使用せずにJavaScriptを使ってトップページを作成しようとしているが、複雑な動きができない。
JavaScriptや無料のツールを使用して、掲載されているようなトップページを作成する方法を知っている方はいらっしゃるか。

tkwavek
お礼率11% (103/930)

JavaScript
回答数5
ありがとう数3

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2010/02/21 13:19 回答No.1

こんなのはどう？ぜんかくくうはくは、はんかくに。 <!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>

その他の回答 (4)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2010/02/22 07:52 回答No.5

IE5.5を考慮するなら、その頃に使われていたNetscapeって、try-catchは実装されてましたっけ？ 4.7が未実装ですが、いつ実装されたのか知らないので、実装済みでしたら無視して下さい。今時4.7なんて、とか、opacity未対応ブラウザで動かなくても問題はないと思いますが。チャチャ入れすみません。

babu_baboo
ベストアンサー率51% (268/525)

2010/02/21 21:30 回答No.4

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

babu_baboo
ベストアンサー率51% (268/525)

2010/02/21 21:06 回答No.3

ご指摘ありがとうございますいつも書き出し始める雛形が上書きされてました。反省。せめて書き出しを以下に修正。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> ＞IE5.5 では ActiveX 無効時に・・・・過去にTAG indexでも指摘されたのですが、ここでそこまで書くべきなのか悩みます。

Chaire
ベストアンサー率60% (79/130)

2010/02/21 20:46 回答No.2

No.1 XHTML はタグ省略できません。千歩譲って外部解析対象実体だとしても、script 要素内に「<」があるため整形式違反。ちょっと酷いです。なお、IE5.5 では ActiveX 無効時に filter にアクセスするとポップアップ警告がしつこいので try...catch すべきなのですが、今では忘れられた項目でしょうか（類似現象を利用して ActiveX 判別も可能）。条件コンパイルを使うなら try...catch を IE4 から隠すことも可能なはずです。