当滚动条滚动当前页时，内容从上、下、左、右中某个方向进去页面

$(function(){
    if (screen.width > 1180) {
        $("html").removeClass("root61");
    } else {
        $("html").addClass("root61");
    }

    function show(obj,className){
        var clientH=document.documentElement.clientHeight||document.body.clientHeight;
        var scrollT=$(this).scrollTop();
        for(var i=0;i<obj.length;i++){
            var introH=$(obj[i]).height();
            if($(obj[i]).offset().top-scrollT+introH>0&&$(obj[i]).offset().top-scrollT<clientH){
                $(obj[i]).addClass(className);
            }
        }
         $(document).on("scroll",function(){
         var scrollT=$(this).scrollTop();
         for(var i=0;i<obj.length;i++){
         var conH=$(obj[i]).height();
         if($(obj[i]).offset().top-scrollT+introH>0&&$(obj[i]).offset().top-scrollT<clientH){
         $(obj[i]).addClass(className);
         }
         }
         })
    }
    show($(".intro_leftM"),"left_move");
    show($(".intro_rightM"),"right_move");
    show($(".intro_topM"),"top_move");
    show($(".intro_bottomM"),"bottom_move");
});

 

.left_move {
    -webkit-animation: left_move 2s linear;
    -moz-animation: left_move 2s linear;
    -o-animation: left_move 2s linear;
    -ms-animation: left_move 2s linear;
    animation: left_move 2s linear;
}

@keyframes left_move {
    0% {
        transform: translate(-30px, 0);
        opacity: 0
    }
    100% {
        transform: translate(0px, 0);
        opacity: 1
    }
}

@-webkit-keyframes left_move {
    0% {
        -webkit-transform: translate(-30px, 0);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0px, 0);
        opacity: 1
    }
}

@-moz-keyframes left_move {
    0% {
        -moz-transform: translate(-30px, 0);
        opacity: 0
    }
    100% {
        -moz-transform: translate(0px, 0);
        opacity: 1
    }
}

@-ms-keyframes left_move {
    0% {
        -ms-transform: translate(-30px, 0);
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        -ms-transform: translate(0px, 0);
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@-o-keyframes left_move {
    0% {
        -o-transform: translate(-30px, 0);
        opacity: 0;
    }
    100% {
        -o-transform: translate(0px, 0);
        opacity: 1;
    }
}

.right_move {
    -webkit-animation: right_move 2s linear;
    -ms-animation: right_move 2s linear;
    -moz-animation: right_move 2s linear;
    -o-animation: right_move 2s linear;
    animation: right_move 2s linear;
}

@keyframes right_move {
    0% {
        transform: translate(30px, 0);
        opacity: 0
    }
    100% {
        transform: translate(0px, 0);
        opacity: 1
    }
}

@-webkit-keyframes right_move {
    0% {
        -webkit-transform: translate(30px, 0);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0px, 0);
        opacity: 1
    }
}

@-moz-keyframes right_move {
    0% {
        -moz-transform: translate(30px, 0);
        opacity: 0
    }
    100% {
        -moz-transform: translate(0px, 0);
        opacity: 1
    }
}

@-ms-keyframes right_move {
    0% {
        -ms-transform: translate(30px, 0);
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        -ms-transform: translate(0px, 0);
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@-o-keyframes right_move {
    0% {
        -o-transform: translate(30px, 0);
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        -o-transform: translate(0px, 0);
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

.top_move {
    -webkit-animation: top_move 2s linear;
    -ms-animation: top_move 2s linear;
    -moz-animation: top_move 2s linear;
    -o-animation: top_move 2s linear;
    animation: top_move 2s linear;
}

@keyframes top_move {
    0% {
        transform: translate(0px, 30px);
        opacity: 0
    }
    100% {
        transform: translate(0px, 0px);
        opacity: 1
    }
}

@-webkit-keyframes top_move {
    0% {
        -webkit-transform: translate(0px, 30px);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        opacity: 1
    }
}

@-moz-keyframes top_move {
    0% {
        -moz-transform: translate(0px, 30px);
        opacity: 0
    }
    100% {
        -moz-transform: translate(0px, 0px);
        opacity: 1
    }
}

@-o-keyframes top_move {
    0% {
        -o-transform: translate(0px, 30px);
        opacity: 0
    }
    100% {
        -o-transform: translate(0px, 0px);
        opacity: 1
    }
}

@-ms-keyframes top_move {
    0% {
        -ms-transform: translate(0px, 30px);
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        -ms-transform: translate(0px, 0px);
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

.bottom_move {
    -webkit-animation: bottom_move 2s linear;
    -moz-animation: bottom_move 2s linear;
    -o-animation: bottom_move 2s linear;
    animation: bottom_move 2s linear;
}

@keyframes bottom_move {
    0% {
        transform: translate(0px, -30px);
        opacity: 0
    }
    100% {
        transform: translate(0px, 0px);
        opacity: 1
    }
}

@-webkit-keyframes bottom_move {
    0% {
        -webkit-transform: translate(0px, -30px);
        opacity: 0
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        opacity: 1
    }
}

@-moz-keyframes bottom_move {
    0% {
        -moz-transform: translate(0px, -30px);
        opacity: 0
    }
    100% {
        -moz-transform: translate(0px, 0px);
        opacity: 1
    }
}

@-o-keyframes bottom_move {
    0% {
        -o-transform: translate(0px, -30px);
        opacity: 0
    }
    100% {
        -o-transform: translate(0px, 0px);
        opacity: 1
    }
}

@-ms-keyframes bottom_move {
    0% {
        -ms-transform: translate(0px, -30px);
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        -ms-transform: translate(0px, 0px);
        opacity: 1;
        filter: alpha(opacity=100);
    }
}