3D анимация в Tilda по скролу с использованием любого видео

3D анимация в Tilda по скролу

3D анимация в Tilda по скролу — это хороший способ сделать ваш сайт более динамичным и привлекательным для посетителей. Этот инновационный метод позволяет интегрировать трехмерные анимации в ваш тильда сайт, которые реагируют на прокрутку страницы. И совсем не обязательно разрабатывать 3D модели, можно брать их из любого видео ролика. Давайте рассмотрим, как это реализовать, используя видео и небольшой скрипт.

3D анимация в тильде на основе видео ролика

Одним из основных инструментов для создания 3D анимации в Tilda по скролу является использование видео в качестве 3d модели. По мере прокрутки страницы пользователем видео на фоне начинает перематываться вперед или назад.

 Замените статичные изображения на видеоролики, которые реагируют на движение пользователя. Это не только придает вашему сайту современный вид, но и обогащает визуальный контент.

Как создать 3D анимацию в Tilda по скролу

В этой главе мы дадим вам пошаговую инструкцию, которая позволит вам внедрить на тильда сайт 3D анимацию по скролу. Все, что вам потребуется – это видео, zero block и java script код. Мы будем использовать эту анимацию на самом первом блоке страницы:

1. Найдите видео, которое будете использовать в качестве анимации, например, на pexels. Используйте небольшие видео длительностью до 10 секунд в хорошем разрешении
2. Перейдите в LF Cloud (хостинг файлов с прямой ссылкой на скачивание) и загрузите в него ваше видео
3. Сохраните куда-нибудь полученную ссылку на видео
4. В Тильде создайте zero block перед всеми остальными блоками
5. Откройте редактор блока и удалите все его содержимое
6. В поле «WINDOW CONTAINER HEIGHT, %» введите цифру 100
7. В меню «POSITION AND OVERFLOW» в свойстве «POSITION» выберите «Fixed»
8. В свойстве «z-index» пропишите «-1»
9. Добавьте в блок html элемент (Add HTML)
10. Нажмите на «+CONTAINER» выберите «Window Container»
11. В свойствах «AXIS X» и «AXIS Y» укажите «Center»
12.  В свойствах «W» и «H» выберите проценты вместо пикселей
13. Откройте html элемент и скопируйте в него следующий код:

<video id="video">
    <source src="https://lifehackov.ru/uploads/pexels-yauheni-vasilevich-7101913 (1080p).mp4" type="video/mp4">
 </video>

14. В атрибут «src» вставьте ссылку на ваше виде из хостинга файлов
15. Сохраните изменения и выйдите из зеро блока

После этого блока с 3D анимацией вы можете создать любой блок, сделать его высоту сто процентной и удалить цвет фона. Тогда это блок окажется поверх блока с анимацией и будет прокручиваться вместе с ним.

1. После всех блоков на странице создайте html блок Т123
2. Скопируйте в него следующий код и опубликуйте страницу:

Вывод: Делаем ваш сайт живым с 3D анимацией в Tilda по скролу

3D анимация в Tilda по скролу — это простой и эффективный способ сделать ваш сайт более привлекательным и интерактивным. Используя видео и другие инструменты, вы можете добавить глубину и движение, которые зацепят ваших посетителей. Помните об оптимизации производительности и не бойтесь экспериментировать с дизайном. Создайте уникальный пользовательский опыт, который оставит яркое впечатление.

Смотрите обучающие видео уроки по Тильде тут

Читайте также: Пагинация в Tilda

Важно!

Обязательно прочитайте инструкцию по установке модификации.
Она может отличаться от инструкции из видео!

В личном кабинете укажите сайты, для которых мы активируем все модификации.