我是編程初學者，想問我如何實作一個想法！
我通過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>
uj5u.com熱心網友回復：
您可以獲得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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/388816.html
標籤：javascript 查询 css