У меня есть гистограмма, которая анимируется с помощью CSS3, и анимация в настоящее время активируется при загрузке страницы.
Проблема заключается в том, что данная гистограмма помещается за пределы экрана из-за большого количества контента до этого, поэтому к тому моменту, когда пользователь прокручивается до нее, анимация уже завершена.
Я искал пути через CSS3 или jQuery, чтобы активировать анимацию CSS3 на гистограмме, когда зритель видит диаграмму.
<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>
Если вы прокрутите страницу вниз очень быстро сразу после загрузки страницы, вы можете увидеть ее анимацию.
Вот jsfiddle моего кода. Кроме того, я не знаю, имеет ли это значение, но у меня есть несколько примеров этой гистограммы на странице.
Я столкнулся с подключаемым модулем jQuery, называемым waypoint, но мне не удавалось заставить его работать.
Если кто-то может указать мне в правильном направлении, это будет действительно полезно.
Спасибо!