Using Jquery.touchswipe plug-in to achieve mobile phone-side scene sliding switching effect

Use jquery's TouchSwipe plugin to listen for touch-slip events, combined with CSS3 to achieve mobile phone-side scene sliding transitions. It is best to test the code on the phone, or use the mouse to simulate sliding on the PC side.

1. HTML code:

<div class= "Container" >    <div class= "page page0 page_current" >        
Note: You need to introduce jquery-1.11.1.min.js and Jquery.touchSwipe.min.js files
2. CSS Code
. container {position:relative;    width:100%;    height:100%;    -webkit-perspective:1200px;    -moz-perspective:1200px;  perspective:1200px; The position of the perspective container is relative, adding a 1200 pixel perspective to it text-align:center;}.    Container. Page {color: #fff;    Text-align:center;    margin:0;    padding:0;    width:100%;    height:100%;    Position:absolute;    top:0;    left:0;    Visibility:hidden;    Overflow:hidden;    -webkit-backface-visibility:hidden;    -moz-backface-visibility:hidden;    Backface-visibility:hidden;    -webkit-transform:translate3d (0, 0, 0);    -moz-transform:translate3d (0, 0, 0);    Transform:translate3d (0, 0, 0);    -webkit-transform-style:preserve-3d;    -moz-transform-style:preserve-3d; Transform-style:preserve-3d;}.    page_current{visibility:visible!important; Z-index:1;}.    Container. page h1 {margin:0; padding:0;}
. fa-angle-double-up{position:fixed;    bottom:20px;    left:49%;    Color: #FFF;    font-size:22px;    Animation:blink_up 1.2s Infinite;    -moz-animation:blink_up 1.2s Infinite;    -webkit-animation:blink_up 1.2s Infinite;    -o-animation:blink_up 1.2s Infinite; Z-index:2;}        @keyframes blink_up {0, 30% {opacity:0;    Transform:translate (0,10px);        } 60% {opacity:1;    Transform:translate (0,0);        } 100% {opacity:0;    Transform:translate (0,-8px); }}/* Page Effect */
. pt-page-movetotop {
-webkit-animation:movetotop. 6s ease both;
-moz-animation:movetotop. 6s ease both;
Animation:movetotop. 6s ease both;
Z-index:1!important;
}

. pt-page-movefromtop {
-webkit-animation:movefromtop. 6s ease both;
-moz-animation:movefromtop. 6s ease both;
Animation:movefromtop. 6s ease both;
Z-index:2!important;
}

. pt-page-movetobottom {
-webkit-animation:movetobottom. 6s ease both;
-moz-animation:movetobottom. 6s ease both;
Animation:movetobottom. 6s ease both;
Z-index:1!important;
}

. pt-page-movefrombottom {
-webkit-animation:movefrombottom. 6s ease both;
-moz-animation:movefrombottom. 6s ease both;
Animation:movefrombottom. 6s ease both;
Z-index:2!important;
}

@-webkit-keyframes Movefromtop {
from {
-webkit-transform:translatey (-100%);
}
}
@-moz-keyframes Movefromtop {
from {
-moz-transform:translatey (-100%);
}
}
@keyframes Movefromtop {
from {
Transform:translatey (-100%);
}
}

@-webkit-keyframes Movefrombottom {
from {
-webkit-transform:translatey (100%);
}
}
@-moz-keyframes Movefrombottom {
from {
-moz-transform:translatey (100%);
}
}
@keyframes Movefrombottom {
from {
Transform:translatey (100%);
}
}


@-webkit-keyframes Movetotop {
to {
-webkit-transform:translatey ( -20%) scale (0.8);
}
}
@-moz-keyframes Movetotop {
to {
-moz-transform:translatey ( -20%) scale (0.8);
}
}
@keyframes Movetotop {
to {
Transform:translatey ( -20%) scale (0.8);
}
}

@-webkit-keyframes Movetobottom {
to {
-webkit-transform:translatey (20%) scale (0.8);
}
}
@-moz-keyframes Movetobottom {
to {
-moz-transform:translatey (20%) scale (0.8);
}
}
@keyframes Movetobottom {
to {
Transform:translatey (20%) scale (0.8);
}
}
/* Page Turn effect */
Note: The phone-side CSS code compatibility problem: You need to add a prefix to the CSS style to be compatible with different browsers
Example code:
. fa-angle-double-up{position:fixed;    bottom:20px;    left:49%;    Color: #FFF;    font-size:22px;    Animation:blink_up 1.2s Infinite;    -moz-animation:blink_up 1.2s Infinite;    -webkit-animation:blink_up 1.2s Infinite;    -o-animation:blink_up 1.2s Infinite; Z-index:2;}        @keyframes blink_up {0, 30% {opacity:0;    Transform:translate (0,10px);        } 60% {opacity:1;    Transform:translate (0,0);        } 100% {opacity:0;    Transform:translate (0,-8px);        }}@-moz-keyframes blink_up {0, 30% {-moz-opacity:0;    -moz-transform:translate (0,10px);        } 60% {-moz-opacity:1;    -moz-transform:translate (0,0);        } 100% {-moz-opacity:0;    -moz-transform:translate (0,-8px);        }}@-webkit-keyframes blink_up {0, 30% {-webkit-opacity:0;    -webkit-transform:translate (0,10px);        } 60% {-webkit-opacity:1;    -webkit-transform:translate (0,0);    }100% {-webkit-opacity:0;    -webkit-transform:translate (0,-8px);        }}@-o-keyframes blink_up {0, 30% {-o-opacity:0;    -o-transform:translate (0,10px);        } 60% {-o-opacity:1;    -o-transform:translate (0,0);        } 100% {-o-opacity:0;    -o-transform:translate (0,-8px); }}
　　
3. JS Code
$ (document). Ready (function () {var nowpage = 0;            Add Event Listener $ (". Container") to the largest box. Swipe ({swipe:function (event, direction, distance, duration, Fingercount) {                if (Direction = = "Up") {//swipe up page nowpage = nowpage + 1;         $ (". Page"). EQ ((nowpage-1)%5). addclass ("Pt-page-movetotop");     Current display page swipe up to move out of Windows $ (". Page"). EQ ((nowpage%5)). addclass ("Page_current pt-page-movefrombottom");       The next page is displayed and swipe up to Windows $ (". Container"). Swipe (' disable '); Swipe plug-in setTimeout (function () {$ (". Page") is forbidden when the page is sliding animation. EQ ((nowpage-1)%5). Removeclass ("Pa      Ge_current pt-page-movetotop ");           Remove the slide animation effect $ (". Page"). EQ ((nowpage%5)). Removeclass ("Pt-page-movefrombottom");     Remove the slide animation effect $ (". Container"). Swipe (' Enable ');            Page swipe animation at the end of the re-enable swipe plug-in},600);     } else if (direction = = "Down") {//Swipe down page if (nowpage==0) {       Nowpage = Nowpage +4 When the current page is the first page;                Console.log ("a");                }else{nowpage = nowpage-1;      } $ (". Page"). EQ ((nowpage+1)%5). addclass ("Pt-page-movetobottom");     The current Display page slides down the window $ (". Page"). EQ ((nowpage%5)). addclass ("Page_current pt-page-movefromtop");                The next page displays and slides down to Windows $ (". Container"). Swipe (' disable ');                Console.log (nowpage%5);                Console.log ((nowpage+1)%5);                Console.log (Nowpage);                    SetTimeout (function () {$ (". Page"). EQ ((nowpage+1)%5). Removeclass ("Page_current pt-page-movetobottom");                    $ (". Page"). EQ ((nowpage%5)). Removeclass ("Pt-page-movefromtop");                $ (". Container"). Swipe (' Enable ');            },600); }        }    });});
Add a swipe event listener to the class name container div element by using the jquery TouchSwipe plugin and switch the scene based on the direction of the slide event.
Using Jquery.touchswipe plug-in to achieve mobile phone-side scene sliding switching effect