Article From:https://segmentfault.com/q/1010000011696936
Question:

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:

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

if(scrollTop>xxx){
    Execution}else if () {Execution}else{}

JS

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) {
                id.classList.add('animate');
            }
        }
    }
    window.onscroll = function(){
        animateInPage()
    }
    animateInPage();

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.
http://www.w3school.com.cn/cs…

Answer 3:

The simplest way is to follow

http://jsbin.com/lekubip/edit…

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

Similar Posts:

    None Found

Leave a Reply

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