Test for a page transition on a new site. New version with support for IE: http://codepen.io/robbue/pen/tnLmH/
A Pen by Robert Bue on CodePen.
Test for a page transition on a new site. New version with support for IE: http://codepen.io/robbue/pen/tnLmH/
A Pen by Robert Bue on CodePen.
<div class="site"> | |
<div class="container"> | |
<div class="page-content"><p><strong>3D</strong> Page Flip</p></div> | |
<div class="page-content" id="new-content"><p><strong>3D</strong> Page Flip</p></div> | |
</div> | |
</div> | |
<!-- | |
New version with support for IE: http://codepen.io/robbue/pen/tnLmH/ | |
--> |
var siteW = $(window).width(); | |
var siteH = $(window).height(); | |
$("p").css({ lineHeight: siteH + 'px' }); // dirty dirty | |
TweenMax.set(".site", { perspective: 5000 }); | |
TweenMax.set(".container", { transformStyle: "preserve-3d", transformOrigin: '-0% 50%' }); | |
TweenMax.set("#new-content", { rotationY: 90, z: -siteW/2, x: siteW/2 }); | |
var tlFlip = new TimelineMax({ yoyo: true, repeat: -1, delay: 1.5, repeatDelay: 2 }); | |
tlFlip | |
.to('.site', .5, { scale: 0.8, ease: Power2.easeInOut }, "start") | |
.to('.container', .4, { rotationY: -90, z: -siteW, ease: Power2.easeInOut }, "start+=0.7") | |
.to('.site', .5, { scale: 1, ease: Power2.easeInOut }, "start+=1.2"); |
html, body { | |
height: 100%; | |
background: #333; | |
} | |
.site { | |
height: 100%; | |
} | |
.container { | |
position: relative; | |
z-index: 2; | |
width: 100%; | |
height: 100%; | |
-webkit-transform-style : preserve-3d; | |
-moz-transform-style : preserve-3d; | |
-o-transform-style : preserve-3d; | |
-ms-transform-style : preserve-3d; | |
transform-style : preserve-3d; | |
} | |
.page-content { | |
position: absolute; | |
z-index: 2; | |
width: 100%; | |
height: 100%; | |
background: #1abc9c; | |
} | |
#new-content { | |
background: #f1c40f; | |
z-index: 1; | |
} | |
.page-content p { | |
position: absolute; | |
width: 100%; | |
text-align: center; | |
font-family: Montserrat, sans-serif; | |
font-size: 75px; | |
text-transform: uppercase; | |
color: #fff; | |
font-weight: 400; | |
margin: 0; | |
} | |
#new-content p { | |
color: #010101; | |
} | |
.page-content p strong { | |
font-weight: 700; | |
} |