Код не мой. Код взят с codepen.io (Это оригинал данного кода) https://codepen.io/BakhtiyarUmutbayev/pen/ZEXgamV?editors=0010. Я отредактировал код под себя.
Остаются картинки вот скрин(Нужно чуть ниже проскроллить на сайте ):
Вопрос как удалять картинки что остаются на фоне? Я начинающий разработчик и не силён в canvas. Прошу вас помочь. Буду очень благодарен за любой совет, помощь.
var totalImages = 96,
canv = document.getElementById('video_img_anim'),
canv_images = canv.dataset.img,
context_imgset = canv.getContext('2d'),
images = [];
canv_images = canv_images.split(' ')
canv_images.forEach(img_src => {
var img = document.createElement('img')
if (img_src != NaN && img_src != " " && img_src != "" && img_src != undefined) {
img.src = img_src
images.push(img)
}
});
var currentLocation = 0;
var setImage = function(newLocation) {
context_imgset.drawImage(images[newLocation], 0, 0, canv.width, canv.height);
}
var wheelDistance = function(evt) {
if (!evt) evt = event;
var w = evt.wheelDelta,
d = evt.detail;
if (d) {
if (w) return w / d / 40 * d > 0 ? 1 : -1; // Opera
else return -d / 3; // Firefox; TODO: do not /3 for OS X
} else return w / 120; // IE/Safari/Chrome TODO: /3 for Chrome OS X
}
var wheelDirection = function(evt) {
if (!evt) evt = event;
return (evt.detail < 0) ? 1 : (evt.wheelDelta > 0) ? 1 : -1;
};
var MouseWheelHandler = function(e) {
// The following equation will return either a 1 for scroll down
// or -1 for a scroll up
var distance = wheelDistance(e);
var direction = wheelDirection(e);
// This code mostly keeps us from going too far in either direction
currentLocation -= Math.round(distance * 3);
if (currentLocation < 0) currentLocation = 0;
if (currentLocation >= images.length)
currentLocation = images.length - 1;
setImage(currentLocation);
};
// IE9, Chrome, Safari, Opera, Firefox
window.addEventListener("wheel", MouseWheelHandler, false);
setImage(4);
<canvas width="380" height="380" class="video_img_anim" id="video_img_anim" data-img="https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation73.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation74.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation75.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation76.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation77.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation78.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation79.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation80.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation81.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation82.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation83.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation84.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation85.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation86.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation87.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation88.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation89.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation90.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation91.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation92.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation93.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation94.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation95.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation00.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation01.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation02.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation03.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation04.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation05.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation06.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation07.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation08.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation09.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation10.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation11.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation12.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation13.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation14.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation15.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation16.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation17.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation18.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation19.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation20.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation21.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation22.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation23.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation24.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation25.png https://picpig.ru/images/2022/01/22/Home_Homecenter_Animation26.png"></canvas>