Я пытаюсь придать всем 4 изображениям эффект анимированного масштабирования (эффект увеличения или «увеличения»).
Я также использую тему Elementor Pro – Ocean.
Первый элемент контролируется CSS для создания эффекта увеличения.
Проблема:
Теперь происходит то, что код анимирует только первый элемент, а не все четыре.
Другие изображения не реагируют на код.
Нужно ли мне вносить изменения для всех элементов?
Мой код:
JavaScript
var element = document.getElementById('sea');
var elementHeight = element.clientHeight;
document.addEventListener('scroll', animate_sea);
function inView() {
var windowHeight = window.innerHeight;
var scrollY = window.scrollY || window.pageYOffset;
var scrollPosition = scrollY + windowHeight;
var elementPosition = element.getBoundingClientRect().top + scrollY + elementHeight;
if (scrollPosition > elementPosition) {
return true;
}
}
function animate_sea() {
if (inView()) {
element.classList.add('animate_sea');
}
}
CSS
.animate_sea
{
animation: animate_sea 1.5s ease-in-out forwards;
}
@keyframes animate_sea
{
0% { transform: scale(1); }
60% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1.1); }
}
Подробнее здесь: https://stackoverflow.com/questions/798 ... ges-in-css
