ムード漂わせるサイトを作りたいです。
スイッチのオン・オフ以外にも明るさを調整できるライトのような背景色で
ウェブにもこういったスイッチ効果を表現できないかと考えていています。
下記のコードのように、画像をクリックすると、
ウェブサイトの背景の色がデフォルトの白から黒め影に映るに変わり、
昼から夜に移行する自然現象のようなグラジュエーション効果を実現したいです。。
■ コメントへの回答:作業状況 ■
(問題提議)
1. コメントが全角である <!-----画像が表示されるーーーー>
2. myAudio のidがついた要素がない
3. htmlではidが指定、cssではクラス指定 "."
(修正後)
1. 全角か<!-----画像が表示される---->
2. <audio>ラインを追加
3. CSSのクラス指定を"#" に変更
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<html> <head> <script src="audiojs/audio.min.js"></script> <script> audiojs.events.ready(function() { audiojs.createAll(); }); </script> </head> <body> <div id="one"> <p id="kaisetu" style="font-family:’Helvetica Bold’,游明朝,'Yu Mincho'; text-align:center;"> パーカッション式の短銃をカジノの裏口で拾ったが <br>誰の所有者なのかわからい。 <br>人間の拳程度の大きさでポケットにも入る。 <br>しかし、護身拳銃にぴったりだ。</p> . . . <br>ん?"フィラデルフィアデリンジャー・・・" <br> (銃の表面に書かれた画像をタップする) </div> <!-----画像が表示される----> <div style="display:none;"> <audio id="myAudio" src="audio/Lincolnassociation.mp3" preload="auto"></div> <a onclick="togglePlay()"><img id="mypic" src="images/button.jpg" name="s" onclick="disp()" alt="philadelphiaderringer" ></a> <!---- こちらは画像をクリックすると音楽が鳴る仕様になっているので、 Toggle Playがついています。またjavascriptを使用し、画像が別の画像に変わるように onclick="disp(0)"も使用しています-----> <script> var pics_src = new Array("images/button.jpg","images/buttonred.jpg"); var num = 0; function disp(){ if (num == 1) { num = 0; } else { num ++; } document.getElementById("mypic").src=pics_src[num]; } </script> <script type="text/javascript"> var myAudio = document.getElementById("myAudio"); var isPlaying = false; function togglePlay() { if (isPlaying) { myAudio.pause() } else { myAudio.play(); } }; myAudio.onplaying = function() { isPlaying = true; }; myAudio.onpause = function() { isPlaying = false; }; </script> </body> </html>
ユーザーが画像をタップすると、
上記に文章のフォントが白に変わり、同時にサイトの背景色が
だんだんと徐々に黒くなるような表現をしたいです
CSSの transtion機能を使い、クリックと同時に変更できないか、
下記のようなコードを試していますが、反応がありません・・・。
#mypic { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #div one:disp() { background-color #ffc9d7; } #div kaisetu{ font-color: FFF; }
長文となり失礼しました。
ご検討いただけますでしょうか・・・、何卒よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー