<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script><script src="./script.js"></script>
<script>
console.clear();
const canvas = document.getElementById("video-canvas");
const context = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight * 1.1;
// Меняем кол. кадров
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);
}
// Условия для разрешений
if( $(window).width() > 320 && $(window).width() < 480) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
images[0].onload = render;
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[cano.frame], 0, 0, window.innerWidth * 3, window.innerHeight * 1.3);
}
}
// Условия для разрешений
else if( $(window).width() > 481 && $(window).width() < 768){
canvas.width = window.innerWidth;
images[0].onload = render;
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[cano.frame], 0, 0, window.innerWidth * 2, window.innerHeight * 1.1);
}
}
// Условия для разрешений
else if( $(window).width() > 769 && $(window).width() < 1024){
canvas.width = window.innerWidth;
images[0].onload = render;
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[cano.frame], 0, 0, window.innerWidth * 1, window.innerHeight * 1.2);
}
}
// Условия для разрешений
else if( $(window).width() > 1025 && $(window).width() < 1440){
canvas.width = window.innerWidth;
images[0].onload = render;
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[cano.frame], 0, 0, window.innerWidth * 1.2, window.innerHeight * 1.2);
}
}
// Условия для разрешений
else if( $(window).width() > 1041 && $(window).width() < 1920){
canvas.width = window.innerWidth;
images[0].onload = render;
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[cano.frame], 0, 0, window.innerWidth, window.innerHeight * 1.2);
}
}
// Условия для разрешений
else if( $(window).width() > 1921 && $(window).width() < 2560){
canvas.width = window.innerWidth;
images[0].onload = render;
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[cano.frame], 0, 0, window.innerWidth, window.innerHeight * 1);
}
}
// Условия если нет нужного разрешения
else{
canvas.width = 903;
canvas.height = 508;
images[0].onload = render;
function render() {
context.clearRect(0, 0, 903, 508);
context.drawImage(images[cano.frame], 0, 0, window.innerWidth, 200);
};};
// Класс для триггера
gsap.to(cano, {
frame: frameCount - 1,
snap: "frame",
scrollTrigger: {
trigger: ".trigger-animation-start",
start: "top top",
end: '+=2500px',
scrub: 0.5
},
onUpdate: render
});
</script>