Плавная подгрузка контента при скроллинге?

Question

[thorph0]

Привет, кто может подсказать что это за плагин: изначально блоки страницы, которые не попали в область (высоту) просмотра скрыты, но по мере скроллинга, когда эти самые блоки попадают в область просмотра, они начинают плавно появляться? Можете подсказать? Надеюсь объяснил понятно, очень надеюсь на помощь.

Comments

[Максим]

Вы покажите где это видели лучше

[thorph0]

Максим Ленский, Например, только что увидел это здесь (не реклама)

[Rustam Bainazarov]

thorph0, wowjs вам в помощь.

Answer 1

[tyzberd]

https://daneden.github.io/animate.css/

+

$(document).ready(function () {
    (function () {
        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        window.requestAnimationFrame = requestAnimationFrame;
    })();
    var windowHeight = $(window).height();
    function animate(timelineBlock, time) {
        timelineBlock.each(function () {
            if ($(this).offset().top <= $(window).scrollTop() + windowHeight * time && $(this).hasClass("invisible")) {
                $(this).removeClass("invisible").addClass("animated slideInUp")
            }
        });
    }

    var timelineBlock = $('.js-timeline-animate'), time = 1;
    $(window).on('scroll', function () {
        requestAnimationFrame ? requestAnimationFrame(function () {
            animate(timelineBlock, time)
        }) : setTimeout(function () {
            animate(timelineBlock, time)
        }, 100)
    })
});

https://codepen.io/tyzberd/pen/XGerLm

Answer 2

[y0u]

https://wowjs.uk/
https://michalsnik.github.io/aos/

Answer 3

[WapSter]

Подгрузка контента как в ГуглРидер? уже задавали вопрос

Comments

[thorph0]

Скорее всего нет, мне для лендинга, динамичного контента нет - подгружаться должна только вёрстка, цель чисто эстетическая

[WapSter]

thorph0, ясно тогда копайте в сторону wowjs + animate.css

[thorph0]

Тимур Турсунбаев, Огромное спасибо!

Answer 4

[gorczko]

тема выше почитайте