Page Transition JQM-cd1.4.2

by HYEONGJINKIM

HTML

<link rel="stylesheet" href="http://dan-silver.github.io/ElementTransitions.js/build/elementTransitions.css">
<script src="http://dan-silver.github.io/ElementTransitions.js/src/js/elementTransitions.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jgrowl/1.2.13/jquery.jgrowl.css">
<script src="//cdn.jsdelivr.net/jgrowl/1.2.13/jquery.jgrowl.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://rawgithub.com/hakimel/Avgrund/master/js/avgrund.js"></script>
<script src="http://labs.voronianski.com/media/js/jquery.avgrund.js"></script>
<link rel="stylesheet" href="http://labs.voronianski.com/jquery.avgrund.js/avgrund.css">
<!--<div id="index" data-role="page">    
    <div data-role="header">
        <h1>jQM-router and backbone</h1>
    </div>    
    <div data-role="content">
        <a data-role="button" href="#detail?id=1">Detail 1</a>
        <a data-role="button" href="#detail?id=2">Detail 2</a>
        <a data-role="button" href="#detail?id=3">Detail 3</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>Footer</h4>
    </div>    
</div>-->
<div id="page1" data-role="page">
    <div data-role="header">
        <h1>Page 1</h1>
    </div>
    <div data-role="content">
        <a href="#" id="show" class="button left">Show it</a>
        <p>Go to <a href="#page2" data-transition="mytransition">page 2</a>.</p>
        <div class="et-wrapper et-rotate" et-in="rotateCarouselBottomIn" et-out="rotateCarouselBottomOut ontop">
            <div class="et-page" style="background: #0ac2d2;">
                <h2>Page 1</h2>
            </div>
            <div class="et-page" style="background: #f68dbb;">
               ...

CSS

body {
    font-family:'Lato', Calibri, Arial, sans-serif;
    padding: 50px;
}
.et-wrapper {
    width: 200px;
    height: 170px;
    float: left;
    margin: 15px;
}
.et-page {
    padding: 8px;
}

.ui-mobile-viewport{
    position: relative;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
	display: block;
	overflow: hidden;
}

.ui-page{
    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;
}

.ui-page-active{
    visibility: visible;
	z-index: 1;    
}

.avgrund-overlay {
    width: 115%;
    left: -7%;
}
<style type='text/css'>
/* your custom CSS \*/
</style>
<!-- access to the HEAD element -->
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
<style>
</style>

JavaScript

(function( $ ) {
    //$.jGrowl.defaults.pool = 5;
    var aPreset = [{
        leave: "moveToLeft",
        enter: "moveFromRight"
    }, {
        leave: "moveToRight",
        enter: "moveFromLeft"
    }, {
        leave: "moveToBottom",
        enter: "moveFromTop"
    }, {
        leave: "fade",
        enter: "moveFromRight ontop"
    }, {
        leave: "fade",
        enter: "moveFromLeft ontop"
    }, {
        leave: "fade",
        enter: "moveFromBottom ontop"
    }, {
        leave: "fade",
        enter: "moveFromTop ontop"
    }, {
        leave: "moveToLeftFade",
        enter: "moveFromRightFade"
    }, {
        leave: "moveToRightFade",
        enter: "moveFromLeftFade"
    }, {
        leave: "moveToTopFade",
        enter: "moveFromBottomFade"
    }, {
        leave: "moveToBottomFade",
        enter: "moveFromTopFade"
    }, {
        leave: "moveToLeftEasing ontop",
        enter: "moveFromRight"
    }, {
        leave: "moveToRightEasing ontop",
        enter: "moveFromLeft"
    }, {
        leave: "moveToTopEasing ontop",
        enter: "moveFromBottom"
    }, {
        leave: "moveToBottomEasing ontop",
        enter: "moveFromTop"
    }, {
        leave: "scaleDown",
        enter: "moveFromRight ontop"
    }, {
        leave: "scaleDown",
        enter: "moveFromLeft ontop"
    }, {
        leave: "scaleDown",
        enter: "moveFromBottom ontop"
    }, {
        leave: "scaleDown",
        enter: "moveFromTop ontop"
    }, {
        leave: "scaleDown",
        enter: "scaleUpDown delay300"
    }, {
        leave: "scaleDownUp",
        enter: "scaleUp delay300"
    }, {
        leave: "moveToLeft ontop",
        enter: "scaleUp"
    }, {
        leave: "moveToRight ontop",
        enter: "scaleUp"
    }, {
        leave: "moveToTop ontop",
        enter: "scaleUp"
    }, {
        leave: "moveToBottom ontop",
        enter: "scaleUp"
    }, {
        leave: "scaleDownCenter",
        enter: "scaleUpCenter delay400"
    }, {
       ...