Show div when scrolling using vanilla JavaScript

Question

I'm using vanilla JavaScript and would like to figure out a way where a div container is hidden, but when the user scrolls to 50% of the div container, that's when the div is fully visible. Kind of like a fading-in effect. This is what I have so far:

// delays scroll affects
function debounce(func, wait = 20, immediate = true) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

// adds animation for section cards 
function cardActive(e) {
  const cards = document.querySelectorAll('.slide-in');
  // checks if image is half shown from bottom
  cards.forEach(card => {
    const slideInAt = (window.scrollY + window.innerHeight) - card.height / 2;
    if (slideInAt > card.offsetTop) {
      card.classList.add('active')
    } else {
      card.classList.remove('active');
    }
  })
};

window.addEventListener('scroll', debounce(cardActive));

.slide-in {
  opacity: 50%;
  transition: opacity 0.8s;
}

.slide-in.active {
  transition: opacity 0.8s;
  opacity: 100%;
  visibility: visible !important;
}

.placeholder {
  margin-top: 400px;
}

.icon {
  width: 100px;
}

<div class="placeholder"></div>

<div class="mission-1 slide-in">
  <div class="section-card">
    <img class="icon" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="icon">
    <h6 class="mission-card-title">Title 1</h6>
    <p class="p-special">Lorem Ipsum.</p>
  </div>
</div>

<div class="placeholder"></div>

Vasilis G. · Accepted Answer · 2020-07-19 19:41:04Z

1

You need to make two small changes:

You need to replace card.height with card.offsetHeight in your JS file.

Use transition in your CSS file, you do not need animation for a fade in effect:

.slide-in {
   opacity: 0%;
   transition: opacity 0.8s;
}

.active {
   transition: opacity 0.8s;
   opacity: 100%;
   visibility: visible !important;
}

answered Jul 19, 2020 at 19:41

Vasilis G.

7,9074 gold badges23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

imnewhere Over a year ago

I tried adding what you mentioned, but it didn't work. I tried editing the question so hopefully it makes more sense. My apologize for the confusion. Thanks for your help!

Vasilis G. Over a year ago

@imnewhere you did not change card.height with card.offsetHeight. Once you do that in your edited code, it will work.

khajaamin · Accepted Answer · 2020-07-19 19:42:50Z

0

Here the image is already shown with opacity 1 and then once scrolled over it it will fade using just JS.

// adds animation for section cards 
window.addEventListener('scroll', (e) => {
  last_known_scroll_position = window.scrollY;
  let img = document.getElementById("img-1"); 
  if(img.offsetTop < last_known_scroll_position){
    img.style.opacity= 0.1;
  }else{
    img.style.opacity= 1;
  }

});

.slide-in {
  opacity: 50%;
}

.slide-in.active {
    opacity: 100%;
    -webkit-animation: animat_show 0.8s;
    animation: animat_show 0.8s;
    visibility: visible !important;
  }

.lorem {
  margin-bottom: 500px;
}

img {
  width: 500px;
}

<section class="space">
  <p class="lorem">lorem ipsum</p>
  <div class="slide-in">
    <img class="img-1" id="img-1" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="confetti">
  </div>
  <p class="lorem">lorem ipsum</p>
</section>

answered Jul 19, 2020 at 19:42

khajaamin

8747 silver badges18 bronze badges

1 Comment

imnewhere Over a year ago

Although this worked, this was the opposite of what I was looking for. I would also like to keep the debounce function so that it doesn't log each scroll event. Would you be able to take a look with the edits I made to see if you can help me out further? Sorry about the confusion, thank you!

Collectives™ on Stack Overflow

Show div when scrolling using vanilla JavaScript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related