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

Question

Я работаю над сайтом для друга (https://www.nicoledavis.org)), и мне трудно заставить каждый раздел сайта исчезать / исчезать при прокрутке вверх / вниз. Мне не нужен текст /изображения будут видны, пока вы не прокрутите его вниз.

Я пробовал этот урок (https://eddyerburgh.me/animate-elements-scrolled-view-vanilla-js), но не уверен, куда должны идти коды анимации, чтобы указать, какие части анимировать.

Вот код HTML, который у меня есть в настоящее время для каждого раздела, который я хотел бы видеть / выгладить при прокрутке:

    <div class="main-wrap">
       <div class="container">
          <div class="anchor"><h2><a name="A" class="anchor-link">{anchor-link-1:text}</a></h2></div>
          <div class="anchor-content">{anchor-content-1:content}</div> 
       </div>


    <div class="main-wrap">
       <div class="container">
          <div class="anchor"><h2><a name="B" class="anchor-link">{anchor-link-2:text}</a></h2></div>
          <div class="anchor-content">{anchor-content-2:content}</div>
       </div>
    </div>


    <div class="main-wrap">
       <div class="container">
          <div class="anchor"><h2><a name="C" class="anchor-link">{anchor-link-3:text}</a></h2></div>
          <div class="anchor-content">{anchor-content-3:content}</div>
       </div>
    </div>

    <div class="main-wrap">
       <div class="container">
          <div class="anchor"><h2><a name="D" class="anchor-link">{anchor-link-4:text}</a></h2></div>
          <div class="anchor-content">{anchor-content-4:content}</div>
       </div>
    </div>

Я не хочу удалять функцию привязки, потому что этоэто то, что обеспечивает плавный переход веб-сайта между каждым разделом.

В настоящее время у меня ничего не настроено для функции анимации, потому что учебник, который я упомянул выше, не работает для меня.неправильные места или что-то упущено.

Я ожидаю, что каждый контейнер / раздел будет постепенно исчезать при прокрутке вверх и вниз по сайту. Заранее спасибо за любую помощь!

Answer 1

Если я использую этот код ниже, чтобы сохранить свои якоря и уже существующее содержимое, будет ли слово «скрытый» по-прежнему идти после «main-wrap», или его нужно будет поместить в другое место?

<div class="main-wrap"> <div class="container"> <div class="anchor"><h2><a name="A" class="anchor-link">{anchor-link-1:text}</a></h2></div> <div class="anchor-content">{anchor-content-1:content}</div> </div>

Answer 2

Если вы следуете руководству по указанной вами ссылке (https://eddyerburgh.me/animate-elements-scrolled-view-vanilla-js), вам просто нужно обязательно добавить код CSS для анимации и код js, чтобы запустить анимацию для элементов.

В учебном пособии сказано, что нужно добавить «скрытый» класс ко всем элементам, которые вы хотите анимировать.

(function() {
  var elements;
  var windowHeight;

  function init() {
    elements = document.querySelectorAll('.hidden');
    windowHeight = window.innerHeight;
  }

  function checkPosition() {
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var positionFromTop = elements[i].getBoundingClientRect().top;

      if (positionFromTop - windowHeight <= 0) {
        element.classList.add('fade-in-element');
        element.classList.remove('hidden');
      }
    }
  }

  window.addEventListener('scroll', checkPosition);
  window.addEventListener('resize', init);

  init();
  checkPosition();
})();

@keyframes fade-in {
    from {opacity: 0; transform: scale(.7,.7)}
    to {opacity: 1;}
}
.fade-in-element {
  animation: fade-in 1.4s;
}

.hidden {
  opacity: 0;
}

<div class="main-wrap">
  <h1>VISIBLE</h1>
  <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
    luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
    purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p </div>

  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>

  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>
  
  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>
  
  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>
  
  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>
  
  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>
  
  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>
  
  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>
  
  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>
  
  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>
  
  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>
  
  <div class="main-wrap hidden">
    <h1>FADE IN</h1>
    <p>Aenean iaculis nunc eget diam euismod feugiat. Nullam nec ligula sed velit iaculis eleifend at sed nisi. Nam nibh ipsum, elementum imperdiet eleifend eget, pharetra et dui. Vestibulum sodales libero at orci rhoncus, nec tempor libero sagittis. Morbi
      luctus dolor ut risus lobortis semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed vulputate purus. Morbi a urna varius, ornare ipsum ut, laoreet elit. Phasellus mattis, magna et accumsan accumsan,
      purus augue rutrum erat, a ultrices felis felis a neque. Donec consequat pretium eros ac tristique. Pellentesque mollis elementum molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean convallis fringilla suscipit.</p>
  </div>