QA@IT

おみくじの結果に表示される"文字マウスストーカー"の初期状態(リセット)時のみに、CSSの効果(*点滅)を反映させるには

2845 PV

下記のソースコードは、おみくじの結果を"文字マウスストーカー"で表示させるものです。
これを、初期の状態(リセット)時の"文字マウスストーカー"のみにCSSの効果(点滅)を反映させたいのですが、
"大吉~小吉"を含めてすべてに反映されてしまいます。"大吉~小吉"までの色は設定されている通りのままで
(*"function output(e){}"に設定されています)、どの箇所を,どのように書き換えれば、"文字マウス
ストーカー"の初期状態(リセット)時のみに、CSSの効果(*点滅)を反映させられるのでしょうか。
また、1文字ずつ文字に色を設定できる方法がありましたら、ご教示ください。よろしくお願いします。

*"文字マウスストーカー"とは、マウポインタの動きに文字が付いて回る,手法です。

(ソースコード)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
 <HEAD>
 <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <meta http-equiv="Content-Style-Type" content="text/css">

 <TITLE>おみくじ</TITLE> 


 <STYLE type="text/css"> 
 <!--

 #omikujiButton{background:maroon; color:gold; font-weight:bold;}

 #myText {
           font-style: italic;
           font-weight: bold;
           font-family: 'comic sans ms', verdana, arial;
           position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;
         -webkit-animation:myText 1s ease-in-out infinite alternate; 
         -moz-animation:myText 1s ease-in-out infinite alternate; 
          animation:myText 1s ease-in-out infinite alternate; 
} 
@-webkit-keyframes myText{ 
    0%, 9.9% {opacity:0;}
    10%,19.9% {opacity:1; color:tan;} 
    20%, 29.9 {opacity:1; color:yellow;} 
    30%, 39.9 {opacity:1; color:orange;} 
    40%, 100% {opacity:1;color:red;}
} 
@-moz-keyframes myText{ 
    0%, 9.9% {opacity:0;}
    10%,19.9% {opacity:1; color:tan;} 
    20%, 29.9 {opacity:1; color:yellow;} 
    30%, 39.9 {opacity:1; color:orange;} 
    40%, 100% {opacity:1;color:red;}
} 
@keyframes myText{ 
    0%, 9.9% {opacity:0;}
    10%,19.9% {opacity:1; color:tan;} 
    20%, 29.9 {opacity:1; color:yellow;} 
    30%, 39.9 {opacity:1; color:orange;} 
    40%, 100% {opacity:1;color:red;}
}

 #myText div {position: relative;}
 #myText div div {position: absolute;top: 0;left: 0;text-align: center;}
 //-->
 </STYLE>



 <SCRIPT type="text/javascript">
 <!--
var size = 30;

 function output(e){
 var selectedIndex = e.selectedIndex;
 document.getElementById("myText").style.fontSize=e[selectedIndex ].value;
 document.getElementById("mess").style.background=e[selectedIndex ].style.backgroundColor;

 document.getElementById("omikujiButton").disabled=false;
 document.getElementById("myText").style.fontSize="30";

 if(selectedIndex==0){

 document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="40";
 document.getElementById("myText").style.color="white";
 }
 else if(selectedIndex==1){

 document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="30";
 document.getElementById("myText").style.color="white";
 }
 else if(selectedIndex==2){

 document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="20";
 document.getElementById("myText").style.color="white";
 }
 else if(selectedIndex==3){

 document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="40";
 document.getElementById("myText").style.color="silver";
 }
 else if(selectedIndex==4){

 document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="30";
 document.getElementById("myText").style.color="silver";
 }
 else if(selectedIndex==5){

 document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="20";
 document.getElementById("myText").style.color="silver";
 }
 }

function message(opt) {
    var t = opt.options[opt.selectedIndex].value;
    for(var i = 0; i < t.length; i++) {
        document.getElementById('iemsg' + i).innerHTML = t.charAt(i);
    }
}

