Меню

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

Уроки по Тильде
Модификация позволяет создать покадровый скролл из видео.
Описание
Материал из видео
Перед тем, как начать подключение. У вас должен быть хостинг, чтобы можно было загрузить изображения из видео (кадры)
Важно!!!
В 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
Возвращаемся в скрипт выше и меняем путь до изображений на свой. Так же меняем кол. кадров на своё
Шаг 8
Фиксируем на скролл блок с видео, через пошаговую анимацию на нужное кол. пикселей. У Zero блока выставляем overflow - visible
Шаг 9
В скрипте уставливаем продолжительность видео в пикселях.
Шаг 10
Более подробные настройки в видео выше
Не получилось подключить?
Не беда, ты всегда можешь написать мне в Telegram и запросить исходник
Другие уроки
Анимация смены фона
Уроки по Тильде
Анимация и фиксация шапки
Уроки по Тильде
Фоновое видео
Уроки по Тильде
Открой неограниченный доступ к библиотеке
Техническая поддержка в течение 12 часов
Платный доступ
Доступ к базовым и уникальным модификациям
Доступ к базовым и углубленым занятиям
2 уникальные модификации в неделю
350 руб. / в месяц
После оплаты подписки ты получишь доступ не только к этой модификации, но и ко всему платному контенту на платформе
Made on
Tilda