【javascript,jQuery】ニコ動みたいなテキストが右から左に流れる機能を作った時の備忘録

なんかニコニコ動画みたいにテキストが右から左に流れる機能面白いかもって思って作ってみた

ランダムに配置したテキストを右から左に流す方法

右から左に流すときにjavascriptよりcssの方が処理の都合上綺麗に流れるみたいだったので右から左に流すのはcssのアニメーションでやって、y軸にランダムにテキストを配置するのはjavascriptで用意してみた

htmlとcssのソース

右から左に流す処理はcss

<style>
.container{
  border: solid 1px black;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 50%;

}
 .container p {
  left: 100%;
  margin:0;
  display:inline-block; 
  white-space:nowrap;
  animation-name:marquee; /*アニメーションのクラス名*/
  animation-timing-function:linear;/*アニメーションのタイミング・進行割合の指定*/
  animation-duration:10s; /*アニメーションの速度*/
  animation-iteration-count:infinite;/*アニメーションの動作回数*/
  position:absolute;
  display: inline-block;
}
.container p:hover{
    animation-play-state: paused;
}
@keyframes marquee {
  from   { left: 100%;} 
  99%,to { left: -100%;}
}
</style>

<div class="container"></div>

知らなかったんだけど、アニメーションってanimation-play-state: paused;で止めることができるみたいね
せっかくだし、ホバーしたら止まるようにしてみた

また、参考にした記事のアニメーションをちょっと弄ってる
流れるテキストをleft: 100%;で枠外に表示しているけど、padding-left: 100%;の方がもしかしたらいいのかも
で、アニメーションの方もleftじゃなくてtranslateの方が良いかも

作ったけどもったいないから残しているだけなので作りに関しては雑いと思う
使うなら手を少し入れた方が良いと思う

ランダムで配置しているからデモでテキストリンクが被ったりするけど、それは以前やったランダム配置で極力被らないようにする備忘録を参考にすれば良さそう

javascriptコード

y軸にランダムにテキストを配置するのはjavascriptと一部jQuery

// 流れるテキスト追加　ここから

const randRange = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);//ランダム関数
let html = '';
let container = $('.container');
for(let i = 0; i < 15; i++) {
  html += '<p style="animation-duration:'+ randRange(8,15) +'s;animation-delay:'+ randRange(1,10) +'s;">'
    + '<a href="#">テストテキスト0'+i+'(2020/01/01)</a>'
    + '</p>';
}
container.append(html);//流れるテキスト挿入

// 流れるテキスト追加　ここまで

// 流れるテキストをランダム配置　ここから

let item = container.find('p');
let cont_h = container.height();//コンテンツ高さ取得

item.each(function(index) {
  $(this).css({
    top: randRange(0,cont_h),
    'font-size': randRange(15,25) + 'px',
  });
});

// 流れるテキストをランダム配置　ここまで

流れるテキストを追加するのと、そのテキストをランダムに配置する処理は分けてる(テキスト先に用意しないとランダム配置できないから)

メモ：部分的にjQueryを使ってる理由

全部javascriptでやろうとして親要素の末尾に要素を追加をするappendChild()ってのを使ったら以下のエラーが出た

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

調べたら、javascriptとjQueryの要素の追加方法ってかなり異なるみたいね
jQueryだったら、

$('.container').append(html);

って一行で追加が可能なんだけどjavascriptで追加をしようとすると
何行も書かないといけないみたい

NodeListとかHTMLCollectionとかを少し勉強する必要性がありそうなので、今回はスルー