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

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

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

Описание

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

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

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

Важно!!!

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

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