流れるメモライン
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();
});