$(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);
}
}