ウェブサイト水平スクロールアクティブ化されたアニメーション

Question

私は垂直スクロールのためにアニメーションを発生させる方法を知っていますが、水平スクロールのためにどのようにアニメーションを作成しますか？

Answer 1

と同じように、あなたがイベントをスクロールして見ることを聞くwindow.scrollX

var item = document.getElementById("item") 
 
window.addEventListener('scroll', function(e) { 
 
    if (window.scrollX > 100) { 
 
     item.classList.add('active') 
 
    } else { 
 
    item.classList.remove('active') 
 
    } 
 

 
});

body { 
 
    overflow-x: scroll; 
 
} 
 

 
#item { 
 
    width: 2000px; 
 
    height: 200px; 
 
    background-color: gold; 
 
    transition: all .25s; 
 
} 
 

 
#item.active { 
 
    background-color: red; 
 
}

<div id="item"></div>