Покадровый скролл (v1.1)

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

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

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
37688815
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Прежде чем начинать у вас должен быть аккаунт на гитхабе, он нужен для загрузки кадров, если у вас нет своего хостинга. Пройдите регистрацию
Важно!!!
Подготовленное видео режим на кадры. Я резал, через этот сервис: img2go.com. Для альфа канала: mcconverter
Шаг 1
В итоге вы получаете архив с кадрами, их предстоит переименовать, но прежде я рекомендую кол. их уменьшить, чтобы итоговый размер папки с кадрами не весил много. Помимо этого можно уменьшить и размер самого видео файла, а потом резать на кадры.
Шаг 2
Готовые кадры переименовываем от 1 до последнего
Шаг 3
Переходим на github и нажимаем кнопку "New repository"
Шаг 4
Далее пишем название папки в графе "Repository name" и жмем кнопку "Create repository"
Шаг 5
Жмем загрузить файлы (uploading an existing file)
Шаг 6
Перетягиваем файлы из папки в гитхаб
Шаг 7
Подтверждаем загрузку нажав кнопку "Commit changes"
Шаг 8
Теперь нужно сформировать прямую ссылку на папку:
открываем текстовый редактор и копируем туда ссылку из поисковой строки такого формата - https://github.com/sonsam240/video-nature/upload
Её нужно будет поправить на такого рода ссылку - https://raw.githubusercontent.com/sonsam240/video-nature/main/
где raw.githubusercontent.com - прямой хостинг гитхаба;
sonsam240 - название вашего профиля;
video-nature - название папки (repositiory)
для проверки можно указать название одного из кадров и открыть в новой вкладке в браузере: https://raw.githubusercontent.com/sonsam240/video-nature/main/1.jpg

Шаг 9
В Zero блоке создаём HTML блок и добавляем в него код
Шаг 10
<!--Покадровый скролл-->
<!--https://mt-webdesign.ru/scroll-frames-->
<canvas id="video-canvas"></canvas>
Под этим блоком создаём еще Zero блок, чтобы можно было зафиксировать видео на скролл, через стандартную анимацию. (видео будет проигрываться, пока скроллим)
Шаг 11
Ниже добавляем код, через блок T123
Шаг 12
<script src='https://matilda-design.ru/library/GSAP.js'></script>
<script src='https://matilda-design.ru/library/ScrollTrigger.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>
В Zero блоке с видео создаём шейп и вешаем класс trigger-animation-start. Он будет служить триггером для начала анимации во время скролла. Заливку убираем
Шаг 13
Фиксируем на скролл блок с видео, через пошаговую анимацию на нужное кол. пикселей. У Zero блока выставляем overflow - visible
Шаг 14
Возвращаемся в скрипт выше и меняем путь до изображений на свой. Так же меняем кол. кадров на своё, ну и формат если вы используете png
Шаг 15
Меняем пропорции в зависимости от разрешения
Шаг 16
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
3D галерея
Tilda
Подсказки при наведении курсора
Tilda