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

    NooBiToo
    @NooBiToo
    Как пример, отлавливал скролл для открытия 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);
    				    });
    Ответ написан
    Комментировать