Article From:

Many H5 pages are like this, when scrolling to a certain position when the animation begins to play, and then the animation is finished, not circular play, how to achieve it? Can you provide a reference for a small demo?

Answer 0:

Listens the rolling event $(window).Scroll (), determines the scroll height scrollTop (), and executes the function.

    Execution}else if () {Execution}else{}


window.onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//scrollTopIt is the height of the roller when triggering the roller event.If (scrollTop> XX) {Execution}}

Answer 1:
    function animateInPage () {
        var ids = ['id1', 'id2', 'id3', 'id4'],
            body_top = document.body.scrollTop;
        for (var i = 0, len = ids.length; i < len; i++) {
            var id = document.getElementById(ids[i]),
                offset_top = id.offsetTop;
            if (body_top >= offset_top - 300) {
    window.onscroll = function(){

animateIt is to write the CSS animation you want in CSS.

Answer 2:

animateThere is a state pause, when the scroll event is triggered, the state pause can be removed.…

Answer 3:

The simplest way is to follow…

If you want more complicated animation, such as animation, the same is true.

Leave a Reply

Your email address will not be published. Required fields are marked *