Изменить javascript для выполнения замены изображения src в любом месте, где я прокручиваю не только прямо над изображением

Question

У меня есть следующий код:

<img class="profgif" id="gif-1" src="notanimated.jpg" style="" />
<script>
 var elm="gif-1";
 document.getElementById(elm).onmouseover=function(e){
       this.src="animated.gif";
};
document.getElementById(elm).onmouseout=function(e){
       this.src="notanimated.jpg";
};
</script>

Это хорошо работает для замены неподвижного изображения с анимированным GIF, когда я наведу на него курсор мыши.

Что мне сейчас нужно, так это возможность поменять местами не анимированные с анимированными везде, где я прокручиваю, а не только прямо на изображение.

Таким образом, в основном, если изображение находится в поле зрения, мы делаем анимированный обмен, иначе оно остается не анимированной версией.

Я бы предпочел не решение JQuery, но если есть одно, я мог бы рассмотреть

ОБНОВЛЕНИЕ Я вижу событие mousewheel, которое должно быть, но я не знаю, как сделать это для списка изображений