/*! * stroll.js 1.2 - CSS scroll effects * http://lab.hakim.se/scroll-effects * MIT licensed * * Copyright (C) 2012 Hakim El Hattab, http://hakim.se */ /** * Shrink styles */ .cards { -webkit-perspective: 300px; -moz-perspective: 300px; -ms-perspective: 300px; -o-perspective: 300px; perspective: 300px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .cards li { -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .cards li.past { -webkit-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg ); -moz-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg ); -ms-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg ); -o-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg ); transform: translate3d( 0, -100px, -100px ) rotateX( -90deg ); } .cards li.future { -webkit-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg ); -moz-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg ); -ms-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg ); -o-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg ); transform: translate3d( 0, 100px, -100px ) rotateX( 90deg ); } /** * Grow styles */ .grow li { -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } .grow li.past { -webkit-transform: scale( 0.01 ); -moz-transform: scale( 0.01 ); -ms-transform: scale( 0.01 ); -o-transform: scale( 0.01 ); transform: scale( 0.01 ); } .grow li.future { -webkit-transform: scale( 0.01 ); -moz-transform: scale( 0.01 ); -ms-transform: scale( 0.01 ); -o-transform: scale( 0.01 ); transform: scale( 0.01 ); } /** * Flip styles */ .flip { -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .flip li { -webkit-transition: all 600ms ease, opacity 300ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease, opacity 300ms ease; -o-transition: all 600ms ease, opacity 300ms ease; transition: all 600ms ease, opacity 300ms ease; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; } .flip li.past { opacity: 0; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: rotateX( 80deg ); -moz-transform: rotateX( 80deg ); -ms-transform: rotateX( 80deg ); -o-transform: rotateX( 80deg ); transform: rotateX( 80deg ); } .flip li.future { opacity: 0; -webkit-transform: rotateX( -80deg ); -moz-transform: rotateX( -80deg ); -ms-transform: rotateX( -80deg ); -o-transform: rotateX( -80deg ); transform: rotateX( -80deg ); } /** * Fly styles */ .fly { -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .fly li { -webkit-transition: all 600ms ease, opacity 300ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease, opacity 300ms ease; -o-transition: all 600ms ease, opacity 300ms ease; transition: all 600ms ease, opacity 300ms ease; -webkit-transform-origin: 50% 50% -50px; -moz-transform-origin: 50% 50% -50px; -ms-transform-origin: 50% 50% -50px; -o-transform-origin: 50% 50% -50px; transform-origin: 50% 50% -50px; } .fly li.past { opacity: 0; -webkit-transform: rotateX( 180deg ); -moz-transform: rotateX( 180deg ); -ms-transform: rotateX( 180deg ); -o-transform: rotateX( 180deg ); transform: rotateX( 180deg ); } .fly li.future { opacity: 0; -webkit-transform: rotateX( -180deg ); -moz-transform: rotateX( -180deg ); -ms-transform: rotateX( -180deg ); -o-transform: rotateX( -180deg ); transform: rotateX( -180deg ); } .fly-simplified { -webkit-perspective: 300px; -moz-perspective: 300px; -ms-perspective: 300px; -o-perspective: 300px; perspective: 300px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .fly-simplified li { -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .fly-simplified li.past { -webkit-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg ); -moz-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg ); -ms-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg ); -o-transform: translate3d( 0, -100px, -100px ) rotateX( 90deg ); transform: translate3d( 0, -100px, -100px ) rotateX( 90deg ); } .fly-simplified li.future { -webkit-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg ); -moz-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg ); -ms-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg ); -o-transform: translate3d( 0, 100px, -100px ) rotateX( -90deg ); transform: translate3d( 0, 100px, -100px ) rotateX( -90deg ); } /** * Reverse fly styles */ .fly-reverse { -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .fly-reverse li { -webkit-transition: all 600ms ease, opacity 300ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease, opacity 300ms ease; -o-transition: all 600ms ease, opacity 300ms ease; transition: all 600ms ease, opacity 300ms ease; -webkit-transform-origin: 50% 50% -50px; -moz-transform-origin: 50% 50% -50px; -ms-transform-origin: 50% 50% -50px; -o-transform-origin: 50% 50% -50px; transform-origin: 50% 50% -50px; } .fly-reverse li.past { opacity: 0; -webkit-transform: rotateX( -180deg ); -moz-transform: rotateX( -180deg ); -ms-transform: rotateX( -180deg ); -o-transform: rotateX( -180deg ); transform: rotateX( -180deg ); } .fly-reverse li.future { opacity: 0; -webkit-transform: rotateX( 180deg ); -moz-transform: rotateX( 180deg ); -ms-transform: rotateX( 180deg ); -o-transform: rotateX( 180deg ); transform: rotateX( 180deg ); } /** * Skew */ .skew { -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 0% 50%; -moz-perspective-origin: 0% 50%; -ms-perspective-origin: 0% 50%; -o-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .skew li { -webkit-transition: all 600ms ease, opacity 200ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; } .skew li.past { -webkit-transform: skewY( 30deg ); -moz-transform: skewY( 30deg ); -ms-transform: skewY( 30deg ); -o-transform: skewY( 30deg ); transform: skewY( 30deg ); } .skew li.future { z-index: 0; -webkit-transform: skewY( -30deg ); -moz-transform: skewY( -30deg ); -ms-transform: skewY( -30deg ); -o-transform: skewY( -30deg ); transform: skewY( -30deg ); } /** * Helix styles */ .helix { -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .helix li { -webkit-transition: all 600ms ease, opacity 200ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease, opacity 200ms ease; -o-transition: all 600ms ease, opacity 200ms ease; transition: all 600ms ease, opacity 200ms ease; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } .helix li.past { opacity: 0; -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -ms-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } .helix li.future { opacity: 0; -webkit-transform: rotateY( -180deg ); -moz-transform: rotateY( -180deg ); -ms-transform: rotateY( -180deg ); -o-transform: rotateY( -180deg ); transform: rotateY( -180deg ); } /** * Wave styles */ .wave li { -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } .wave li.past { -webkit-transform: translateX( -70% ); -moz-transform: translateX( -70% ); -ms-transform: translateX( -70% ); -o-transform: translateX( -70% ); transform: translateX( -70% ); } .wave li.future { -webkit-transform: translateX( -70% ); -moz-transform: translateX( -70% ); -ms-transform: translateX( -70% ); -o-transform: translateX( -70% ); transform: translateX( -70% ); } /** * Fan styles */ .fan li { -webkit-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -ms-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; } .fan li.past { -webkit-transform: rotate( -60deg ); -moz-transform: rotate( -60deg ); -ms-transform: rotate( -60deg ); -o-transform: rotate( -60deg ); transform: rotate( -60deg ); } .fan li.future { -webkit-transform: rotate( 70deg ); -moz-transform: rotate( 70deg ); -ms-transform: rotate( 70deg ); -o-transform: rotate( 70deg ); transform: rotate( 70deg ); } /** * Tilt styles */ .tilt { -webkit-perspective: 800px; -moz-perspective: 800px; -ms-perspective: 800px; -o-perspective: 800px; perspective: 800px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .tilt li { position: relative; -webkit-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 300ms ease; -moz-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -ms-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 300ms ease; -o-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 300ms ease; transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 300ms ease; } .tilt li.past { opacity: 0; -webkit-transform: translateY( 100% ) translateZ(-200px); -moz-transform: translateY( 100% ) translateZ(-200px); -ms-transform: translateY( 100% ) translateZ(-200px); -o-transform: translateY( 100% ) translateZ(-200px); transform: translateY( 100% ) translateZ(-200px); } .tilt li.future { opacity: 0; -webkit-transform: translateY( -100% ) translateZ(-200px); -moz-transform: translateY( -100% ) translateZ(-200px); -ms-transform: translateY( -100% ) translateZ(-200px); -o-transform: translateY( -100% ) translateZ(-200px); transform: translateY( -100% ) translateZ(-200px); } /** * Curl styles */ .curl { -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 0% 50%; -moz-perspective-origin: 0% 50%; -ms-perspective-origin: 0% 50%; -o-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .curl li { -webkit-transition: all 600ms ease, opacity 200ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease, opacity 200ms ease; -o-transition: all 600ms ease, opacity 200ms ease; transition: all 600ms ease, opacity 200ms ease; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .curl li.past { opacity: 0; -webkit-transform: rotateY( 90deg ); -moz-transform: rotateY( 90deg ); -ms-transform: rotateY( 90deg ); -o-transform: rotateY( 90deg ); transform: rotateY( 90deg ); } .curl li.future { opacity: 0; -webkit-transform: rotateY( 90deg ); -moz-transform: rotateY( 90deg ); -ms-transform: rotateY( 90deg ); -o-transform: rotateY( 90deg ); transform: rotateY( 90deg ); } .papercut { -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 0% 0%; -moz-perspective-origin: 0% 0%; -ms-perspective-origin: 0% 0%; -o-perspective-origin: 0% 0%; perspective-origin: 0% 0%; } .papercut li { -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; } .papercut li.past { -webkit-transform: skewY( -30deg ); -moz-transform: skewY( -30deg ); -ms-transform: skewY( -30deg ); -o-transform: skewY( -30deg ); transform: skewY( -30deg ); } .papercut li.future { -webkit-transform: skewY( 30deg ); -moz-transform: skewY( 30deg ); -ms-transform: skewY( 30deg ); -o-transform: skewY( 30deg ); transform: skewY( 30deg ); } /** * Zipper styles */ .zipper li { -webkit-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -moz-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -ms-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .zipper li.past:nth-child(odd), .zipper li.future:nth-child(odd) { -webkit-transform: translateX( 80% ); -moz-transform: translateX( 80% ); -ms-transform: translateX( 80% ); -o-transform: translateX( 80% ); transform: translateX( 80% ); } .zipper li.past:nth-child(even), .zipper li.future:nth-child(even) { -webkit-transform: translateX( -80% ); -moz-transform: translateX( -80% ); -ms-transform: translateX( -80% ); -o-transform: translateX( -80% ); transform: translateX( -80% ); } /** * Fade styles */ .fade li { -webkit-transition: opacity .35s ease-in-out; -moz-transition: opacity .35s ease-in-out; -ms-transition: opacity .35s ease-in-out; -o-transition: opacity .35s ease-in-out; transition: opacity .35s ease-in-out; } .fade li.past { opacity: 0; } .fade li.future { opacity: 0; } /** * Twirl styles */ .twirl { -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .twirl li { -webkit-transition: all 600ms ease, opacity 200ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease, opacity 200ms ease; -o-transition: all 600ms ease, opacity 200ms ease; transition: all 600ms ease, opacity 200ms ease; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } .twirl li.past { opacity: 0; -webkit-transform: rotate3d( 80,-70,10,180deg ); -moz-transform: rotate3d( 80,70,10,180deg ); -ms-transform: rotate3d( 80,70,10,180deg ); -o-transform: rotate3d( 80,70,10,180deg ); transform: rotate3d( 80,70,10,180deg ); } .twirl li.future { opacity: 0; -webkit-transform: rotate3d( 80,70,10,-180deg ); -moz-transform: rotate3d( 80,70,10,-180deg ); -ms-transform: rotate3d( 80,70,10,-180deg ); -o-transform: rotate3d( 80,70,10,-180deg ); transform: rotate3d( 80,70,10,-180deg ); }