- ベストアンサー
黒背景で白文字をフェードインするHTMLソースの作り方
- 黒背景で白文字をフェードインするHTMLソースの作り方をご紹介します。
- リンク挿入文字もフェードイン対応させる方法も解説します。
- SEOを意識したタグやハッシュタグの活用方法もお伝えします。
- aoyan037
- お礼率25% (1/4)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＃１だ。ていせいだべぇ。 すくりぷとむこうのとぎも、やっぱりけぇておけばいがった。はんせいだぁ～。 color:#0 もよぉ～、まずかった。あどがらきづいだぁ。すまねぇ。 <!DOCTYPE html> <title></title> <style type="text/css"> a { font-size: 2em; } </style> <script> document.write ( '<style type="text/css">\n a.fade { background-color: #000; color:#000; }\n</style>' ); </script> <body> <ol> <li><a href="#">abc</a> <li><a href="#" class="fade">def</a> <li><a href="#">ghi</a> <li><a href="#" class="fade">jkl</a> </ol> <script> //@cc_on var fadeIn = (function (addRule) { return function (styleSheet, selector, interval) { var color = 0; var count = 15; var loop = function () { var colorStr = 'color:#' + (color ? color.toString (16): '000'); addRule.call (styleSheet, selector, colorStr); count-- && setTimeout (arguments.callee, interval); color += 0x111; }; loop (); }; })(function ( selector, property ) { /*@if (@_jscript) this.addRule (selector, property); @else@*/ this.insertRule (selector + '{' + property + '}', 'undefined' == typeof this.cssRules ? 0: this.cssRules.length); /*@end@*/ }); fadeIn (document.styleSheets[1], 'a.fade', 100); </script> すくりぷとでかいた、すたいるしーとは、２ばんめなので document.styleSheets[1] だぁ。まぢげぇねぇようになぁ。
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
#1様のおっしゃる、「おぱしてぃ～」を利用した操作のほうが、文字の色が何色でも良いし画像があっても同様にフェードインできるし便利ではなかろうか？ ちょっとずるをして、ライブラリを使うともっと簡単。 （画像は投稿が面倒なので、入れてないし、背景も関係ないので白のままですが…） 下の例ではクラス指定がfadeのものだけフェードインするようにしています。（jqueryを使用） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function() { $(".fade").hide().fadeIn(4000); }); //--> </script> </head> <body> <p>なんたらかんたら</p> <span class="fade" style="color:#f00;"> フェードインする<a href="#">ここがリンク</a> </span> <p>あ～だ、こ～だ</p> <div class="fade" style="width:300px; color:#0ff; background-color:#ffd;"> 画像とかでもそのままフェードイン <div style="width:150px; height:100px; color:#0d0; background-color:#fdd; margin:50px;"> 何でも良いんだよね </div> </div> <p>むにゃ、むにゃ、むにゃ…</p> </body> </html>
- yyr446
- ベストアンサー率65% (870/1330)
document.bgColor document.fgColor document.linkColor document.vlinkColor document.alinkColor リンクのカラーに相当するdocument.bgColor は、document.linkColorだけど、そもそも document.bgColor document.fgColor document.linkColor document.vlinkColor document.alinkColor は、ブラウザーに極度の依存し、しかもReadOnly だったような...。もう廃止されるのでは... そこで、↓のようにかなり書き換えました。 <body onload="fadein(0);" style="background-color:#000000;color:#ffffff;"> にして function fadein(i) { var count=i; console.log(i); var f3 = "0123456789abcdef"; if ( count < 16 ) { c = f3.charAt(i); var colorstr = c + c + c + c + c + c; document.body.style.color= "#" + colorstr; var link=document.getElementsByTagName("a"); for(var c=0;c<link.length;c++){ link[c].style.color = "#"+colorstr; } count++; var timer = setTimeout(function(){fadein(count);},100); } else clearTimeout(timer); } です。（半角空白は全角空白にして下さい）。 ※timerの後始末もした方がよかろうとclearTimeoutもしてます。 ※今回は、timer=setTimeout("fadein(count)",100);はだめ。 var timer = setTimeout((function(sore){ return function(){fadein(sore);}; })(count),100); ならよいけど...無駄な....
- babu_baboo
- ベストアンサー率51% (268/525)
きっとだれかが、あんかーをあつめてきて、それぞれにおぱしてぃ～でもへんかさせるやつを かくだろうとおもい、ちがうやつで、せめてみた。 へんかするのがくろからしろだけなのでかなりださいね。すみません。 こしがいたくて・・・。 ぜんかくくうはくははんかくにしてね。 <!DOCTYPE html> <title></title> <style type="text/css"> a.fade { background-color: #000; color:#000; } </style> <body> <ol> <li><a href="#">abc</a> <li><a href="#" class="fade">def</a> <li><a href="#">ghi</a> <li><a href="#" class="fade">jkl</a> </ol> <script> //@cc_on var fadeIn = (function (addRule) { return function (styleSheet, selector, interval) { var color = 0; var count = 15; var loop = function () { addRule.call (styleSheet, selector, 'color:#' + color.toString (16)); count-- && setTimeout (arguments.callee, interval); color += 0x111; }; loop (); }; })(function ( selector, property ) { /*@if (@_jscript) this.addRule (selector, property); @else@*/ this.insertRule (selector + '{' + property + '}', 'undefined' == typeof this.cssRules ? 0: this.cssRules.length); /*@end@*/ }); fadeIn (document.styleSheets[0], 'a.fade', 100); </script>
お礼
希望のソースだけでなく、私の提示したタグが旧式のものという知識など、すべての回答がとても参考になりました！ 今回は使用させていただいたものをベストアンサーとさせていただきました。 ご回答、本当にありがとうございました。