Пример работы

Анимация с обратным действием

Модификатор добавляет анимацию при наведении курсора на шейп, которая воспроизводится в обратном порядке после смещения курсора
Коллекция / Анимация с обратным действием
1. Первым делом необходимо подготовить раскадровку из вашего видео.
Это можно сделать либо рендером покадровой анимации, либо разделить готовое видео на кадры через конвертер mp4 в jpg. Например online-converter
2. После разделения видео на кадры, их необходимо сжать и сократить количество, рекомендую использовать 50-100 кадров, чтобы не перегружать сайт.
3. Далее переименовываем кадры, задавая им номер, начиная от 1 (должны получиться такие названия 1.jpg, 2.jpg, 3.jpg и т.д.)
4. После подготовки кадров, загружаем их на хостинг или на GitHub
Для этого, проходим регистрацию (если у вас еще нет аккаунта), после чего нажимаем на «+» в верхнем меню кнопка «Create new…) и в выпадающем списке выбираем первый пункт «New repository»
Далее пишем название папки в графе «Repository name» и жмем кнопку «Create repository»
Нажимаем на кнопку «uploading an existing file» и загружаем кадры.
После загрузки всех кадров, внизу нажимаем на кнопку «Commit changes», чтобы изображения сохранились.
5. Дальше формируем ссылку на папку с изображениями:
Для этого, находясь на странице после загрузки изображений, копируем ссылку из поисковой строки - https://github.com/tistols/mods/upload
Её нужно будет поправить на такого рода ссылку - https://raw.githubusercontent.com/ tistols/mods/main/
где raw.githubusercontent.com - ссылка на хостинг гитхаба
tistols - название вашего профиля
mods - название папки (repositiory)
для проверки можно указать название одного из кадров и открыть в новой вкладке в браузере: https://raw.githubusercontent.com/ tistols/mods/main/1.jpg
6. Далее переходим на Тильду и создаем зеро блок, в котором добавляем html-элемент.
Копируем в него код и задаем параметры для видео: ширину, высоту, радиус скругления и размеры для мобильных устройств.
Скопировать код
7. После этого добавляем блок T123 и копируем в него второй код.
В этом коде необходимо заменить ссылку на вашу папку в GitHub, её мы делали на 5-м этапе инструкции.
Также заменяем количество кадров.
Скопировать код
При необходимости добавить несколько анимаций на одну страницу, нужно скопировать html-элемент, заменить в нем photoCanvas например на такой photoCanvasOne
И во втором коде (блок T123) продублировать строчку со ссылкой и также заменить photoCanvas, ссылку и количество кадров.

<!-- TS13 - Модификация для Тильды. Анимация с обратным действием https://mod.tistols.com/obratnaya-animatsiya -->
<canvas id="photoCanvas" width="470" height="470"></canvas>
<style>
#photoCanvas {
    border-radius:10px;
}
@media screen and (max-width: 480px) {
#photoCanvas {
width:120px;
height:120px;
}
}</style>

<!-- TS13 - Модификация для Тильды. Анимация с обратным действием https://mod.tistols.com/obratnaya-animatsiya -->
<script>
function createCanvasAnimation(canvasId, baseURL, photoCount) {
    const photoURLs = Array.from({ length: photoCount }, (_, i) => `${baseURL}${i + 1}.jpg`);
    const canvas = document.getElementById(canvasId);
    const context = canvas.getContext('2d');
    let currentPhotoIndex = 0;
    let intervalId = null;
    let isAnimating = false;
    let isAnimatingForward = true;
    let animationCompleted = false;

    function preloadImages(urls, callback) {
        let loadedImages = [];
        let imagesToLoad = urls.length;

        urls.forEach(function(url, index) {
            const img = new Image();
            img.src = url;
            img.onload = function() {
                loadedImages[index] = img; 
                imagesToLoad--;

                if (imagesToLoad === 0) {
                    callback(loadedImages);
                }
            };
        });
    }
    function displayPhoto(images, index) {
        const img = images[index];
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
    }

    function startAnimationForward(images) {
        if (!isAnimating || !isAnimatingForward) {
            stopAnimation(); 
            isAnimating = true;
            isAnimatingForward = true; 
            animationCompleted = false; 

            intervalId = setInterval(function() {
                displayPhoto(images, currentPhotoIndex);
                currentPhotoIndex = (currentPhotoIndex + 1) % images.length;

                if (currentPhotoIndex === images.length - 1) {
                    stopAnimation();
                    animationCompleted = true; 
                }
            }, 24);
        }
    }

    function startAnimationBackward(images) {
        if (!isAnimating || isAnimatingForward) {
            stopAnimation();
            isAnimating = true;
            isAnimatingForward = false; 

            intervalId = setInterval(function() {
                displayPhoto(images, currentPhotoIndex);
                currentPhotoIndex = (currentPhotoIndex - 1 + images.length) % images.length;

                if (currentPhotoIndex === 0) {
                    stopAnimation();
                }
            }, 24);
        }
    }

    function stopAnimation() {
        clearInterval(intervalId);
        intervalId = null;
        isAnimating = false;
    }

    preloadImages(photoURLs, function(loadedImages) {
        displayPhoto(loadedImages, currentPhotoIndex);

        canvas.addEventListener('mouseenter', function() {
            if (!isAnimating || !isAnimatingForward) {
                startAnimationForward(loadedImages);
            }
        });

        canvas.addEventListener('mouseleave', function() {
            if (animationCompleted || isAnimatingForward) {
                startAnimationBackward(loadedImages);
            }
        });
    });
}

// Здесь заменяем название элемента, адрес к картинкам и количество кадров
createCanvasAnimation('photoCanvas', 'https://raw.githubusercontent.com/tistols/naushniki/main/', 40);
createCanvasAnimation('photoCanvasOne', 'https://raw.githubusercontent.com/tistols/vr1/main/', 40);
</script>
Добавьте шаблон страницы к себе в проект.
  1. Нажмите на кнопку "Создать новую страницу"
  2. Пролистайте до конца
  3. В "Указать ID страницы" напишите номер 54829113
Вам также может быть интересно: