Есть ли способ заставить CSS-анимацию не запускаться, пока анимированный объект не будет виден? - PullRequest
Новая
       44

Есть ли способ заставить CSS-анимацию не запускаться, пока анимированный объект не будет виден?

0 голосов
/ 22 октября 2019

Итак, у меня есть несколько анимаций, запущенных на странице, над которой я работаю, и я хотел бы знать, есть ли способ заставить анимацию НЕ запускаться, пока анимированные элементы не будут видны на экране

Я уже провел некоторые исследования, но то, что я пробовал (на самом деле пару скриптов), не сработало ..

Извините за размер кода CSS, этоанимацию, и я оставил комментарий там, потому что я не написал код анимации. 

.text-pop-up-top {
    -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
            animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-10-22 1:23:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>


<i class="fas fa-at text-pop-up-top" style="font-size: 100px; color: #1f8293;"></i>

Ожидаемые результаты, как и выше, начинаются с анимации, когда пользователь прокручивает достаточно вниз, чтобы анимируемый элемент был виден на экране. В настоящее время возникают проблемы, с которыми я сталкиваюсь: анимация запускается сразу после загрузки страницы без видимой иконки, и 2, анимация вообще не происходит.

1 Ответ

1 голос
/ 23 октября 2019

Поскольку я предполагаю, что вы новичок в коде всех видов, вот быстрый пример использования wowjs , и поскольку вы заявили, что пытались, и это не сработало, я могу только догадываться, что вы этого не сделали init Проверьте его или неверный путь к файлу js, который вы должны были сохранить локально. В любом случае, запустите прикрепленный фрагмент и ура! 

new WOW().init();
.text-pop-up-top {
    -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
            animation: text-pop-up-top 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 1s both;
}
/* ----------------------------------------------
 * Generated by Animista on 2019-10-22 1:23:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
<script src="https://wowjs.uk/dist/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>

<h1>scroll down....</h1>
PS, notice we don't care about any animate.css stuff at all..
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>


<i class="fas fa-at wow text-pop-up-top" style="font-size: 100px; color: #1f8293;"></i>
...