user3264210 user3264210 - 2 months ago 11
CSS Question

Website Horizontal Scrolling Activated Animations

I know how to cause animations due to vertical scrolling, but how do you cause animations due to horizontal scrolling?

Answer

Same way, you listen to scroll event and watch 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>

Comments