как запускать анимацию, когда пользователь прокручивается до раздела страницы

Question

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

https://jsfiddle.net/u4ff2tfk/6/

Это код до сих пор:

.animated { 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 
.bounce { 
 
    -webkit-animation-name: bounce; 
 
    animation-name: bounce; 
 
    -webkit-transform-origin: center bottom; 
 
    transform-origin: center bottom; 
 
} 
 
@keyframes bounce { 
 
    from, 20%, 53%, 80%, to { 
 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 
    40%, 
 
    43% { 
 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    -webkit-transform: translate3d(0, -30px, 0); 
 
    transform: translate3d(0, -30px, 0); 
 
    } 
 
    70% { 
 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    -webkit-transform: translate3d(0, -15px, 0); 
 
    transform: translate3d(0, -15px, 0); 
 
    } 
 
    90% { 
 
    -webkit-transform: translate3d(0, -4px, 0); 
 
    transform: translate3d(0, -4px, 0); 
 
    } 
 
}

<div data-anchor="intro-section-1" class="section intro-section-1"> 
 
    <div class="float-left "> 
 
    <div id="executive-nav"> 
 
     <p onclick="openSideNavBlue()" class="nav-section-title">Executive Summary</p> 
 
    </div> 
 
    <div class="intro-text animated bounce"> 
 
     <p>It’s our sixth annual report and as the years go by, each iteration becomes an increasingly useful snapshot that captures the IT landscape both as it was over the last 12 months, and in transition from the years before it. 
 
     <br> 
 
     <br>There are 48 fewer respondents in this year’s survey than in 2015, although the number of respondents vary between large, medium and small organisations has stayed relatively consistent. 
 
    </div> 
 
    </div> 
 
    <div class="float-right"> 
 
    <p class="intro-title">Welcome to 
 
     <br>the 2016 
 
     <br>Databarracks 
 
     <br>Data Health 
 
     <br>Check</p> 
 
    <a href="#intro-section-2"> 
 
     <img class="blue-arrow" src="img/blue-arrow.svg"> 
 
    </a> 
 
    </div> 
 
</div>

Answer 1

Я не лучший в CSS, но, возможно, вы могли бы попробовать использовать JQuery, чтобы сделать анимацию? Тогда это может быть в основном любая анимация, которую вы предпочитаете, например, slideIn, fadeIn и т. Д., И вы можете легко определить ее с помощью оператора if.

Answer 2

Смотрите эту скрипку http://jsfiddle.net/apaul34208/ozww5cvj/18/

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

var imagePos = $(this).offset().top; 
var imageHeight = $(this).height(); 
var topOfWindow = $(window).scrollTop(); 

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