如何使用 jquery 或 javascript 在 animation 滚动到指定的 Z4757FE07FD492A8BE0ZE6A76 时触发

Question

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

I made the animation effect through CSS, but I don't want the animation to be triggered at the beginning, but only when I scroll to a certain position (such as the mark on the picture). 这个想法应该如何实现？

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

 .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文章的滚动高度（即，可滚动内容的整个高度）。
然后检查身体是否达到了该距离，而不是触发 animation。

如果您想在形状进入视野时触发 animation，则将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>