How to use jquery or javascript to trigger the animation when it scrolls to a specified position?-CodePudding

I am a beginner in programming and would like to ask me how to implement an idea!

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). How should this idea be realized?

It turns out that I have just been in contact with the program not long ago, and I have no idea how to implement it. Thank you for your help.

.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 >
  <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 >
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

You can get the scrollHeight of article(i.e, whole height of scrollable content).
Then check if that distance is achieved by the body than trigger the animation.

If you want to trigger animation when shapes get into view than add window.innerHeight to the if condition.

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 >
  <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 >
  <div ></div>
  <div ></div>
</div>