CODEWITHSUNDEEP
javascripthtmlcsscss-animationshorizontal-scrolling
adeedoubleu
adeedoubleu

Reputation: 45

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?

Upvotes: 1

Views: 52

Answers (1)

TedMeftah
TedMeftah

Reputation: 1915

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>

Upvotes: 1

Related Questions