Блог

Я пытаюсь поменять / преобразовать одно изображение в другое, изменив атрибут изображения src при прокрутке. Это вроде как работает, но изображение мерцает.

Я также хотел бы сбросить src обратную сторону при прокрутке страницы вверх.

Мой код

 var elements = $('img.image-toggle');

$(window).on('scroll resize', function() {
    $(elements).each(function(){
    var toggled = false;      
    var imagePos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
       if (((topOfWindow 250) > topOfWindow ) amp;amp; !toggled) {
            toggled = true;
            $(this).addClass("toggled");
            img1 = $(this).attr('src');
            img2 = $(this).attr('data-scroll-src');
            $(this).attr('data-scroll-src',img1);
            $(this).attr('src',img2);
        }else {
            toggled = false;
            $(this).removeClass("toggled");
            img2 = $(this).attr('src');
            img1 = $(this).attr('data-scroll-src');
            $(this).attr('data-scroll-src',img2);
            $(this).attr('src',img1);
       }
    });
});
 

В идеале я хотел бы сделать переход изображений плавным.