滚动到指定位置时如何使用jquery或javascript触发动画？

Question

我是一个编程初学者，想问我如何实现一个想法！

我通过CSS做了动画效果，但是我不希望动画一开始就触发，而是只有在滚动到某个位置（比如图片上的标记）时才触发。 这个想法应该如何实现？

原来我不久前才接触这个程序，不知道怎么实现。感谢您的帮助。

.demo {
  display: flex;
  justify-content: center;
  width: 500px;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
  animation-name: drift;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
  animation-name: drift2;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes drift {
  0% {
    -webkit-transform: translateY(20px);
  }
  30% {
    -webkit-transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(30px);
  }
}

@keyframes drift2 {
  0% {
    -webkit-transform: translateY(-10px);
  }
  30% {
    -webkit-transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(50px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="article">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis vitae provident, rerum accusamus similique nobis, fugiat modi ex soluta cumque eum perspiciatis. Sunt modi incidunt magnam animi libero asperiores veritatis eligendi ad minus praesentium!
    Nesciunt, modi? Veniam rem aspernatur ab laboriosam mollitia accusamus expedita maiores vitae provident sit tempora, saepe reprehenderit aliquid autem reiciendis quo eveniet sed perferendis voluptatem minima impedit nemo commodi quos! Dicta sapiente
    laudantium, debitis quos expedita dignissimos quas cum totam, magni iure recusandae? Pariatur vel sapiente amet nesciunt blanditiis qui doloremque velit officiis, ex, provident asperiores, nam iste iusto repellendus quod aperiam. Repudiandae atque
    sed modi aliquam possimus. Optio quod aliquam repellendus voluptate iste atque culpa! Consequuntur dolorum laborum, optio similique, vitae doloribus maxime soluta quae saepe minima ipsum nobis iure eos nesciunt sunt velit modi nemo consectetur, illum
    dolore excepturi totam veniam. Ipsum reiciendis eveniet esse illum culpa quod excepturi earum accusamus omnis voluptatum iste, nemo iure quam a tenetur expedita possimus consectetur cum voluptate perferendis vero. Minus corporis accusamus, ab doloribus
    pariatur esse officia molestias atque earum ullam cupiditate placeat sequi repellat iusto tempora ex maxime. Rem, vel aliquid. Amet ad possimus quae. Deserunt consequuntur quas tenetur ad at nihil a vero beatae harum. Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Blanditiis vitae provident, rerum accusamus similique nobis, fugiat modi ex soluta cumque eum perspiciatis. Sunt modi incidunt magnam animi libero asperiores veritatis eligendi ad minus praesentium! Nesciunt, modi? Veniam rem aspernatur
    ab laboriosam mollitia accusamus expedita maiores vitae provident sit tempora, saepe reprehenderit aliquid autem reiciendis quo eveniet sed perferendis voluptatem minima impedit nemo commodi quos! Dicta sapiente laudantium, debitis quos expedita dignissimos
    quas cum totam, magni iure recusandae? Pariatur vel sapiente amet nesciunt blanditiis qui doloremque velit officiis, ex, provident asperiores, nam iste iusto repellendus quod aperiam. Repudiandae atque sed modi aliquam possimus. Optio quod aliquam
    repellendus voluptate iste atque culpa! Consequuntur dolorum laborum, optio similique, vitae doloribus maxime soluta quae saepe minima ipsum nobis iure eos nesciunt sunt velit modi nemo consectetur, illum dolore excepturi totam veniam. Ipsum reiciendis
    eveniet esse illum culpa quod excepturi earum accusamus omnis voluptatum iste, nemo iure quam a tenetur expedita possimus consectetur cum voluptate perferendis vero. Minus corporis accusamus, ab doloribus pariatur esse officia molestias atque earum
    ullam cupiditate placeat sequi repellat iusto tempora ex maxime. Rem, vel aliquid. Amet ad possimus quae. Deserunt consequuntur quas tenetur ad at nihil a vero beatae harum.iste, nemo iure quam a tenetur expedita possimus consectetur cum voluptate
    perferendis vero. Minus corporis accusamus, ab doloribus pariatur esse officia molestias atque earum ullam cupiditate placeat sequi repellat iusto tempora ex maxime. Rem, vel aliquid. Amet ad possimus quae. Deserunt consequuntur quas tenetur ad at
    nihil a vero beatae harum.iste, nemo iure quam a tenetur expedita possimus consectetur cum voluptate perferendis vero. Minus corporis accusamus, ab doloribus pariatur esse officia molestias atque earum ullam cupiditate placeat sequi repellat iusto
    tempora ex maxime. Rem, vel aliquid. Amet ad possimus quae. Deserunt consequuntur quas tenetur ad at nihil a vero beatae harum.iste, nemo iure quam a tenetur expedita possimus consectetur cum voluptate perferendis vero. Minus corporis accusamus, ab
    doloribus pariatur esse officia molestias atque earum ullam cupiditate placeat sequi repellat iusto tempora ex maxime. Rem, vel aliquid. Amet ad possimus quae. Deserunt consequuntur quas tenetur ad at nihil a vero beatae harum.
  </p>
</div>
<div class="demo">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

Answer 1

您可以获得文章的scrollHeight（即可滚动内容的整个高度）。
然后检查身体是否达到了该距离而不是触发动画。

如果您想在形状进入视野时触发动画，而不是将window.innerHeight 减去if 条件。

let articleClass = document.querySelector(".article");
let box1 = document.querySelector(".box1");
let box2 = document.querySelector(".box2");


document.addEventListener('scroll', animationTrigger);

function animationTrigger() {
  if (window.scrollY >= articleClass.scrollHeight) {
    box1.style.animationName = "drift";
    box2.style.animationName = "drift2";
  }
}

.demo {
  display: flex;
  justify-content: center;
  width: 500px;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  margin-bottom: 1000px;
}

@keyframes drift {
  0% {
    -webkit-transform: translateY(20px);
  }
  30% {
    -webkit-transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(30px);
  }
}

@keyframes drift2 {
  0% {
    -webkit-transform: translateY(-10px);
  }
  30% {
    -webkit-transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(50px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="article">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis vitae provident, rerum accusamus similique nobis, fugiat modi ex soluta cumque eum perspiciatis. Sunt modi incidunt magnam animi libero asperiores veritatis eligendi ad minus praesentium!
    Nesciunt, modi? Veniam rem aspernatur ab laboriosam mollitia accusamus expedita maiores vitae provident sit tempora, saepe reprehenderit aliquid autem reiciendis quo eveniet sed perferendis voluptatem minima impedit nemo commodi quos! Dicta sapiente
    laudantium, debitis quos expedita dignissimos quas cum totam, magni iure recusandae? Pariatur vel sapiente amet nesciunt blanditiis qui doloremque velit officiis, ex, provident asperiores, nam iste iusto repellendus quod aperiam. Repudiandae atque
    sed modi aliquam possimus. Optio quod aliquam repellendus voluptate iste atque culpa! Consequuntur dolorum laborum, optio similique, vitae doloribus maxime soluta quae saepe minima ipsum nobis iure eos nesciunt sunt velit modi nemo consectetur, illum
    dolore excepturi totam veniam. Ipsum reiciendis eveniet esse illum culpa quod excepturi earum accusamus omnis voluptatum iste, nemo iure quam a tenetur expedita possimus consectetur cum voluptate perferendis vero. Minus corporis accusamus, ab doloribus
    pariatur esse officia molestias atque earum ullam cupiditate placeat sequi repellat iusto tempora ex maxime. Rem, vel aliquid. Amet ad possimus quae. Deserunt consequuntur quas tenetur ad at nihil a vero beatae harum. Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Blanditiis vitae provident, rerum accusamus similique nobis, fugiat modi ex soluta cumque eum perspiciatis. Sunt modi incidunt magnam animi libero asperiores veritatis eligendi ad minus praesentium! Nesciunt, modi? Veniam rem aspernatur
    ab laboriosam mollitia accusamus expedita maiores vitae provident sit tempora, saepe reprehenderit aliquid autem reiciendis quo eveniet sed perferendis voluptatem minima impedit nemo commodi quos! Dicta sapiente laudantium, debitis quos expedita dignissimos
    quas cum totam, magni iure recusandae? Pariatur vel sapiente amet nesciunt blanditiis qui doloremque velit officiis, ex, provident asperiores, nam iste iusto repellendus quod aperiam. Repudiandae atque sed modi aliquam possimus. Optio quod aliquam
    repellendus voluptate iste atque culpa! Consequuntur dolorum laborum, optio similique, vitae doloribus maxime soluta quae saepe minima ipsum nobis iure eos nesciunt sunt velit modi nemo consectetur, illum dolore excepturi totam veniam. Ipsum reiciendis
    eveniet esse illum culpa quod excepturi earum accusamus omnis voluptatum iste, nemo iure quam a tenetur expedita possimus consectetur cum voluptate perferendis vero. Minus corporis accusamus, ab doloribus pariatur esse officia molestias atque earum
    ullam cupiditate placeat sequi repellat iusto tempora ex maxime. Rem, vel aliquid. Amet ad possimus quae. Deserunt consequuntur quas tenetur ad at nihil a vero beatae harum.iste, nemo iure quam a tenetur expedita possimus consectetur cum voluptate
    perferendis vero. Minus corporis accusamus, ab doloribus pariatur esse officia molestias atque earum ullam cupiditate placeat sequi repellat iusto tempora ex maxime. Rem, vel aliquid. Amet ad possimus quae. Deserunt consequuntur quas tenetur ad at
    nihil a vero beatae harum.iste, nemo iure quam a tenetur expedita possimus consectetur cum voluptate perferendis vero. Minus corporis accusamus, ab doloribus pariatur esse officia molestias atque earum ullam cupiditate placeat sequi repellat iusto
    tempora ex maxime. Rem, vel aliquid. Amet ad possimus quae. Deserunt consequuntur quas tenetur ad at nihil a vero beatae harum.iste, nemo iure quam a tenetur expedita possimus consectetur cum voluptate perferendis vero. Minus corporis accusamus, ab
    doloribus pariatur esse officia molestias atque earum ullam cupiditate placeat sequi repellat iusto tempora ex maxime. Rem, vel aliquid. Amet ad possimus quae. Deserunt consequuntur quas tenetur ad at nihil a vero beatae harum.
  </p>
</div>
<div class="demo">
  <div class="box1"></div>
  <div class="box2"></div>
</div>