Покадровый
скролл

Уроки по Тильде

Модификация позволяет создать покадровый скролл из видео.

Описание

Посмотреть пример

Материал из видео

Перед тем, как начать подключение. У вас должен быть хостинг, чтобы можно было загрузить изображения из видео (кадры)

Важно!!!

В Zero блоке создаём HTML блок и добавляем в него код

Шаг 1

Код


<canvas id="video-canvas"></canvas>

Под этим блоком создаём еще Zero блок, чтобы можно было зафиксировать видео на скролл, через стандартную анимацию. (видео будет проигрываться, пока скроллим)

Шаг 2

Ниже добавляем код, через блок T123

Шаг 3

Код


<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>

В Zero блоке с видео создаём шейп и вешаем класс trigger-animation-start. Он будет служить триггером для начала анимации во время скролла. Заливку убираем

Шаг 4

Подготовленное видео режим на кадры. Я резал, через этот сервис: img2go.com

Шаг 5

Итоговые кадры переименовываем по порядку, как на фото ниже. Итого у меня получилось 58 кадров из 5 секундного видео.

Шаг 6

На своём хостинге (я пользуюсь reg.ru) создаём необходимую папку и загружаем в нее наши изображения. Копируем путь до папки. В моём случае: http://www.matilda-design.ru/video/

Шаг 7