Vextor-ltd
@Vextor-ltd
Webdeveloper

Как сделать, чтобы объект перемещался при скролле, покачиваясь из стороны в сторону?

Пытаюсь сделать следующее применить анимацию и :
...
&__ufo {
	position: absolute;
	top: 20px;
	right: 0;
	object-fit: cover;
	pointer-events: none;
}
&__ufo--anim {
	animation: ufo-rotate 2s ease-out infinite;
}
@keyframes ufo-rotate {
	0% {
		transform: rotate(0deg) scale(0.8);
	}
	50% {
		transform: rotate(15deg) scale(1);
	}
	100% {
		transform: rotate(0deg) scale(0.8);
	}
}
...


window.addEventListener('scroll', (e) => {
...
    if (wrapperScrollTop < windowHeight) {
        ufo.classList.add('heaven__ufo--anim');
        ufo.style.transform = `translateX(-${(scrollTop - windowHeight) * speed}%)`;        
    }
...


Не работает. Если присвоить элементу класс `heaven__ufo--anim` в html-е, то срабатывает только css-анимация, а JS нет.

Получается через rotate сделать только в JS:
ufo.style.transform = `translateX(-${(scrollTop - windowHeight) * speed}%) rotate(${(scrollTop - windowHeight) * 0.02}deg)`;

Но в этом случае объект совершает поворот на протяжении всего события, а нужна другая логика (см. выше - animation: ufo-rotate 2s ease-out infinite;)

Как можно этого добиться?
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы