流れるメモライン

https://gyazo.com/f731baeea9ed3313998cf2770426e6ad

note2024.mdというファイルの中身が表示され、それが自動的にスクロールするようになっている。

code:script.js

// アニメーションループ

function animationLoop() {

const ulElement = document.getElementById('memo-timeline-body');

if(ulElement){

//console.log("call")

}else{

console.log("stop")

//画面からスクロール対象が消えていたら停止

return;

}

//ホバーしたら停止

if (ulElement.isHovered) {

return;

}

scrollTop -= (0.4 + Math.random() * 0.05) ;

// スクロール位置を適用

ulElement.scrollTop = scrollTop;

// 一番上まで

if (scrollTop < 1) {

console.log("hit")

scrollTop = ulElement.scrollHeight;

console.log(scrollTop)

}

// 次のフレームでアニメーションループを呼び出す

let rwAnimeF = requestAnimationFrame(animationLoop);

}

// マウスホバーイベント

ulElement.addEventListener('mouseenter', () => {

ulElement.isHovered = true;

});

ulElement.addEventListener('mouseleave', () => {

ulElement.isHovered = false;

animationLoop();

});