CODEWITHSUNDEEP
javascripthtmlcssfadein
Miggs888
Miggs888

Reputation: 1

Elements not fading in on user scroll

Attempting to make image elements fade up when user scrolls down through page. Currently, images are not showing up at all. There is an issue with the JS, but not sure how else to trouble shoot. HTML, CSS, and JS below. A fresh set of eyes would probably be most helpful. Thank you!

const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
threshold: 1,
rootMargin: "0px 0px -100px 0px",
};

const appearOnScroll = new IntersectionObserver(function(entries,
appearOnScroll) {
entries.forEach(entry => {
    if (!entry.isIntersecting) {
        return;
    } else {
        entry.target.classList.add('appear');
        appearOnScroll.unobserve(entry.target);
    }
    })
    }, 
    appearOptions);

    faders.forEach(fader => {
    appearOnScroll.observe(fader);
    })

And my HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/observer.js"></script>
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main>
    <h3>Design Studio Project</h3>
    <div class="videowrapper">
    <video controls="controls" width="1920" height="1080" 
   name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video>
    </div>
    <div class="remainingslides">
    <img class="fade-in" src="images/remaining_keyframes-01.png">
    <img class="fade-in" src="images/remaining_keyframes-02.png">
    <img class="fade-in" src="images/remaining_keyframes-03.png">
    <img class="fade-in" src="images/remaining_keyframes-04.png">
    <img class="fade-in" src="images/remaining_keyframes-05.png">
    <img class="fade-in" src="images/remaining_keyframes-06.png">
    <img class="fade-in" src="images/remaining_keyframes-07.png">
    <img class="fade-in" src="images/remaining_keyframes-08.png">
    <img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>
<script src="js/observer.js"></script>
</body>
</html>

and CSS

.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}
.fade-in.appear {
opacity: 1;
}

Upvotes: 0

Views: 111

Answers (2)

imvain2
imvain2

Reputation: 15847

There are a few issues with your code:

In your HTML you are referring to your js file twice.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

I also cleaned up how you were calling IntersectionObserver and passing the callback/options.

The error that pops up is apparently a known "non" issue:

ResizeObserver - loop limit exceeded

const faders = document.querySelectorAll('.fade-in');
var appearOptions = {
  threshold: 1,
  rootMargin: "0px 0px -100px 0px",
};

const appearOnScroll = new IntersectionObserver((entries,
    appearOptions) => {
    
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        return;
      } else {
        entry.target.classList.add('appear');
        appearOnScroll.unobserve(entry.target);
      }
    })
  });

faders.forEach(fader => {
  appearOnScroll.observe(fader);
})
.fade-in {
    opacity: 0;
    transition: opacity 250ms ease-in;
    }
    .fade-in.appear {
    opacity: 1;
    }
<main>
        <h3>Design Studio Project</h3>
        <h2>The Most Important Revolutions</h2>
        <p>Lauren Miggins</p>
        <p>Summer 2020</p>
        <div class="videowrapper">
        <video controls="controls" width="1920" height="1080" 
       name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video>
        </div>
        <div class="remainingslides">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
        <img class="fade-in" src="https://via.placeholder.com/800">
    </div>
    </main>

Upvotes: 1

Anton
Anton

Reputation: 2703

You've added observer.js 2 times on your page. But your other stuff is working for me.

I do not have your images and video, so I removed video for this example and make images to be just a red squares.

Strange, but it is working in Snippet editor, but not in view mode!

Anyway, here is the same in jsfiddle: click.

const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
  threshold: 1,
  rootMargin: "0px 0px -100px 0px",
};

const appearOnScroll = new IntersectionObserver(function(entries,
    appearOnScroll) {
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        return;
      } else {
        entry.target.classList.add('appear');
        appearOnScroll.unobserve(entry.target);
      }
    })
  },
  appearOptions);

faders.forEach(fader => {
  appearOnScroll.observe(fader);
})
.fade-in {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.fade-in.appear {
  opacity: 1;
}

/* Helpers: */

main {
  width: 800px;
}

img {
  display: inline-block;
  border: 1px solid red;
  background: red;
  min-width: 200px;
  min-height: 200px;
}
<main>
    <h3>Design Studio Project</h3>
    <h2>The Most Important Revolutions</h2>
    <p>Lauren Miggins</p>
    <p>Summer 2020</p>
    <div class="videowrapper">
    <!--video controls="controls" width="1920" height="1080" 
   name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video-->
    </div>
    <div class="remainingslides">
    <img class="fade-in" src="images/remaining_keyframes-01.png">
    <img class="fade-in" src="images/remaining_keyframes-02.png">
    <img class="fade-in" src="images/remaining_keyframes-03.png">
    <img class="fade-in" src="images/remaining_keyframes-04.png">
    <img class="fade-in" src="images/remaining_keyframes-05.png">
    <img class="fade-in" src="images/remaining_keyframes-06.png">
    <img class="fade-in" src="images/remaining_keyframes-07.png">
    <img class="fade-in" src="images/remaining_keyframes-08.png">
    <img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>

Upvotes: 0

Related Questions