Как заставить wow fadeInUp работать с переполнением: прокрутка

#html #css #wow.js

#HTML #css #wow.js

Вопрос:

У меня есть небольшая проблема, когда я пытаюсь добавить wow fadeInUp (https://wowjs.uk/docs ) анимация на моем сайте. Я overflow установил значение scroll в своем css, и, похоже, оно отключает эффекты анимации. Есть причина, по которой я включил его в scroll, поэтому мне было интересно, есть ли способ заставить его работать с overflow: scroll;

Вот веб-сайт для получения более подробной информации: https://admiring-khorana-ad08d5.netlify.app /

 .webContainer{
  max-height: 100vh;
  overflow: scroll;
}

 <div class="webContainer">
<div class="grid-container">
            <div class="grid-item text wow fadeInUp" data-wow-duration="3s"><img class="services-icon img" src="./icons/services/s1.png" alt=""> <a
                class="servicesTag" href="">Acupuncture</a><br>
              <div class="serv-description">
                Cette pratique constitue tout acte de stimulation, généralement au
                moyen d’aiguilles, de certains sites déterminés sur la peau.
              </div>
            </div>
            <div class="grid-item text wow fadeInUp" data-wow-duration="3s"> <img class="services-icon img" src="./icons/services/s2.png" alt=""> <a
                class="servicesTag" href="">Kinésiologie</a><br>
              <div class="serv-description">
                Le kinésiologue est le professionnel de la santé expert en activité
                physique. Il vous accompagne dans l’adoption et le maintien d’un
                style de vie sain et actif. Ce professionnel peut aussi vous aider à
                perdre du poids. Les programmes d’entraînement conçus par les
                kinésiologues peuvent aussi aider les personnes souffrant de
                problèmes chroniques.
              </div>
            </div>

...

   var wow = new WOW();
  wow.init();

1. Вы пробовали @keyframes ?

2. @YT_Xaos в этом случае мне пришлось бы самому кодировать всю анимацию?

3. Ну, я всегда использую @keyframes , когда ставлю анимацию, потому что я не знаю ничего другого, что делает анимацию

Ответ №1:

Я не совсем уверен в том, о чем вы говорите, но вы можете использовать @keyframes fadeIn его для создания анимации. Пример:

 p:hover {
    animation: fadeIn 3.1s;
}
@keyframes fadeIn {
    from{opacity: 0;}
    to{opacity: 1;}
}

 <div>
 <p>Hello</p>
</div>

Развернуть фрагмент

Это отвечает на ваш вопрос

Ответ №2:

Решил это с помощью Jquery

     if (scrolled > 25 amp;amp; scrolled < 50) {
      jQuery('.grid-item, .services-image').each(function(i) {
          setTimeout(()=>{
            $(this).show().addClass('animated fadeInUp')
          }, 250 * i);
      });