SEO и реклама
Разработка сайтов
UX/UI Дизайн
API Интеграции
Моб. разработка
- Дизайн моб. приложений
Узнать стоимость проекта
Код помогает добавить анимацию плавного движения элементов по оси X или Y без использания SBS анимации сразу для нескольких элементов в зеро-блок
Автоматический скролл элементов в зеро-блок без пошаговой анимации
Высококачественные материалы, прочная липучка, стильный крой.
Инструкция
Добавьте несколько шейпов в редакторе вашего зеро-блок в ряд с небольшим отступом
Присвойте .class каждому элементу в блоке "scrol1"
Вставьте код в блок "Другое" - Т123 в подвал вашего сайта
Если нужно в разные стороны как в примере запустить скрол, второму ряду элементов присвойте .class "scrol2" и уберите минус в коде
Введите значение общего времени в обе стороны, например: 50 секунд
Код для вставки (Движение вправо/влево):
Код написан на коленке, используйте осторожно.
<!-- Автоматический скролл элементов в зеро-блок без пошаговой анимации | youx.agency -->
<!-- https://youx.agency/avtomaticheskij-skroll-galerei-v-zero-blok -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const elements = document.querySelectorAll('.scrol1');
if (elements.length > 0) {
const frames = [
{ transform: 'translateX(0)', offset: 0 },
{ transform: 'translateX(300px)', offset: 0.5 }, // середина — нижняя точка
{ transform: 'translateX(0)', offset: 1 } // возвращаемся вверх
];
elements.forEach(el => {
el.animate(frames, {
duration: 40000, // Общее время на полный цикл вниз + вверх
iterations: Infinity,
easing: 'ease-in-out' // плавное ускорение и замедление
});
});
}
});
</script>Код для вставки (Движение вниз/вверх):
Код написан на коленке, используйте осторожно.
<!-- Автоматический скролл элементов в зеро-блок без пошаговой анимации | youx.agency -->
<!-- https://youx.agency/avtomaticheskij-skroll-galerei-v-zero-blok -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const elements = document.querySelectorAll('.scrol1');
if (elements.length > 0) {
const frames = [
{ transform: 'translateY(0)', offset: 0 },
{ transform: 'translateY(300px)', offset: 0.5 }, // середина — нижняя точка
{ transform: 'translateY(0)', offset: 1 } // возвращаемся вверх
];
elements.forEach(el => {
el.animate(frames, {
duration: 40000, // Общее время на полный цикл вниз + вверх
iterations: Infinity,
easing: 'ease-in-out' // плавное ускорение и замедление
});
});
}
});
</script>