Как сделать чтобы анимация включалась когда пользователь опустился до нужного блока?

Question

[sanke46]

@keyframes animatedBackground {
    0% { background-position: -1200px 0; }
    100% { background-position: 0px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: -1200px 0; }
    100% { background-position: 0px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: -1200px 0; }
    100% { background-position: 0px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: -1200px 0; }
    100% { background-position: 0px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: -1200px 0; }
    100% { background-position: 0px 0; }
}

.red-bg-line {
  color: white;
   background-image: url(../img/red.png);
   background-repeat: no-repeat;
   background-size: 81%;
   background-position: 0% -50px;
   animation: animatedBackground 4s ease 3s forwards;
    -moz-animation: animatedBackground 4s ease 3s forwards;
    -webkit-animation: animatedBackground 4s ease 3s forwards;
    -ms-animation: animatedBackground 4s ease 3s forwards;
    -o-animation: animatedBackground 4s ease 3s forwards;
 }

Comments

[Егор Живагин]

javaScript

Answer 1

[DivineDraft]

Подключите плагин wow.js
Он запускает элемент лишь при его отображении на экране - при прокрутке

Answer 2

[Erl]

Как пример, отлавливал скролл для открытия popup'ов

function scrollController(block, blockIdentificator, once, cb) {
            var blockTopOffset = block.offset().top,
                blockHeight = block.height(),
                documentBlock = $(document);
            documentBlock.bind('scroll' + '.' + blockIdentificator, function () {
                if ((documentBlock.scrollTop() + 10 > blockTopOffset) && (documentBlock.scrollTop() < blockTopOffset + blockHeight)) {
                    // позволяет вернуть положение страницы на позицию, где находится
                    window.scrollTo(0, blockTopOffset);
                    //вызов коллбека
                    cb();
                    //единожды срабатывает контроллер
                    if (once === true) {
                        documentBlock.unbind('scroll' + '.' + blockIdentificator);
                    }
                }
            });
        }
        //---------------------------------------------------------------------    
				//----------STARTUP POP-------------
				    if (documentEl.scrollTop() + 50 < startupOffsetTop + $startupBlock.height()) {
				        scrollController($startupBlock, 'startup', true, function () {
				            $startupPopup.removeClass('js-is-hidden');
				            //setTimeout нужен для того, чтобы сработала css анимация
				            setTimeout(function () {
				                $startupPopup.addClass('js-is-transparent');
				            }, 0);
				            $body.addClass('hidden');

				        });
				    }
				    $closeStartupPopup.on('click', function (el) {
				        $startupPopup.removeClass('js-is-transparent');
				        $body.removeClass('hidden');
				        setTimeout(function () {
				            $startupPopup.addClass('js-is-hidden');
				        }, 200);
				    });