;(function(){

 var msg = "お~ほほほほほほほほ♪♪♪ド~~ン!!!☆★☆★☆★。。。。。。";
 var circleY = 0.75; 
 var circleX = 2;
 var letter_spacing = 5;
 var diameter = 10;
 var rotation = 0.4;
 var speed = 0.3;

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

 msg = msg.split('');
 var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
 ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
 o = document.createElement('div'), oi = document.createElement('div'),
 b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

 mouse = function(e){
 e = e || window.event;
 ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; 
 xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; 
 },

 makecircle = function(){
 if(init.nopy){
 o.style.top = (b || document.body).scrollTop + 'px';
 o.style.left = (b || document.body).scrollLeft + 'px';
 };
 currStep -= rotation;
 for (var d, i = n; i > -1; --i){
 d = document.getElementById('iemsg' + i).style;
 d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
 d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
 };
 },

 drag = function(){
 y[0] = Y[0] += (ymouse - Y[0]) * speed;
 x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
 for (var i = n; i > 0; --i){
 y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
 x[i] = X[i] += (x[i-1] - X[i]) * speed;
 };
 makecircle();
 },

 init = function(){
 if(!isNaN(window.pageYOffset)){
 ymouse += window.pageYOffset;
 xmouse += window.pageXOffset;
 } else init.nopy = true;
 for (var d, i = n; i > -1; --i){
 d = document.createElement('div'); d.id = 'iemsg' + i;
 d.style.height = d.style.width = a + 'px';
 d.appendChild(document.createTextNode(msg[i]));
 oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
 };
 o.appendChild(oi); document.body.appendChild(o);
 setInterval(drag, 25);
 },

 ascroll = function(){
 ymouse += window.pageYOffset;
 xmouse += window.pageXOffset;
 window.removeEventListener('scroll', ascroll, false);
 };

 o.id = 'myText'; o.style.fontSize = size + 'px';

 if (window.addEventListener){
 window.addEventListener('load', init, false);
 document.addEventListener('mouseover', mouse, false);
 document.addEventListener('mousemove', mouse, false);
 if (/Apple/.test(navigator.vendor))
 window.addEventListener('scroll', ascroll, false);
 }
 else if (window.attachEvent){
 window.attachEvent('onload', init);
 document.attachEvent('onmousemove', mouse);
 };
})();

 // -->
 </SCRIPT>

 <SCRIPT type="text/javascript">
 <!--
function omikuji() {
 rand = Math.floor(Math.random()*6);
 if (rand == 0) document.getElementById('mess').value="大吉!+今年は、あなた様は↑↑昇り竜↑↑ですよ☆★☆★。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));
 if (rand == 1) document.getElementById('mess').value="中吉!+今年は、何か幸運が1つもたらされます☆★☆★。。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));
 if (rand == 2) document.getElementById('mess').value="小吉!+今年は、何もないけど満足に過ごせます☆★☆★。。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));
 if (rand == 3) document.getElementById('mess').value="大凶!-今年は、あなた様は↓↓下り竜↓↓ですよ☆★☆★。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));
 if (rand == 4) document.getElementById('mess').value="中凶!-今年は、何か不運が1つもたらされます☆★☆★。。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));
 if (rand == 5) document.getElementById('mess').value="小凶!-今年は、何もないけど不満で過ごします☆★☆★。。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));
 }

 // -->
 </SCRIPT>

 </head>

 <BODY bgcolor="black" text="white" topmargin="30" scroll="no" >


 <div style="text-align:CENTER;">
<input type="button" id="omikujiButton" value="おみくじ" onClick="omikuji(); disabled = true;">
 <br><br>
 <select id="mess" style="background-color:olive; color:black; font-weight:bold;" onchange="message(this); output(this);">
  <option style="background-color:white;" value="大吉!+今年は、あなた様は↑↑昇り竜↑↑ですよ☆★☆★。。。。。"> ☆☆☆大吉☆☆☆</option>
  <option style="background-color:white;" value="中吉!+今年は、何か幸運が1つもたらされます☆★☆★。。。。。。">  ☆☆中吉☆☆ </option>
  <option style="background-color:white;" value="小吉!+今年は、何もないけど満足に過ごせます☆★☆★。。。。。。">   ☆小吉☆  </option>
  <option style="background-color:grey;" value="大凶!-今年は、あなた様は↓↓下り竜↓↓ですよ☆★☆★。。。。。"> ★★★大凶★★★</option>
  <option style="background-color:grey;" value="中凶!-今年は、何か不運が1つもたらされます☆★☆★。。。。。。">  ★★中凶★★ </option>
  <option style="background-color:grey;" value="小凶!-今年は、何もないけど不満で過ごします☆★☆★。。。。。。">   ★小凶★  </option>
  <option style="background-color:olive; font-weight:bold" value="お〜ほほほほほほほほ♪♪♪ド〜〜ン!!!☆★☆★☆★。。。。。。" selected>今年の運勢(リセット)</option>
 </select> 
 </div>
 </BODY>
 </HTML>

