Page Transition JQM-cd1.4.2-MIN

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>
<div id="page1" data-role="page">
    <div data-role="header">
        <h1>Page 1</h1>
    </div>
    <div data-role="content">
        <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;">
                <h2>Page 2</h2>
            </div>
            <div class="et-page" style="background: #60d7a9;">
                <h2>Page 3</h2>
            </div>
            <div class="et-page" style="background: #fdc162;">
                <h2>Page 4</h2>
            </div>
            <div class="et-page" style="background: #fd6a62;">
                <h2>Page 5</h2>
            </div>
        </div>
    </div>
</div>
<!-- <div id="page2" data-role="page" class="et-page"> -->
<div id="page2" data-role="page">
    <div data-role="header">
        <h1>Page 2</h1>
    </div>
    <div data-role="content">
        <p>Go back to <a href="#page1" data-rel="back">page 1</a>.</p>
    </div>
</div>

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;    
}

.underglow{
    /** To edit this background, follow this link:
http://svgeneration.com/generate/Underglow?background=ffffff&color1=f04848&color2=467aeb&color3=85e66c&color4=f26f2e&blur=20&
*/background-size:100% 800px;background-repeat:no-repeat;
background-color:...

JavaScript

var viewport = document.createElement("meta");
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1');
document.getElementsByTagName('head')[0].appendChild(viewport);
(function(e){var t=[{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"},{leave:"rotateRightSideFirst",enter:"moveFromRight delay20 ontop"},{leave:"rotateLeftSideFirst",enter:"moveFromLeft delay20 ontop"},{leave:"rotateTopSideFirst",enter:"moveFromTop delay20 ontop"},{leave:"rotateBottomSideFirst",enter:"moveFromBottom delay20 ontop"},{leave:"flipOutRight",enter:"flipInLeft delay500"},{leave:"flipOutLeft",enter:"flipInRight delay500"},{leave:"flipOutTop",enter:"flipInBottom delay500"},{leave:"flipOutBottom",enter:"flipInTop delay500"},{leave:"rotateFall...