-2

下記のソースコードは、marqueeのいくつかの機能をボタンでコントロールさせることを、
CSSとJavascriptで代替させたものです。描写は、ヘビの左右の動きと,移動速度を調節
させるだけのシンプルなものです。これに、"舌を上下にちょろちょろさせる"動きと、
"尻尾(*ここでは、音符記号)を上下にパタパタさせる"動きを加える場合、どのように
ソースコードを書き加えればいいのでしょうか。ご教示ください。

<!DOCTYPE html>
<html>
<head>
  <style>
.option{color:red;}
  [data-marquee]{ display: inline-block;
  transform: translateX(-100%); }
 .marquee_container { overflow-x: hidden; }

.DIRECTION {
  color: white;
  background: black;
}

.BLINK {
  animation: blink 1s step-end infinite normal;
}
@keyframes blink {
  0% { color: red; }
  50% { color: transparent; }
}
  </style>
</head>


<body>
    <div id="myMarquee" class="marquee_container">
    <div id="hello" data-marquee="left" data-marquee-sec="10">
      <span id="tongue" class="option" style="font-size:10px"> ~</span>>゜~~~~<span id="note" class="option">♪</span>
    </div>
</div>
<p>
<button id="blinkL" class="DIRECTION BLINK" type="button" onClick="hello.dataset.marquee='left'; marquee(hello); marLeft();">
    ←
</button>
       ☆
<select id='marSpeed' name="speedSelector" onchange='marSpeed(this)'>
  <option  value='Faster'>&nbsp;&nbsp;&nbsp;Faster</option>
  <option  value='Normal Speed' selected>&nbsp;&nbsp;&nbsp;(Normal)</option>
  <option  value='Slower'>&nbsp;&nbsp;&nbsp;Slower</option>
  <option  value='Stop'>―STOP―</option>
  <option  value='Reset'>&nbsp;&nbsp;&nbsp;RESET</option>
</select>
       ☆
<button id="blinkR" class="DIRECTION" type="button" onClick="hello.dataset.marquee='right'; marquee(hello); marRight();">
    →
</button>
</p>

    <script type="text/javascript">

function marLeft() {
    document.getElementById("blinkL").classList.add("BLINK");
    document.getElementById("blinkR").classList.remove("BLINK");
}

function marRight() {
    document.getElementById("blinkR").classList.add("BLINK");
    document.getElementById("blinkL").classList.remove("BLINK");
}

function setDefaultSetting(){
    // 左方向に10秒かけて1週する
    hello.dataset.marquee='left';
    hello.dataset.marqueeSec='10';
    // ボタンの点灯
    marLeft();
    // (Normal) を選択した状態にする
    document.getElementById('marSpeed').options[1].selected = true;
    // 元の位置に戻す
    hello.style.transform = "translateX(-100%)";
    hello.style.transition = "transform 0s linear 0s";
}


function marSpeed(opt){
  var selectedIndex = opt.selectedIndex;

    hello.dataset.marqueeSec='10';
        marquee(hello);
      document.getElementById('blinkL').disabled=false;
      document.getElementById('blinkR').disabled=false;
if(selectedIndex==0){
    hello.dataset.marqueeSec='5';
        marquee(hello);
    }
else if(selectedIndex==2){
    hello.dataset.marqueeSec='20'; 
        marquee(hello);
   }
else if(selectedIndex==3){
    document.getElementById('blinkL').disabled=true;
    document.getElementById('blinkR').disabled=true;
        document.getElementById('blinkL').classList.remove("BLINK");
    document.getElementById('blinkR').classList.remove("BLINK");
        hello.dataset.marquee='stop'; 
        marquee(hello);
   }
else if(selectedIndex==4){
        setDefaultSetting();
        marquee(hello);
    }
}

        function marquee(elm_or_event){
    "use strict";
    function current(){
        return getComputedStyle(elm).transform.split(",")[4] || 0;
    }
    function to(px, sec){
        elm.style.transform = "translateX(" + px + "px)";
        elm.style.transition = "transform " + sec + "s linear 0s";
    }
    function scroll(px){
        elm.addEventListener("transitionend", marquee, false);
        to(px, Math.abs((px - current())/right * elm.dataset.marqueeSec));
    }
    var elm = elm_or_event.target || elm_or_event;
    var right = elm.parentElement.getBoundingClientRect().width;
    var left = -elm.getBoundingClientRect().width;

    elm.removeEventListener("transitionend", marquee, false);
    to(current(), 0);

    if(elm.dataset.marquee == "stop"){
        return;
    }
    if(current()+1 >= right){
        to(left, 0);
    }
    else if(current()-1 <= left){
        to(right, 0);
    }
    scroll((elm.dataset.marquee == "left") ? left : right);
}
marquee(hello);
    </script>
