├── README.md ├── README.txt ├── css ├── demo.css ├── fonts │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ ├── icomoon.woff │ └── license.txt └── style.css ├── images ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg ├── 9.jpg ├── gradient.png └── noisebg.png ├── index.html └── js ├── jquery.stackslider.js └── modernizr.custom.63321.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | StackSlider 3 | ========= 4 | 5 | An experimental image slider that flips through images in 3D. Two stacks resemble image piles where images will be lifted off from and rotated to the center for viewing. 6 | 7 | [article on Codrops](http://tympanus.net/codrops/?p=12566) 8 | 9 | [demo](http://tympanus.net/Development/StackSlider) 10 | 11 | Licensed under the MIT License -------------------------------------------------------------------------------- /README.txt: -------------------------------------------------------------------------------- 1 | Created by Codrops 2 | Please read about our license: http://tympanus.net/codrops/licensing/ 3 | 4 | Illustrations by Isaac Montemayor 5 | http://cargocollective.com/isaac317 6 | http://dribbble.com/isaac317 -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:400,700|Englebert); 3 | 4 | *, 5 | *:after, 6 | *:before { 7 | -webkit-box-sizing: border-box; 8 | -moz-box-sizing: border-box; 9 | box-sizing: border-box; 10 | padding: 0; 11 | margin: 0; 12 | } 13 | 14 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 15 | .clearfix:before, 16 | .clearfix:after { 17 | content: " "; 18 | display: table; 19 | } 20 | 21 | .clearfix:after { 22 | clear: both; 23 | } 24 | 25 | .clearfix { 26 | *zoom: 1; 27 | } 28 | 29 | body { 30 | font-family: 'Lato', Calibri, Arial, sans-serif; 31 | background: #f6b93c url(../images/noisebg.png); 32 | font-weight: 400; 33 | font-size: 15px; 34 | color: #333; 35 | } 36 | 37 | a { 38 | color: #555; 39 | text-decoration: none; 40 | } 41 | 42 | .container { 43 | width: 100%; 44 | height: 100%; 45 | position: relative; 46 | } 47 | 48 | .clr { 49 | clear: both; 50 | padding: 0; 51 | height: 0; 52 | margin: 0; 53 | } 54 | 55 | .main, 56 | .container > header { 57 | width: 80%; 58 | max-width: 1100px; 59 | margin: 0 auto; 60 | position: relative; 61 | padding: 0 30px 50px 30px; 62 | } 63 | 64 | .container > header { 65 | padding: 30px; 66 | } 67 | 68 | .container > header h1 { 69 | font-size: 34px; 70 | line-height: 38px; 71 | margin: 0; 72 | font-weight: 700; 73 | color: #dc4e2a; 74 | float: left; 75 | text-shadow: 0 1px 1px rgba(255,255,255,0.6); 76 | } 77 | 78 | .container > header h1 span { 79 | display: block; 80 | font-size: 20px; 81 | font-weight: 300; 82 | color: #fff; 83 | text-shadow: 0 1px 1px rgba(0,0,0,0.2); 84 | } 85 | 86 | .container > header p { 87 | float: right; 88 | padding-top: 10px; 89 | color: #dc4e2a; 90 | text-shadow: 0 1px 1px rgba(255,255,255,0.6); 91 | } 92 | 93 | .main p { 94 | text-align: center; 95 | padding-top: 60px; 96 | color: #a07419; 97 | text-shadow: 0 1px 1px rgba(255,255,255,0.6); 98 | } 99 | 100 | 101 | /* Header Style */ 102 | .codrops-top { 103 | line-height: 24px; 104 | font-size: 11px; 105 | background: #fff; 106 | background: rgba(255, 255, 255, 0.5); 107 | text-transform: uppercase; 108 | z-index: 9999; 109 | position: relative; 110 | box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 111 | } 112 | 113 | .codrops-top a { 114 | padding: 0px 10px; 115 | letter-spacing: 1px; 116 | color: #333; 117 | display: inline-block; 118 | } 119 | 120 | .codrops-top a:hover { 121 | background: rgba(255,255,255,0.8); 122 | color: #000; 123 | } 124 | 125 | .codrops-top span.right { 126 | float: right; 127 | } 128 | 129 | .codrops-top span.right a { 130 | float: left; 131 | display: block; 132 | } 133 | 134 | /* Demo Buttons Style */ 135 | .codrops-demos { 136 | float: right; 137 | padding-top: 10px; 138 | } 139 | 140 | .codrops-demos a { 141 | display: inline-block; 142 | margin: 10px; 143 | color: #666; 144 | font-weight: 700; 145 | line-height: 30px; 146 | border-bottom: 4px solid transparent; 147 | } 148 | 149 | .codrops-demos a:hover { 150 | color: #000; 151 | border-color: #000; 152 | } 153 | 154 | .codrops-demos a.current-demo, 155 | .codrops-demos a.current-demo:hover { 156 | color: #aaa; 157 | border-color: #aaa; 158 | } 159 | 160 | .support-note { 161 | clear: both; 162 | } 163 | 164 | .support-note span{ 165 | color: #ac375d; 166 | font-size: 16px; 167 | display: none; 168 | font-weight: bold; 169 | text-align: center; 170 | padding: 5px 0; 171 | } -------------------------------------------------------------------------------- /css/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/css/fonts/icomoon.eot -------------------------------------------------------------------------------- /css/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 1 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 17 | -------------------------------------------------------------------------------- /css/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/css/fonts/icomoon.ttf -------------------------------------------------------------------------------- /css/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/css/fonts/icomoon.woff -------------------------------------------------------------------------------- /css/fonts/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/ 2 | License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/ -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('demo.css'); 2 | 3 | @font-face { 4 | font-family: 'icomoon'; 5 | src:url('fonts/icomoon.eot'); 6 | src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), 7 | url('fonts/icomoon.svg#icomoon') format('svg'), 8 | url('fonts/icomoon.woff') format('woff'), 9 | url('fonts/icomoon.ttf') format('truetype'); 10 | font-weight: normal; 11 | font-style: normal; 12 | } 13 | 14 | .js .st-stack-raw { 15 | display: none; 16 | } 17 | 18 | .st-wrapper { 19 | width: 100%; 20 | height: 500px; 21 | position: relative; 22 | margin: 0 auto; 23 | -webkit-perspective: 1200px; 24 | -webkit-perspective-origin : 50% 100%; 25 | -moz-perspective: 1200px; 26 | -moz-perspective-origin : 50% 100%; 27 | -o-perspective: 1200px; 28 | -o-perspective-origin : 50% 100%; 29 | -ms-perspective: 1200px; 30 | -ms-perspective-origin : 50% 100%; 31 | perspective: 1200px; 32 | perspective-origin : 50% 100%; 33 | } 34 | 35 | .st-stack { 36 | position: absolute; 37 | height: 10px; 38 | bottom: 0px; 39 | background-image: url(../images/gradient.png); 40 | background-image: -webkit-linear-gradient(top, #fff 50%, #e7ae38 50%); 41 | background-image: -moz-linear-gradient(top, #fff 50%, #e7ae38 50%); 42 | background-image: -o-linear-gradient(top, #fff 50%, #e7ae38 50%); 43 | background-image: -ms-linear-gradient(top, #fff 50%, #e7ae38 50%); 44 | background-image: linear-gradient(to bottom, #fff 50%, #e7ae38 50%); 45 | -webkit-background-size: 5px 5px; 46 | -moz-background-size: 5px 5px; 47 | background-size: 5px 5px; 48 | background-position: bottom center; 49 | } 50 | 51 | .st-stack:before { 52 | content: ''; 53 | position: absolute; 54 | width: 140%; 55 | left: -20%; 56 | bottom: -10px; 57 | height: 20px; 58 | z-index: -1; 59 | background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%); 60 | background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%); 61 | background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%); 62 | background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%); 63 | background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%); 64 | } 65 | 66 | .st-stack-left { 67 | left: 0px; 68 | } 69 | 70 | .st-stack-right { 71 | right: 0px; 72 | } 73 | 74 | .st-wrapper .st-title, 75 | .st-wrapper nav { 76 | position: absolute; 77 | width: 100%; 78 | left: 0; 79 | bottom: 0; 80 | text-align: center; 81 | -webkit-touch-callout: none; 82 | -webkit-user-select: none; 83 | -khtml-user-select: none; 84 | -moz-user-select: none; 85 | -ms-user-select: none; 86 | user-select: none; 87 | } 88 | 89 | .st-wrapper .st-title { 90 | padding: 0 10% 60px; 91 | -webkit-backface-visibility: hidden; 92 | -moz-backface-visibility: hidden; 93 | -o-backface-visibility: hidden; 94 | -ms-backface-visibility: hidden; 95 | backface-visibility: hidden; 96 | } 97 | 98 | .st-wrapper .st-title h2 { 99 | padding: 0 20px; 100 | font-size: 28px; 101 | color: #dc4e2a; 102 | font-weight: 400; 103 | letter-spacing: 3px; 104 | font-family: 'Englebert', Arial, sans-serif; 105 | line-height: 38px; 106 | text-shadow: 0 1px 1px rgba(255,255,255,0.6); 107 | } 108 | 109 | .st-wrapper .st-title h3 { 110 | font-size: 15px; 111 | font-weight: 700; 112 | letter-spacing: 1px; 113 | color: #fff; 114 | text-shadow: 1px 1px 1px rgba(0,0,0,0.1); 115 | } 116 | 117 | .st-wrapper nav span { 118 | color: transparent; 119 | position: absolute; 120 | width: 40px; 121 | height: 40px; 122 | left: 50%; 123 | bottom: 0; 124 | cursor: pointer; 125 | } 126 | 127 | .st-wrapper nav span:first-child { 128 | margin-left: -45px; 129 | } 130 | 131 | .st-wrapper nav span:last-child { 132 | margin-left: 5px; 133 | } 134 | 135 | .st-wrapper nav span:before { 136 | font-family: 'icomoon'; 137 | font-style: normal; 138 | speak: none; 139 | font-weight: normal; 140 | line-height: 1; 141 | font-size: 30px; 142 | line-height: 40px; 143 | text-align: center; 144 | -webkit-font-smoothing: antialiased; 145 | position: absolute; 146 | width: 100%; 147 | height: 100%; 148 | left: 0; 149 | color: #fff; 150 | background: #dc4e2a; 151 | border-radius: 50%; 152 | cursor: pointer; 153 | text-shadow: 0 1px 1px rgba(255,255,255,0.5); 154 | box-shadow: 0 1px 1px rgba(0,0,0,0.1); 155 | } 156 | 157 | .st-wrapper nav span:first-child:before { 158 | content: "\4c"; 159 | } 160 | 161 | .st-wrapper nav span:last-child:before { 162 | content: "\52"; 163 | } 164 | 165 | .st-wrapper nav span:hover:before { 166 | color: #333; 167 | } 168 | 169 | .st-wrapper .st-item { 170 | position: absolute; 171 | -webkit-transform-style : preserve-3d; 172 | -moz-transform-style : preserve-3d; 173 | -o-transform-style : preserve-3d; 174 | -ms-transform-style : preserve-3d; 175 | transform-style : preserve-3d; 176 | -webkit-backface-visibility: hidden; 177 | -moz-backface-visibility: hidden; 178 | -o-backface-visibility: hidden; 179 | -ms-backface-visibility: hidden; 180 | backface-visibility: hidden; 181 | } 182 | 183 | .st-wrapper .st-item.st-center { 184 | -webkit-transform: rotateZ(0deg) rotateY(0deg); 185 | -moz-transform: rotateZ(0deg) rotateY(0deg); 186 | -o-transform: rotateZ(0deg) rotateY(0deg); 187 | -ms-transform: rotateZ(0deg) rotateY(0deg); 188 | transform: rotateZ(0deg) rotateY(0deg); 189 | } 190 | 191 | .st-wrapper .st-item.st-right, 192 | .st-wrapper .st-item.st-rightflow { 193 | opacity: 0; 194 | -webkit-transform: rotateZ(90deg) rotateY(-90deg); 195 | -moz-transform: rotateZ(90deg) rotateY(-91deg); 196 | -o-transform: rotateZ(90deg) rotateY(-90deg); 197 | -ms-transform: rotateZ(90deg) rotateY(-90deg); 198 | transform: rotateZ(90deg) rotateY(-91deg); 199 | pointer-events: none; 200 | } 201 | 202 | .st-wrapper .st-item.st-left, 203 | .st-wrapper .st-item.st-leftflow { 204 | opacity: 0; 205 | -webkit-transform: rotateZ(-90deg) rotateY(90deg); 206 | -moz-transform: rotateZ(-90deg) rotateY(91deg); 207 | -o-transform: rotateZ(-90deg) rotateY(90deg); 208 | -ms-transform: rotateZ(-90deg) rotateY(90deg); 209 | transform: rotateZ(-90deg) rotateY(91deg); 210 | pointer-events: none; 211 | } 212 | .st-wrapper .st-item.st-rightflow, 213 | .st-wrapper .st-item.st-leftflow, 214 | .st-wrapper .st-item.st-center { 215 | opacity: 1; 216 | } 217 | 218 | .st-wrapper .st-item a, 219 | .st-wrapper .st-item img { 220 | border: none; 221 | max-width: 100%; 222 | display: block; 223 | } 224 | 225 | .st-wrapper .st-item a { 226 | background: #fff; 227 | box-shadow: 0 0 0 9px #fff, 0 1px 3px 9px rgba(0,0,0,0.3); 228 | } 229 | 230 | @media screen and (max-width: 1310px){ 231 | .st-wrapper .st-item { 232 | width: 300px; 233 | } 234 | .st-wrapper { 235 | height: 460px; 236 | } 237 | } 238 | 239 | @media screen and (max-width: 1050px){ 240 | .st-wrapper .st-item { 241 | width: 260px; 242 | } 243 | .st-wrapper { 244 | height: 380px; 245 | } 246 | } 247 | 248 | @media screen and (max-width: 935px){ 249 | .st-wrapper .st-item { 250 | width: 240px; 251 | } 252 | .st-wrapper { 253 | height: 380px; 254 | } 255 | } 256 | 257 | @media screen and (max-width: 880px){ 258 | .st-wrapper .st-item { 259 | width: 220px; 260 | } 261 | .st-wrapper .st-title { 262 | bottom: 280px; 263 | } 264 | .st-wrapper { 265 | height: 420px; 266 | } 267 | } 268 | 269 | @media screen and (max-width: 740px){ 270 | .st-wrapper .st-item { 271 | width: 200px; 272 | } 273 | .st-wrapper .st-title { 274 | bottom: 240px; 275 | } 276 | .st-wrapper { 277 | height: 370px; 278 | } 279 | } 280 | 281 | @media screen and (max-width: 650px){ 282 | .st-stack { 283 | display: none; 284 | } 285 | .st-wrapper nav { 286 | bottom: 220px; 287 | } 288 | } 289 | 290 | @media screen and (max-width: 450px){ 291 | .st-wrapper .st-item { 292 | width: 200px; 293 | } 294 | .st-wrapper .st-title { 295 | bottom: 150px; 296 | padding-left: 0px; 297 | padding-right: 0px; 298 | } 299 | .st-wrapper .st-title h2 { 300 | font-size: 22px; 301 | line-height: 32px; 302 | } 303 | .st-wrapper nav { 304 | bottom: 140px; 305 | } 306 | .st-wrapper { 307 | height: 300px; 308 | } 309 | } 310 | 311 | -------------------------------------------------------------------------------- /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/1.jpg -------------------------------------------------------------------------------- /images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/10.jpg -------------------------------------------------------------------------------- /images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/11.jpg -------------------------------------------------------------------------------- /images/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/12.jpg -------------------------------------------------------------------------------- /images/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/13.jpg -------------------------------------------------------------------------------- /images/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/14.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/3.jpg -------------------------------------------------------------------------------- /images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/4.jpg -------------------------------------------------------------------------------- /images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/5.jpg -------------------------------------------------------------------------------- /images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/6.jpg -------------------------------------------------------------------------------- /images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/7.jpg -------------------------------------------------------------------------------- /images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/8.jpg -------------------------------------------------------------------------------- /images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/9.jpg -------------------------------------------------------------------------------- /images/gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/gradient.png -------------------------------------------------------------------------------- /images/noisebg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StackSlider/778ed3b9963a9cae2bf41c07b292a80cf30ffbaa/images/noisebg.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | StackSlider: A Fun 3D Image Slider 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 |
21 | 22 | « Previous Demo: Simple Effects for Drop-Down Lists 23 | 24 | 25 | Illustrations by Isaac Montemayor 26 | 27 | Back to the Codrops Article 28 | 29 | 30 |
31 | 32 |
33 | 34 |

StackSliderA fun 3D image slider

35 |

Best viewed in WebKit browsers!

36 |
37 | Sorry, only modern browsers 38 |
39 | 40 |
41 | 42 |
43 | 44 | 60 |

Tip: to see a continuous flow, keep your mouse pressed on the navigation arrows.

61 |
62 | 63 |
64 | 65 | 66 | 75 | 76 | -------------------------------------------------------------------------------- /js/jquery.stackslider.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jquery.stackslider.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2012, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( $, window, undefined ) { 12 | 13 | 'use strict'; 14 | 15 | /* 16 | * debouncedresize: special jQuery event that happens once after a window resize 17 | * 18 | * latest version and complete README available on Github: 19 | * https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js 20 | * 21 | * Copyright 2011 @louis_remi 22 | * Licensed under the MIT license. 23 | */ 24 | var $event = $.event, 25 | $special, 26 | resizeTimeout; 27 | 28 | $special = $event.special.debouncedresize = { 29 | setup: function() { 30 | $( this ).on( "resize", $special.handler ); 31 | }, 32 | teardown: function() { 33 | $( this ).off( "resize", $special.handler ); 34 | }, 35 | handler: function( event, execAsap ) { 36 | // Save the context 37 | var context = this, 38 | args = arguments, 39 | dispatch = function() { 40 | // set correct event type 41 | event.type = "debouncedresize"; 42 | $event.dispatch.apply( context, args ); 43 | }; 44 | 45 | if ( resizeTimeout ) { 46 | clearTimeout( resizeTimeout ); 47 | } 48 | 49 | execAsap ? 50 | dispatch() : 51 | resizeTimeout = setTimeout( dispatch, $special.threshold ); 52 | }, 53 | threshold: 150 54 | }; 55 | 56 | // ======================= imagesLoaded Plugin =============================== 57 | // https://github.com/desandro/imagesloaded 58 | 59 | // $('#my-container').imagesLoaded(myFunction) 60 | // execute a callback when all images have loaded. 61 | // needed because .load() doesn't work on cached images 62 | 63 | // callback function gets image collection as argument 64 | // this is the container 65 | 66 | // original: mit license. paul irish. 2010. 67 | // contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou 68 | 69 | // blank image data-uri bypasses webkit log warning (thx doug jones) 70 | var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='; 71 | 72 | $.fn.imagesLoaded = function( callback ) { 73 | var $this = this, 74 | deferred = $.isFunction($.Deferred) ? $.Deferred() : 0, 75 | hasNotify = $.isFunction(deferred.notify), 76 | $images = $this.find('img').add( $this.filter('img') ), 77 | loaded = [], 78 | proper = [], 79 | broken = []; 80 | 81 | // Register deferred callbacks 82 | if ($.isPlainObject(callback)) { 83 | $.each(callback, function (key, value) { 84 | if (key === 'callback') { 85 | callback = value; 86 | } else if (deferred) { 87 | deferred[key](value); 88 | } 89 | }); 90 | } 91 | 92 | function doneLoading() { 93 | var $proper = $(proper), 94 | $broken = $(broken); 95 | 96 | if ( deferred ) { 97 | if ( broken.length ) { 98 | deferred.reject( $images, $proper, $broken ); 99 | } else { 100 | deferred.resolve( $images ); 101 | } 102 | } 103 | 104 | if ( $.isFunction( callback ) ) { 105 | callback.call( $this, $images, $proper, $broken ); 106 | } 107 | } 108 | 109 | function imgLoaded( img, isBroken ) { 110 | // don't proceed if BLANK image, or image is already loaded 111 | if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) { 112 | return; 113 | } 114 | 115 | // store element in loaded images array 116 | loaded.push( img ); 117 | 118 | // keep track of broken and properly loaded images 119 | if ( isBroken ) { 120 | broken.push( img ); 121 | } else { 122 | proper.push( img ); 123 | } 124 | 125 | // cache image and its state for future calls 126 | $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } ); 127 | 128 | // trigger deferred progress method if present 129 | if ( hasNotify ) { 130 | deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] ); 131 | } 132 | 133 | // call doneLoading and clean listeners if all images are loaded 134 | if ( $images.length === loaded.length ){ 135 | setTimeout( doneLoading ); 136 | $images.unbind( '.imagesLoaded' ); 137 | } 138 | } 139 | 140 | // if no images, trigger immediately 141 | if ( !$images.length ) { 142 | doneLoading(); 143 | } else { 144 | $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){ 145 | // trigger imgLoaded 146 | imgLoaded( event.target, event.type === 'error' ); 147 | }).each( function( i, el ) { 148 | var src = el.src; 149 | 150 | // find out if this image has been already checked for status 151 | // if it was, and src has not changed, call imgLoaded on it 152 | var cached = $.data( el, 'imagesLoaded' ); 153 | if ( cached && cached.src === src ) { 154 | imgLoaded( el, cached.isBroken ); 155 | return; 156 | } 157 | 158 | // if complete is true and browser supports natural sizes, try 159 | // to check for image status manually 160 | if ( el.complete && el.naturalWidth !== undefined ) { 161 | imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 ); 162 | return; 163 | } 164 | 165 | // cached images don't fire load sometimes, so we reset src, but only when 166 | // dealing with IE, or image is complete (loaded) and failed manual check 167 | // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f 168 | if ( el.readyState || el.complete ) { 169 | el.src = BLANK; 170 | el.src = src; 171 | } 172 | }); 173 | } 174 | 175 | return deferred ? deferred.promise( $this ) : $this; 176 | }; 177 | 178 | // global 179 | var $window = $(window), 180 | $document = $(document), 181 | Modernizr = window.Modernizr; 182 | 183 | $.StackSlider = function( options, element ) { 184 | this.$stack = $( element ).hide(); 185 | this._init( options ); 186 | }; 187 | 188 | // the options 189 | $.StackSlider.defaults = { 190 | // default starting slide 191 | start: 0, 192 | // default transition speed 193 | speed : 600, 194 | // default transition easing 195 | easing : 'ease-in-out', 196 | // render both piles 197 | piles : true, 198 | // callbacks 199 | onBeforeNavigate : $.noop, 200 | onAfterNavigate : $.noop, 201 | onBeforeFlow : $.noop, 202 | onAfterFlow : $.noop, 203 | }; 204 | 205 | $.StackSlider.prototype = { 206 | 207 | _init : function( options ) { 208 | 209 | // options 210 | this.options = $.extend( true, {}, $.StackSlider.defaults, options ); 211 | 212 | // support css transitions and 3d transforms 213 | this.support = Modernizr.csstransitions && Modernizr.csstransforms3d; 214 | var transEndEventNames = { 215 | 'WebkitTransition' : 'webkitTransitionEnd', 216 | 'MozTransition' : 'transitionend', 217 | 'OTransition' : 'oTransitionEnd', 218 | 'msTransition' : 'MSTransitionEnd', 219 | 'transition' : 'transitionend' 220 | }, 221 | transformNames = { 222 | 'WebkitTransform' : '-webkit-transform', 223 | 'MozTransform' : '-moz-transform', 224 | 'OTransform' : '-o-transform', 225 | 'msTransform' : '-ms-transform', 226 | 'transform' : 'transform' 227 | }; 228 | 229 | if( this.support ) { 230 | this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.stackslider'; 231 | this.transformName = transformNames[ Modernizr.prefixed( 'transform' ) ]; 232 | } 233 | 234 | this.current = 0; 235 | 236 | var self = this; 237 | this.$stack.imagesLoaded( function() { 238 | 239 | self._layout(); 240 | if( self.itemsCount === 0 ) { 241 | return false; 242 | } 243 | self._initEvents(); 244 | 245 | if(self.options.start > 0) { 246 | self.jump(self.jump(self.options.start)); 247 | } 248 | } ); 249 | 250 | }, 251 | _layout : function() { 252 | 253 | // items 254 | var $items = this.$stack.children( 'li' ); 255 | // total items 256 | this.itemsCount = $items.length; 257 | 258 | // main wrapper 259 | this.$wrapper = $( '
' ); 260 | 261 | // add 2 piles 262 | if( this.options.piles ) { 263 | this.$lPile = $( '
' ); 264 | this.$rPile = $( '
' ); 265 | this.$wrapper.append( this.$lPile, this.$rPile ); 266 | } 267 | 268 | // add title 269 | this.$title = $( '
' ).appendTo( this.$wrapper ); 270 | 271 | // add navigation 272 | if( this.itemsCount > 1 ) { 273 | 274 | this.$navigation = $( '' ); 275 | this.$wrapper.append( this.$navigation ); 276 | 277 | } 278 | 279 | var html = ''; 280 | $items.each( function() { 281 | var $this = $( this ); 282 | html += '
' + $this.children( 'div.st-item' ).html() + '
'; 283 | } ); 284 | this.$listitems = $( '
' ).html( html ); 285 | this.$items = this.$listitems.children( 'div' ).hide(); 286 | this.$wrapper.insertAfter( this.$stack ).prepend( this.$listitems ); 287 | this.$stack.remove(); 288 | 289 | if( this.options.piles ) { 290 | this.$rPile.css( 'height', '+=' + ( this.itemsCount - 1 ) * 5 ); 291 | } 292 | 293 | this._setSize(); 294 | this._initItems(); 295 | 296 | }, 297 | _setSize : function() { 298 | 299 | // todo: factor should depend on the perspective value. The lower the perpsective value, the higher the width.. 300 | var itemH = this.$items.height(), 301 | pileW = 1.25 * itemH; 302 | // distance between one pile's center point to the center of the wrapper 303 | this.radius = this.$wrapper.width() / 2 - pileW / 2; 304 | if( this.options.piles ) { 305 | this.$lPile.css( 'width', pileW ); 306 | this.$rPile.css( 'width', pileW ); 307 | } 308 | 309 | }, 310 | _initEvents : function( position ) { 311 | 312 | var self = this; 313 | 314 | this.$navigation.children( 'span:last' ).on( { 315 | 'mousedown.stackslider' : function() { 316 | 317 | self._navigate( 'next' ); 318 | self.startflowtimeout = setTimeout( function() { 319 | self.flow = true; 320 | self._flow( 'next' ); 321 | }, 600 ); 322 | 323 | }, 324 | 'mouseup.stackslider mouseleave.stackslider' : function() { 325 | self._mouseup( 'next' ); 326 | } 327 | } ).end().children( 'span:first' ).on( { 328 | 'mousedown.stackslider' : function() { 329 | 330 | self._navigate( 'prev' ); 331 | self.startflowtimeout = setTimeout( function() { 332 | self.flow = true; 333 | self._flow( 'prev' ); 334 | }, 600 ); 335 | 336 | }, 337 | 'mouseup.stackslider mouseleave.stackslider' : function() { 338 | self._mouseup( 'prev' ); 339 | } 340 | } ); 341 | 342 | $window.on( 'debouncedresize.stackslider', function() { 343 | 344 | self._setSize(); 345 | self._initItems(); 346 | 347 | } ); 348 | 349 | }, 350 | _mouseup : function( dir ) { 351 | 352 | var self = this; 353 | clearTimeout( this.startflowtimeout ); 354 | clearTimeout( this.flowtimeout ); 355 | if( this.flow ) { 356 | setTimeout( function() { 357 | 358 | if( self.current !== 0 && self.current !== self.itemsCount - 1 ) { 359 | self._navigate( dir ); 360 | } 361 | 362 | }, 100 ); 363 | this.flow = false; 364 | } 365 | 366 | }, 367 | _flow : function( dir ) { 368 | 369 | this.options.onBeforeFlow(this.current); 370 | 371 | var self = this; 372 | this._navigate( dir, true ); 373 | this.flowtimeout = setTimeout( function() { 374 | self._flow( dir ); 375 | }, 150 ); 376 | 377 | this.options.onAfterFlow(this.current); 378 | 379 | }, 380 | _navigate : function( dir, flow ) { 381 | 382 | var self = this, 383 | classes = 'st-left st-center st-right st-leftflow st-rightflow', dirclass, posclass, pileOut, pileIn, 384 | $currentItem = this.$items.eq( this.current ); 385 | 386 | if(!flow) { 387 | self.options.onBeforeNavigate(self.current); 388 | } 389 | 390 | if( dir === 'next' && this.current < this.itemsCount - 1 ) { 391 | 392 | ++this.current; 393 | posclass = 'st-left'; 394 | dirclass = flow ? 'st-leftflow' : posclass; 395 | pileOut = 'right'; 396 | pileIn = 'left'; 397 | 398 | } 399 | else if( dir === 'prev' && this.current > 0 ) { 400 | 401 | --this.current; 402 | posclass = 'st-right'; 403 | dirclass = flow ? 'st-rightflow' : posclass; 404 | pileOut = 'left'; 405 | pileIn = 'right'; 406 | 407 | } 408 | else { 409 | return false; 410 | } 411 | 412 | this._updatePile( pileOut, 'out' ); 413 | 414 | var $nextItem = this.$items.eq( this.current ); 415 | 416 | $currentItem.removeClass( classes ).addClass( dirclass ); 417 | 418 | if( this.support ) { 419 | $currentItem.on( this.transEndEventName , function() { 420 | 421 | $( this ).removeClass( classes ).addClass( posclass ).off( self.transEndEventName ); 422 | self._updatePile( pileIn, 'in' ); 423 | 424 | } ); 425 | } 426 | else { 427 | $currentItem.removeClass( classes ).addClass( posclass ); 428 | this._updatePile( pileIn, 'in' ); 429 | } 430 | 431 | $nextItem.show(); 432 | 433 | setTimeout( function() { 434 | 435 | if( ( flow && ( self.current === 0 || self.current === self.itemsCount - 1 ) ) || !flow ) { 436 | $nextItem.removeClass( classes ).addClass( 'st-center' ); 437 | } 438 | 439 | }, 25 ); 440 | 441 | clearTimeout( this.titletimeout ); 442 | var time = this.support ? this.options.speed : 0; 443 | this.titletimeout = setTimeout( function() { 444 | self.$title.html( $nextItem.data( 'title' ) ); 445 | }, time ); 446 | 447 | if(!flow) { 448 | this.options.onAfterNavigate(self.current); 449 | } 450 | 451 | }, 452 | _updatePile : function( pile, action ) { 453 | 454 | if( !this.options.piles ) { 455 | return false; 456 | } 457 | 458 | if( pile === 'right' ) { 459 | this.$rPile.css( 'height', action === 'in' ? '+=5' : '-=5' ); 460 | } 461 | else if( pile === 'left' ) { 462 | this.$lPile.css( 'height', action === 'in' ? '+=5' : '-=5' ); 463 | } 464 | 465 | }, 466 | _initItems : function() { 467 | 468 | var self = this, 469 | wrapperW = this.$wrapper.width(), wrapperH = this.$wrapper.height(), 470 | $currentItem = this.$items.eq( this.current ).addClass( 'st-center' ).show(), 471 | pileHFactor = this.options.piles ? Math.max( this.$lPile.height(), this.$rPile.height() ) / 2 : 0; 472 | 473 | this.$title.html( $currentItem.data( 'title' ) ); 474 | 475 | this.$items.each( function( i ) { 476 | 477 | var $item = $( this ), 478 | itemH = $item.height(), itemW = $item.width(), 479 | itemTop = wrapperH - self.radius - itemH / 2; 480 | 481 | if( $item.index() !== self.current ) { 482 | $item.addClass( 'st-right' ); 483 | } 484 | 485 | if( self.support ) { 486 | $item.css( { 487 | transition : self.transformName + ' ' + self.options.speed + 'ms ' + self.options.easing + ', opacity ' + self.options.speed + 'ms ' + self.options.easing, 488 | transformOrigin : '50% ' + ( self.radius + itemH / 2 - pileHFactor ) + 'px' 489 | } ); 490 | } 491 | 492 | $item.css( { 493 | left : wrapperW / 2 - itemW / 2, 494 | top : itemTop 495 | } ); 496 | 497 | } ); 498 | 499 | }, 500 | jump : function( pos ) { 501 | 502 | var self = this, 503 | pos = parseInt(pos); 504 | if(pos > self.current) { 505 | for(var i = self.current; i < pos; i++) { 506 | var flow = self.current < pos-1 ? true : false; 507 | self._navigate( "next" , flow); 508 | } 509 | } else { 510 | for(var i = self.current; i > pos; i--) { 511 | var flow = self.current > (pos+1) ? true : false; 512 | self._navigate( "prev" , flow); 513 | } 514 | } 515 | } 516 | 517 | }; 518 | 519 | var logError = function( message ) { 520 | 521 | if ( window.console ) { 522 | 523 | window.console.error( message ); 524 | 525 | } 526 | 527 | }; 528 | 529 | $.fn.stackslider = function( options ) { 530 | 531 | var instance = $.data( this, 'stackslider' ); 532 | 533 | if ( typeof options === 'string' ) { 534 | 535 | var args = Array.prototype.slice.call( arguments, 1 ); 536 | 537 | this.each(function() { 538 | 539 | if ( !instance ) { 540 | 541 | logError( "cannot call methods on stackslider prior to initialization; " + 542 | "attempted to call method '" + options + "'" ); 543 | return; 544 | 545 | } 546 | 547 | if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { 548 | 549 | logError( "no such method '" + options + "' for stackslider instance" ); 550 | return; 551 | 552 | } 553 | 554 | instance[ options ].apply( instance, args ); 555 | 556 | }); 557 | 558 | } 559 | else { 560 | 561 | this.each(function() { 562 | 563 | if ( instance ) { 564 | 565 | instance._init(); 566 | 567 | } 568 | else { 569 | 570 | instance = $.data( this, 'stackslider', new $.StackSlider( options, this ) ); 571 | 572 | } 573 | 574 | }); 575 | 576 | } 577 | 578 | return instance; 579 | 580 | }; 581 | 582 | } )( jQuery, window ); 583 | -------------------------------------------------------------------------------- /js/modernizr.custom.63321.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransforms3d-csstransitions-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f