<!--Покадровый скролл-->
<!--https://mt-webdesign.ru/scroll-frames-->
<canvas id="video-canvas"></canvas>

<script src='https://matilda-design.ru/library/GSAP.js'></script>
<script src='https://matilda-design.ru/library/ScrollTrigger.js'></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const canvas = document.getElementById("video-canvas");
const context = canvas.getContext("2d");
// Меняем кол. кадров
const frameCount = 58;
// Указать путь до папки с фото
const currentFrame = index => (
`http://www.matilda-design.ru/video//${(index + 1)}.jpg`
);
const images = []
const cano = {
frame: 0
};
for (let i = 0; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
images.push(img);
}
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[cano.frame], 0, 0, canvas.width, canvas.height);
}
// Условия для телефонов до 480px
if (screen.width < 480) {
images[0].onload = function() {
canvas.width = 1671;
canvas.height = 812;
render();
};
}
// Условия для маленьких планшетов от 480 до 640px
else if (screen.width < 640) {
images[0].onload = function() {
canvas.width = 1905;
canvas.height = 926;
render();
};
}
// Условия для средних планшетов от 640 до 1000px
else if (screen.width < 1000) {
images[0].onload = function() {
canvas.width = 1905;
canvas.height = 926;
render();
};
}
// Условия для больших планшетов от 1000 до 1200px
else if (screen.width < 1200) {
images[0].onload = function() {
canvas.width = 2811;
canvas.height = 1366;
render();
};
}
// Условия для старых ноутбуков от 1200 до 1440px
else if (screen.width < 1440) {
images[0].onload = function() {
canvas.width = 1853;
canvas.height = 900;
render();
};
}
// Условия для новых ноутбуков (hd) от 1440 до 1920px
else if (screen.width < 1920) {
images[0].onload = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
render();
};
}
// Условия для настольных ПК (ultra-HD) + ретина от 1920 до 5500px
else if (screen.width < 5500) {
images[0].onload = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
render();
};
}
// Условия если нет нужного разрешения
else {
images[0].onload = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
render();
};
}
// Класс для триггера
gsap.to(cano, {
frame: frameCount - 1,
snap: "frame",
scrollTrigger: {
// markers: true,
trigger: ".trigger-animation-start",
start: "top top",
end: '+=2500px',
scrub: 0.5
},
onUpdate: render
});
</script>