Question

试图创建动画元素（div）会在页面加载时出现在背景上，然后在滚动时出现（第一个动画消失，第二个幻灯片进入）。

作为一个初学者，我设法创建了一个简单的，断断续续的动画（如下代码），但是我不知道如何使它平滑，如何使其在向下滚动时消失以及如何放置另一个动画而不是此动画。一个。

尽管我需要找到许多问题的答案，我要问的是-

如何在其他地方再次使用动画？假设vh高度为700像素，因此在用户滚动了700像素后，我希望动画从右上角再次滑入。

    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>

如何创建一个Interactivs JS（香草）背景动画

0 个答案: