Активировать анимацию CSS3 при просмотре содержимого

У меня есть гистограмма, которая анимируется с помощью 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, но мне не удавалось заставить его работать.

Если кто-то может указать мне в правильном направлении, это будет действительно полезно.

Спасибо!

Ответы

Ответ 1

Захват событий прокрутки

Для этого требуется использовать JavaScript или jQuery для захвата событий прокрутки, проверяя каждый раз, когда запускается событие прокрутки, чтобы увидеть, находится ли элемент.

Как только элемент находится в поле зрения, запустите анимацию. В приведенном ниже коде это делается добавлением класса "start" к элементу, который запускает анимацию.

Обновлено демо

HTML

<div class="bar">
    <div class="level eighty">80%</div>
</div>

CSS

.eighty.start {
    width: 0px;
    background: #aae0aa;
    -webkit-animation: eighty 2s ease-out forwards;
       -moz-animation: eighty 2s ease-out forwards;
        -ms-animation: eighty 2s ease-out forwards;
         -o-animation: eighty 2s ease-out forwards;
            animation: eighty 2s ease-out forwards;
}

JQuery

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

Ответ 2

Иногда вам нужно, чтобы анимация всегда возникала, когда элемент находится в окне просмотра. Если это ваш случай, я слегка изменил код Matt jsfiddle, чтобы отразить это.

JQuery

// Check if it time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    } else {
        $elem.removeClass('start');
    }
}

Ответ 3

Чтобы активировать анимацию CSS, класс должен быть добавлен к элементу, когда это станет видимым. Как указывали другие ответы, для этого требуется JS, а Waypoints - это JS script, который можно использовать.

Путевые точки - это самый простой способ запуска функции при прокрутке до элемент.

До версии Waypoints версии 2 это был относительно простой плагин jquery. В версии 3 и выше (эта версия руководства 3.1.1) было введено несколько функций. Чтобы выполнить вышеописанное, можно использовать 'inview shortcut' script:

Загрузите и добавьте файлы script из эту ссылку или из Github (версия 3 пока недоступна через CDNJS, хотя RawGit всегда является опцией).

Добавьте script в свой HTML как обычно.

<script src="/path/to/lib/jquery.waypoints.min.js"></script>
<script src="/path/to/shortcuts/inview.min.js"></script>

Добавьте следующий JS-код, заменив #myelement на соответствующий элемент HTML jQuery:

$(window).load(function () {
    var in_view = new Waypoint.Inview({
        element: $('#myelement')[0],
        enter: function() {
            $('#myelement').addClass('start');
        },
        exit: function() {  // optionally
            $('#myelement').removeClass('start');
        }
    });
});

Мы используем $(window).load() по причинам, описанным здесь здесь.

Обновлен матовый скрипт здесь.

Ответ 4

В дополнение к этим ответам, пожалуйста, рассмотрите следующие моменты:

1- Проверка рассматриваемого элемента имеет много соображений:
Как узнать, отображается ли элемент DOM в текущем окне просмотра?

2- Если кто-то хочет иметь больше контроля над анимацией (например, установить "тип анимации" и "начальная задержка" ), вот хорошая статья:
http://blog.webbb.be/trigger-css-animation-scroll/

3- И также кажется, что вызов addClass без задержки (с использованием setTimeout) не эффективен.

Ответ 5

CSS FOR TRIGGER : 
.trigger{
  width: 100px;
  height: 2px;
  position: fixed;
  top: 20%;
  left: 0;
  background: red;
  opacity: 0;
  z-index: -1;
}
<script>
$('body').append('<div class="trigger js-trigger"></div>');

        $(document).scroll(function () {


           $('YOUR SECTIONS NAME').each(function () {

               let $this = $(this);

               if($this.offset().top <= $('.js-trigger').offset().top) {

                   if (!$this.hasClass('CLASS NAME FOR CHECK ACTIVE SECTION')) {
                       $this
                           .addClass('currSec')
                           .siblings()
                           .removeClass('currSec');

                   }
               }

           });

        });
</script>