diff --git a/css/stroll.css b/css/stroll.css index 583e6af..afa5b60 100644 --- a/css/stroll.css +++ b/css/stroll.css @@ -3,7 +3,7 @@ * http://lab.hakim.se/scroll-effects * MIT licensed * - * Created by Hakim El Hattab, http://hakim.se + * Copyright (C) 2012 Hakim El Hattab, http://hakim.se */ diff --git a/css/stroll.min.css b/css/stroll.min.css index 2ee33e5..d1fb200 100644 --- a/css/stroll.min.css +++ b/css/stroll.min.css @@ -1,10 +1,16 @@ /*! - * stroll.js 1.1 - CSS scroll effects + * stroll.js 1.2 - CSS scroll effects * http://lab.hakim.se/scroll-effects * MIT licensed * - * Created by Hakim El Hattab, http://hakim.se - */.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%} + * Copyright (C) 2012 Hakim El Hattab, http://hakim.se + */.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 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{-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)} @@ -12,6 +18,10 @@ .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)} .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)} @@ -34,7 +44,7 @@ .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{-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} +.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;-moz-perspective-origin:0;-ms-perspective-origin:0;-o-perspective-origin:0;perspective-origin:0}