本文章参考 AOS.JS 插件,下面将附上个人用法，我是没有分离的项目，基于jq,bootstap搭建的PC官网，运用这个插件，可以不用Jq 插件

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>

html 应用===>data-aos="fade-up"

  <!--让艺术学习不孤单---------------------------------------------------------------------------------------------->

      <div class="art_home_happy" data-aos="fade-up">
          <div class="art_home_happy_title pub_title" id="dowebok">
              让艺术学习不孤单
          </div>
          <div class="art_home_happy_desc">
              描述性的文字
          </div>
          <div class="art_home_happy_content">
              <video src="./images/video/painting_video_02.mp4" controls="controls" autoplay="autoplay"
                     class="art_home_happy_content_video"/>
          </div>
      </div>

效果

https://www.xyhtml5.com/examples/aos/

jq 页面滚动动画css3效果