Попытка создать анимированный элемент (div) появляется на фоне при загрузке страницы, а затем при прокрутке (первая анимация исчезает, а вторая вставляется).
Как новичок, мне удалось создать одну простую, изменчивую анимацию (код ниже), но я не могу понять, как сделать ее плавной, как заставить ее исчезнуть при прокрутке вниз и как разместить другую анимацию вместо этой один.
Хотя есть много вопросов, на которые мне нужно найти ответы,
я спрашиваю -
Как снова использовать анимацию в другом месте? Допустим, высота vh равна 700px, поэтому после того, как пользователь прокрутил эти 700px, я хочу, чтобы анимация снова появилась в верхнем правом углу.
function bgAnimation () {
let element = document.getElementById("bg");
let pos = -800;
let id = setInterval(frame, 1);
function frame () {
if (pos == -300) {clearInterval(id);} else {
pos++;
element.style.right = pos + 'px';
element.style.top = pos + 'px';
element.style.paddingLeft = '150px';
}
}
}
window.addEventListener("load", bgAnimation);
<body id="body">
<section>
<div id="cvs">
<div id="bg"></div>
</div>
</section>
</body>