回答

質問にあたって運勢(大吉~大凶)が6個全部ある必要はなかったと思います。
読みにくいので削れるなら削って質問してほしかったです。
他人に見せるのであればインデントやコメントも付けて欲しいですね。

どの箇所で

output 関数で

どのようにすれば

リセット以外が選ばれていた時は myTextエレメント に対して すべての animationDuration スタイルを 0にすれば抑制できます。
リセットが選ばれた時は animationDurationに元の値を設定してあげてください。


関係ないですが omikuji関数のif文の使い方が間違っています。これだとmessageとoutputが6個ともすべて呼ばれてしまいます。
if文の構文を見直したほうが良いでしょう。

あとその"マウス文字ストーカー"のdivに邪魔されてクリックしにくかったです。

編集 履歴 (0)
  • ヒントをありがとうございました。知識不足のために、試行錯誤しました。確かに、運勢が6個も必要ないですし、インデントもあった方が見やすいですね。気をつけておきます。
    -

回答から試行錯誤して、うまくいきました。

function output(e){}を次のようにすれば、いいようです。

 function output(e){
 var selectedIndex = e.selectedIndex;
 document.getElementById("myText").style.fontSize=e[selectedIndex ].value;
 document.getElementById("mess").style.background=e[selectedIndex ].style.backgroundColor;

 document.getElementById("omikujiButton").disabled=false;
 document.getElementById("myText").style.fontSize="30";
 document.getElementById("myText").style.animation="";

  if(selectedIndex==0){
document.getElementById("myText").style.animation=0;
 document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="40";
 document.getElementById("myText").style.color="white";
 }
 else if(selectedIndex==1){

document.getElementById("myText").style.animation=0;
 document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="30";
 document.getElementById("myText").style.color="white";
 }
 else if(selectedIndex==2){

document.getElementById("myText").style.animation=0;
 document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="20";
 document.getElementById("myText").style.color="white";
 }
 else if(selectedIndex==3){

document.getElementById("myText").style.animation=0;
 document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="40";
 document.getElementById("myText").style.color="silver";
 }
 else if(selectedIndex==4){

document.getElementById("myText").style.animation=0;
 document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="30";
 document.getElementById("myText").style.color="silver";
 }
 else if(selectedIndex==5){

document.getElementById("myText").style.animation=0;
document.getElementById("omikujiButton").disabled=true;
 document.getElementById("myText").style.fontSize="20";
 document.getElementById("myText").style.color="silver";
 }
 }

『document.getElementById("myText").style.animation="";』と『document.getElementById("myText").style.animation=0;』を加えればいいようです。
他に何か回答がありましたら、ご教示ください。

また、指摘されていたfunction omikuji(){}の中を、次のように修正しました。

function omikuji() {
 rand = Math.floor(Math.random()*6);
                     document.getElementById('mess').value="お〜ほほほほほほほほ♪♪♪ド〜〜ン!!!☆★☆★☆★。。。。。。" ; message(document.getElementById('mess'));
                       output(document.getElementById('mess'));
     if (rand == 0) {document.getElementById('mess').value="大吉!+今年は、あなた様は↑↑昇り竜↑↑ですよ☆★☆★。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));}
else if (rand == 1) {document.getElementById('mess').value="中吉!+今年は、何か幸運が1つもたらされます☆★☆★。。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));}
else if (rand == 2) {document.getElementById('mess').value="小吉!+今年は、何もないけど満足に過ごせます☆★☆★。。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));}
else if (rand == 3) {document.getElementById('mess').value="大凶!-今年は、あなた様は↓↓下り竜↓↓ですよ☆★☆★。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));}
else if (rand == 4) {document.getElementById('mess').value="中凶!-今年は、何か不運が1つもたらされます☆★☆★。。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));}
else if(rand == 5) {document.getElementById('mess').value="小凶!-今年は、何もないけど不満で過ごします☆★☆★。。。。。。"; message(document.getElementById('mess'));
            output(document.getElementById('mess'));}
 }

ボタンが機能しにくいですが、マウスポインタを動かして文字列が延びている隙に押せばいいですが、
イライラしますね。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。