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