.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%;}
}
jQuery(function($){
// 流れるテキスト追加 ここから
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 += ''
+ 'テストテキスト0'+i+'(2020/01/01)'
+ '
';
}
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',
});
});
// 流れるテキストをランダム配置 ここまで
});
【javascript,jQuery】ニコ動みたいなテキストが右から左に流れる機能を作った時の備忘録
2020/08/14