Элементы не исчезают при прокрутке пользователем - PullRequest
Новая
       6

Элементы не исчезают при прокрутке пользователем

0 голосов
/ 05 августа 2020

Попытка заставить элементы изображения блекнуть, когда пользователь прокручивает страницу вниз. В настоящее время изображения вообще не отображаются. Есть проблема с JS, но не знаю, как еще ее устранить. HTML, CSS и JS ниже. Наиболее полезной была бы пара sh глаз. Спасибо! 

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);
    })

И мои 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>

и CSS

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

Ответы [ 2 ]

0 голосов
/ 05 августа 2020

Есть несколько проблем с вашим кодом:

В вашем HTML вы дважды ссылаетесь на свой js файл. 

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

Я также подчистил, как вы были вызов IntersectionObserver и передача callback / options.

Выскакивающая ошибка, по-видимому, является известной "не" проблемой:

ResizeObserver - l oop превышен предел 

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>
0 голосов
/ 05 августа 2020

Вы добавили observer.js 2 раза на своей странице. Но другие ваши вещи работают на меня.

У меня нет ваших изображений и видео, поэтому я удалил видео для этого примера и сделал изображения просто красными квадратами.

Странно, но он работает в редакторе сниппетов, но не в режиме просмотра!

В любом случае, здесь то же самое в 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>
...