JavaScript fade-in fade-out animation

570 Views Asked by engr. hasnat At 14 November 2022 at 09:08

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

Original Q&A

There are 2 best solutions below

Rory McCrossan On 14 November 2022 at 09:14

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>

NathanaelDousa On 14 November 2022 at 09:56

A basic example..

HTML:

<!DOCTYPE html>
<html lang="en">
<body>
<section>
    <div class="tile bottom-right"></div>
    <div class="tile bottom-right"></div>
    <div class="tile bottom-right"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></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..

JavaScript fade-in fade-out animation

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANIMATION

Related Questions in SCROLL

Related Questions in FADEIN

Related Questions in FADEOUT

Trending Questions

Popular # Hahtags

Popular Questions