Как анимировать картинку при прокрутке?

Question

[Adam Korolefff]

Почему при скроллинге картинка слишком долго времени уменьшается ? Скролля уже наверх она только съезжает вниз.

$(window).scroll(function(){
    if ($(window).scrollTop() > 1100) {
        $(".header img").animate({
            'margin-top': '1000px',
            'margin-left': '475px', 
            'width': '90%',
            'height': '100%',
        }, "500")
    } else  {
        $('.header img').animate({
            'margin-top': '-500px',
            'margin-left': '20px',
            'width': '180%',
        }, "200")
    }
});

<div class="header">
        <img src="src/img/большой_размер_льва.jpg" alt="lion" class="ImgBackg">
    </div>

.header {
    position: absolute;
}

Comments

[Максим Тимофеев]

"слишком долго" понятие растяжимое, исходя из кода это должно произойти за 500ms
Если хотите что-то динамические продемонстрировать, лучше кидать код в песочницу:
https://jsfiddle.net
https://codepen.io

[Adam Korolefff]

Максим Тимофеев, нужно чтобы при скроллинге вместе с экраном картинка уменьшаласью. Вот что имелось ввиду

[2cha.headz]

судя по коду у вас анимация срабатывает десятки-сотни раз, поэтому все и тормозит, при выполнении условия:

if ($(window).scrollTop() > 1100) {
...
} else {
...
}

добавляйте определенный класс, например к body
если же условие не выполняется ставьте другой класс

в условиях дополнительно проверяйте его наличие/отсутствие и только на основании этого запускайте анимацию