月: 2020年9月

こんにちはらいどらです。

今回は別プロジェクトという別世界線の問題…..まあ関係ないやろ。

普通にどのサービスでもある、「例ボックス内にあるテキストが入りきらなかった場合に自動スクロールする」…..というやつをJSでやろう。

……やれ。

という訳で始めていきます。

スクロール(CSS)

まずは基本的なスクロールの方法から。

こちらは例によってgの検索上位が分かりやすいので、貼り付けでOK。やっぱりCSSアニメーションでやるみたいですね。らくらく。

文字スクロールのCSS

アニメーションはテキスト入ってるボックス(div)にかけると動かなかったので、<div>の中に<span>を作っといた方が良いかもです。

HTML

<div class="scrollbox">
  <span class="scrolltype">なになにのもの</span>
</div>
<div class="scrollbox">
  <span class="scrolltype">これこれのもの</span>
</div>
<div class="scrollbox">
  <span class="scrolltype">それぞれのもの</span>
</div>
<div class="scrollbox">
  <span class="scrolltype">ころころなもの</span>
</div>

CSS

.scrollbox{
    width: 200px;
    height: 50px;
    padding: 10px 30px; 
    border: solid 1px gray;
    white-space: nowrap;
    overflow: hidden;
}

.scrollbox span.scrolltype{
    display: inline-block;
    animation: wordscroll 3s infinite linear;
    animation-delay: 2s;
}
@keyframes wordscroll {
    0%{transform: translateX(0);}
    15%{transform: translateX(0);}
    100%{transform: translateX(-110%);}
}

動き変えたければ@keyframesいじるだけですね。

ただ、このままだと長い文だけでなく短い文も全て動いてしまいます。雲か。静的ならどうにでもなりますが。

今回はこれをJavaScriptを使って何とかしていきます。

長い文だけ(JavaScript)

JS

let scro = document.getElementsByClassName("scrollbox");
for(let i=0;i<scro.length;i++){
    let scrotext = scro[i].getElementsByTagName("span");
    if(scrotext[0].innerText.length>6){
        scrotext[0].classList.add("scrolltype");
        console.log("scrolladd!!");
    }else{
        console.log("Noif!!");
    }
}

時折動作確認にconsole.logが混ざっておりますが、いらないので取って大丈夫です。

長い文だけ<span>にscrolltypeクラスを付けるようにしました。[0]とか[i]があるのはHTMLCollectionの調整ですね。詳細は前記事へ。

今回の肝は取得した<span>タグをlengthで文字数取得することでした。これでだいぶエラー出て悩みましたが、innerTextにしてからやったらundefinedが消えました。Nandefind。

以上。