Slide the site specified location to animate div

<! DOCTYPE HTML > 
< HTML > 
< head > 
< style >  
.anim-Show 
{ 
width : 100px ; 
height : 100px ; 
background : Red ; 
position : relative ; 
Animation-name : mymove ; 
Animation-DURATION : 5S ; / * 5S that the implementation of the animation time, do not write 0 or no animation * / 

/ * compatible debugging if animation-name execution, -wekit-animation-name is not executed * / 
-webkit-animation-name :mymove ; 
-webkit-Animation-DURATION : 2S ; / * 5S represented animation execution time, write 0 or no animation * / 
} 

@keyframes mymove / * corresponding to the animation-name, which is performed by the animation * / 
{ 
from {Top : 200px ; } / * initial position performs animation * / 
to { Top : 0px ; } / * end of the animation position * / 
0% { 
opacity : 0.1 ;  / * initial state of opacity to 10% * / 
} 
50% { 
Opacity : 0.5;  / * Intermediate transparency state% 50 * / 
} 
100% { 
Opacity : . 1 ;  / * end of the opaque state * / 
} 
} 

@ -webkit-keyframes mymove / * corresponds -webkit-animation-name, which is performed by the animation * / 
{ 
from {left : 200px ; } / * execute the initial position of the animation * / 
to { left : 0px ; } / * end of the animation location * / 
} 
</ style > 
</ head > 
< body > 
    <div style="height: 2000px;">

    </div>

    <div class="anim">
        11111
    </div>
    
    <div style="height: 2000px;">

    </div>

    <div class="anim">
        11111
    </div>


    
    <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
        AnimvarScroll monitoring add animation//

        = $(".anim");//触发遍历所用的类

        setTimeout(function(){

            $(window).scroll(function() {

                roll();

            })

            $(window).resize(function() {

                roll();

            })

            roll();

        },6)

        function roll() {

            var oHeight = $(window).height();

            var ScrVal = $(window).scrollTop();

            anim.each(function(i) {

                if (ScrVal + oHeight > anim.eq(i).offset().top - 50 ){

                    anim.eq(i).addClass("anim-show");

                }

            })

        }
    </script>
</body>
</html>

 

Guess you like

Origin www.cnblogs.com/junyi-bk/p/11327386.html