Как управлять Gif-анимацией на сайте? Хочу использовать гифки на сайте. Алгоритм поведения таков:
1. Пользователь скроллит до гифки, через 1 секунду она запускается.
2. Проигрывает три раза и сама останавливается.
3. Под гифкой должны быть кнопки "старт" и "стоп".
Спрайты не нравятся. Хотелось бы управлять настоящим Gif-файлом.
Есть ли какие-то решения?

Предыдущий
вопрос Следующий
вопрос

Для управления Gif-анимацией на сайте, можно использовать JavaScript. Ниже приведен пример кода, который позволяет реализовать требуемый функционал:

HTML:

<div class="gif-container">
<img src="animation.gif" class="gif" alt="Gif animation">
<button class="start-btn">Start</button>
<button class="stop-btn">Stop</button>
</div>

JavaScript:

// Находим необходимые элементы
const gifContainer = document.querySelector('.gif-container');
const gif = gifContainer.querySelector('.gif');
const startBtn = gifContainer.querySelector('.start-btn');
const stopBtn = gifContainer.querySelector('.stop-btn');
let playCount = 0;
// Функция для запуска гифки
function playGif() {
gif.style.display = 'block';
gif.src = gif.src;
playCount++;
}
// Функция для остановки гифки
function stopGif() {
gif.style.display = 'none';
gif.src = gif.src;
playCount = 0;
}
// Запуск гифки после 1 секунды скролла
window.addEventListener('scroll', function() {
if (window.scrollY > gifContainer.offsetTop - window.innerHeight) {
setTimeout(playGif, 1000);
}
});
// Проигрывание три раза и остановка
gif.addEventListener('load', function() {
if (playCount < 3) {
playGif();
} else {
stopGif();
}
});
// Обработчики кнопок "старт" и "стоп"
startBtn.addEventListener('click', playGif);
stopBtn.addEventListener('click', stopGif);

С помощью данного кода, вы сможете управлять Gif-анимацией на вашем сайте, включая условия запуска и остановки анимации, а также кнопки для управления вручную. Надеюсь, данное решение подойдет для ваших потребностей.