Mini Shell
/*!
* 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 );
}
Zerion Mini Shell 1.0