JavaScript fade-in fade-out animation-CodePudding

window.addEventListener('scroll',function(){
  if(window.pageYOffset > 100)
  {
 document.getElementById('fade').style.opacity=1;
  }
  else
  {
    document.getElementById('fade').style.opacity=0;
  }
});

JavaScript fad-in fade-out animation with scrolling event or without using libraries API, only with logics

CodePudding user response：

To achieve this you can use the CSS transition and opacity properties with a class that you toggle via JS to fade in/out an element:

window.addEventListener('scroll', function() {
  document.querySelector('#fade').classList.toggle('visible', window.pageYOffset > 100);
});

#fade {
  transition: opacity 0.5s;
  opacity: 0;

  /* only for this demo... */
  position: fixed;
  top: 50px;
}

#fade.visible {
  opacity: 1;
}

div {
  /* only for this demo... */
  height: 1000px;
}

<div>Scroll down</div>
<div id="fade">Lorem ipsum dolor sit</div>

CodePudding user response：

no, its like when i scroll the page fade-in apply on every section separately

CodePudding user response：

A basic example..

HTML:

<!DOCTYPE html>
<html lang="en">
<body>
<section>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
</section>
</body>
</html>

CSS

body {
max-width:900px;
margin:0 auto;
}
.tile {
    height:400px;
    margin-top:40px;
    background:grey;
    -webkit-transform: translateY(50px) rotate(-5deg) translateZ(0);
    transform: translateY(50px) rotate(-5deg) translateZ(0);
    -webkit-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    opacity: 0;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
.bottom-right.inView {
    opacity: 1;
    -webkit-transform: translateY(0px) rotate(0deg) translateZ(0);
    transform: translateY(0px) rotate(0deg) translateZ(0);
}
.inView {
    opacity: 1;
    -webkit-transform: translateY(0px) rotate(0deg) translateZ(0);
    transform: translateY(0px) rotate(0deg) translateZ(0);
}
section {
    padding:20px;
}

let elementsArray = document.querySelectorAll(".tile");
console.log(elementsArray);
window.addEventListener('scroll', fadeIn ); 
function fadeIn() {
    for (var i = 0; i < elementsArray.length; i  ) {
        var elem = elementsArray[i]
        var distInView = elem.getBoundingClientRect().top - window.innerHeight   20;
        if (distInView < 0) {
            elem.classList.add("inView");
        } else {
            elem.classList.remove("inView");
        }
    }
}
fadeIn();

The animation is not made in JS. The animation is made in css. In the JS we remove or add the class. But we need the height of the screen the user is using with using the var distInView = elem.getBoundingClientRect().top - window.innerHeight 20;. Please before copying the code read the code and try to understand what is happening..