向下滚动时出现动画

页面滚动到图层位置 图片出现

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script>

$(window).scroll(function () {
    var _ismobile = false;
    var windowTop = $(window).scrollTop();
    var windowBottom = windowTop + $(window).height();
    var showNum = !_ismobile ? 4 : 16;
    $('.ani-view').each(function(){
        var pageQ1 = $(this).offset().top + $(this).height() / showNum;
        var pageQ3 = $(this).offset().top  + $(this).height() / 1;
        if( ( pageQ1 <= windowBottom ) && ( pageQ3 >= windowTop ) ){
            if( $(this).hasClass("fade-in-down") ) $(this).addClass('fadeInDown');
            if( $(this).hasClass("fade-in-left") )  $(this).addClass('fadeInLeft');
            if( $(this).hasClass("fade-in-right") )  $(this).addClass('fadeInRight');        

        }else {
            // if( $(this).hasClass('fadeInDown') ) $(this).removeClass(' fadeInDown');
            // if( $(this).hasClass('fadeInLeft') ) $(this).removeClass('fadeInLeft');
            // if( $(this).hasClass('fadeInRight') ) $(this).removeClass(' fadeInRight');
            if( $(this).hasClass('fadeInDown') ) $(this).removeClass('ani-view fade-in-down fadeInDown');
            if( $(this).hasClass('fadeInLeft') ) $(this).removeClass('ani-view fade-in-left fadeInLeft');
            if( $(this).hasClass('fadeInRight') ) $(this).removeClass('ani-view fade-in-right fadeInRight');
        }
    });

});
</script>
<style>
@charset "utf-8";
/*  css animation  */
.trans {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.ind-fr1{
    position: relative;
    margin: 55px 110px 0 110px;
    width: 268px;
    height: 398px;
    overflow: hidden;
}
/* page animation  */
.ani-view {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}
.ani-view.fade-in-left {
    opacity: 0;
    opacity: 1\0/IE9;

    transform: translateX(-10px);

}
.ani-view.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}</style>
</head>

<body>
<div style="height:1300px;"></div>



<div class="ind-fr1 fr ani-view fade-in-left">

                            <div class="con">

                                <img src="./files/img7.jpg" width="224" height="398">

                            </div>

                            <div class="bot">

                                <img src="./files/bg6.png" width="224" height="67">

                            </div>

                         

                        </div>
</body>
</html>

 

posted @ 2017-04-14 10:22  自由无风  阅读(821)  评论(0)  编辑  收藏  举报