</body>
</html>
4
  • 1
    そのマーキー処理の仕組みについて、例えばmarquee関数内で呼び出しているメソッドやCSSプロパティなど、ご自身で調べてみましたか?理屈が分かれば応用も考えることができますし、それをせずに答えを尋ねてばかりでは、ますますそのコードがご自身の手に負えないものになってしまうのではないでしょうか。
    – unarist
    2016年4月2日 11:29
  • marquee関数内にさらにmarquee関数(こちらはeventはなし)を入れ、縦の動きがtranslateYで…結果,妙な動きになりました。marqueeタグでは、成功しているのですが、javascriptでは緻密な計算を要求されていますね。
    – user9359
    2016年4月2日 13:48
  • 1
    質問はシンプルに、一つの事だけにするべきです。自分でトライしたコードを質問に関わる部分だけに絞り、かつ動く形で、しっかり整形して載せる事も大事です。この質問に関していうと、「要素をCSSアニメーションで上下に往復させる方法」ですかね。まず上下運動に成功してから「入れ子」だとかは考えましょう(すぐに分かると思いますが、これは何も考える必要がない事です)。
    – mjy
    2016年4月2日 14:33
  • おっしゃる通りです、ここでは「入れ子」ではなくて、アニメーションを使うのが最善のようです。いいヒントを、いただきました。
    – user9359
    2016年4月2日 23:46

1 件の回答 1

1

大雑把で専門的には問題があると思いますが、"入れ子"ではなくてアニメーションで上下移動はできました。

<!DOCTYPE html>
<html>
<head>
  <style>
.option{color:red;}
@keyframes option {
    0% { transform:translateY(-5px); }
  100% { transform:translateY(  0px); }
}
#tongue {
  animation: option 0.5s ease-in-out infinite alternate;
}
#note {
  animation: option 0.5s ease-in-out infinite alternate;
}

  [data-marquee]{ display: inline-block;
}
 .marquee_container { overflow-x: hidden; }

.DIRECTION {
  color: white;
  background: black;
}

.BLINK {
  animation: blink 1s step-end infinite normal;
}
@keyframes blink {
  0% { color: red; }
  50% { color: transparent; }
}
  </style>
</head>


<body>
    <div id="myMarquee" class="marquee_container">
    <div id="hello" data-marquee="left" data-marquee-sec="10">
      <span id="tongue" class="option" style="font-size:10px;"> ~</span>>゜~~~~<span id="note" class="option" style="font-size:15px;">♪</span>
    </div>
</div>
<p>
<button id="blinkL" class="DIRECTION BLINK" type="button" onClick="hello.dataset.marquee='left'; marquee(hello); marLeft();">
    ←
</button>
       ☆
       ☆
<button id="blinkR" class="DIRECTION" type="button" onClick="hello.dataset.marquee='right'; marquee(hello); marRight();">
    →
</button>
</p>

    <script type="text/javascript">

function marLeft() {
    document.getElementById("blinkL").classList.add("BLINK");
    document.getElementById("blinkR").classList.remove("BLINK");
}

function marRight() {
    document.getElementById("blinkR").classList.add("BLINK");
    document.getElementById("blinkL").classList.remove("BLINK");
}

        function marquee(elm_or_event){
    "use strict";
    function current(){
        return getComputedStyle(elm).transform.split(",")[4] || 0;
    }
    function to(px, sec){
        elm.style.transform = "translateX(" + px + "px)";
        elm.style.transition = "transform " + sec + "s linear 0s";
    }
    function scroll(px){
        elm.addEventListener("transitionend", marquee, false);
        to(px, Math.abs((px - current())/right * elm.dataset.marqueeSec));
    }
    var elm = elm_or_event.target || elm_or_event;
    var right = elm.parentElement.getBoundingClientRect().width;
    var left = -elm.getBoundingClientRect().width;

    elm.removeEventListener("transitionend", marquee, false);
    to(current(), 0);


    if(current()+1 >= right){
        to(left, 0);
    }
    else if(current()-1 <= left){
        to(right, 0);
    }
    scroll((elm.dataset.marquee == "left") ? left : right);
}
marquee(hello);
    </script>
</body>
</html>
2
  • 出来たようでよかったですね。一応気付いた点を2点。1. 動かす要素はblock要素かinline-block要素でなけでばいけません。ですから.optiondisplay: inline-block;を指定する必要があります。2. ascii以外の文字を使っていますし、文字コード指定はあった方がよいでしょう。<meta charset="UTF-8">とかです。
    – mjy
    2016年4月3日 3:09
  • そうでした。この”option”にも、display: inline-block;を指定しなければなりませんでしたね。それに、”~”はunicode形式で保存しなければなりませんね。 本当に、感謝します。
    – user9359
    2016年4月3日 4:07

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。