Начало работы скрипта после прокрутки элемента (div)

#javascript #html #jquery

Есть блок div посередине страницы, в блоке есть анимированные диаграммы. Сейчас анимация
происходит сразу после загрузки страницы, когда блок с диаграммами ещё не виден, соответственно
когда мы прокрутим до блока, анимация уже прекратится.

Как сделать так, чтоб анимация происходила только тогда, когда блок появится на странице?
    

Ответы

Ответ 1

Тот самый момент, когда ответ можно посмотреть в справке stackoverflow.

https://ru.stackoverflow.com/tour

Есть список элементов вида:

{
    "anchor": ".about-editing",
    "prepare": function() {
        $(".about-editing .qa-block").css({
            "position": "relative",
            "left": "200px"
        })
    },
    "animate": function(t) {
        $(".about-editing .qa-block").animate({
            "left": 0
        }, 700, t)
    },
    "track": "editing"
}


где anchor - селектор, prepare функция задает начальное положение элемента, animate
- нужную анимацию.

И сам код, приводящий всё в действие:

n = function() {
    var t = $(window).scrollTop() + 1 * $(window).height() / 2;
    $.each(o, function(o, e) {
        var n = $(e.anchor);
        n.length && !e.done && t > n.offset().top && (e.animate(function() {
            a(e.anchor)
        }), e.done = !0, e.track && StackExchange.using("gps", function() {
            StackExchange.gps.track("aboutpage.view", {
                "scroll_location": e.track
            })
        }))
    })
};
setTimeout(function() {
    $(window).scroll(n), n()
}, 250),


За "текущее положение окна" берётся середина экрана var t = $(window).scrollTop()
+ 1 * $(window).height() / 2;
Если это положение больше чем вертикальное смещение элемента n.length && !e.done
&& t > n.offset().top то вызываем анимацию над этим элементом e.animate