├── README.md ├── css ├── component.css └── demo.css ├── favicon.ico ├── fonts ├── bpicons │ ├── bpicons.eot │ ├── bpicons.svg │ ├── bpicons.ttf │ ├── bpicons.woff │ └── license.txt └── feather │ ├── fonts │ ├── feather.eot │ ├── feather.svg │ ├── feather.ttf │ └── feather.woff │ ├── selection.json │ └── style.css ├── images ├── apple-watch-content-preview.png ├── apple-watch-content.png ├── apple-watch.png ├── imac-content-preview.jpg ├── imac-content.jpg ├── imac.png ├── ipad-content-preview.png ├── ipad-content.jpg ├── ipad.png ├── iphone-content-preview.png ├── iphone-content.png ├── iphone.png ├── macbook-content-preview.jpg ├── macbook-content.jpg └── macbook.png ├── index.html └── js ├── classie.js ├── dynamics.min.js ├── main.js └── modernizr.custom.js /README.md: -------------------------------------------------------------------------------- 1 | # Blueprint: Zoom Slider 2 | 3 | A simple content slider with depth-like zoom functionality for a predefined area in each slide. 4 | 5 | [Article on Codrops](http://tympanus.net/codrops/?p=24330) 6 | 7 | [Demo](http://tympanus.net/Blueprints/ZoomSlider/) 8 | 9 | The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration. 10 | 11 | View the [Blueprints archive] (http://tympanus.net/codrops/category/blueprints/) 12 | 13 | ## License 14 | 15 | Use it freely but do not distribute or sell "as-is". Read more here: [Codrops License](http://tympanus.net/codrops/licensing/) 16 | 17 | ## Credits 18 | 19 | [Dynamic.js](http://dynamicsjs.com/) by Michaël Villar 20 | 21 | [Modernizr](http://modernizr.com/) by the Modernizr Team 22 | 23 | ### Images 24 | 25 | [Flat Apple Devices](http://drbl.in/jsoj) by Peter Finlan 26 | 27 | [Apple Watch](http://drbl.in/mNVE) by Vincent Le Moign 28 | 29 | [Website Mockup "Space Exploration"](http://drbl.in/oMJD) by Ante Matijaca 30 | 31 | [Free To-Do App UI](http://www.invisionapp.com/do/sketchappsources) by InVision 32 | 33 | [Pex: Free Website PSD](http://blazrobar.com/2015/free-psd-website-templates/pex-a-free-website-home-page-photoshop-psd/) by Blaz 34 | 35 | [Perspective App Screen Mockup](http://graphicburger.com/perspective-app-screens-mock-up/) by GraphicBurger 36 | 37 | ### Icons 38 | 39 | [Feather Icons](https://gumroad.com/l/feather) by Cole Bemis 40 | 41 | Icon font created with [IcoMoon](https://icomoon.io) 42 | 43 | ## Misc 44 | 45 | Follow us: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/) 46 | 47 | [© Codrops 2015](http://www.codrops.com) 48 | 49 | 50 | -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | /* Helper classes */ 2 | html, 3 | body { 4 | overflow: hidden; 5 | height: 100%; 6 | } 7 | 8 | .container { 9 | position: relative; 10 | overflow: hidden; 11 | overflow-y: scroll; 12 | width: 100%; 13 | height: 100%; 14 | -webkit-overflow-scrolling: touch; 15 | } 16 | 17 | .noscroll .container { 18 | overflow-y: hidden; 19 | } 20 | 21 | .slider { 22 | position: relative; 23 | z-index: 200; 24 | width: 100%; 25 | margin: 0 auto; 26 | padding: 0 0 7em; 27 | text-align: center; 28 | -webkit-user-select: none; 29 | -moz-user-select: none; 30 | -ms-user-select: none; 31 | user-select: none; 32 | -webkit-touch-callout: none; 33 | -khtml-user-select: none; 34 | } 35 | 36 | .slide { 37 | position: absolute; 38 | top: 0; 39 | visibility: hidden; 40 | width: 100%; 41 | opacity: 0; 42 | } 43 | 44 | .slide--current { 45 | position: relative; 46 | z-index: 100; 47 | visibility: visible; 48 | opacity: 1; 49 | } 50 | 51 | .slide__mover { 52 | position: relative; 53 | z-index: 100; 54 | } 55 | 56 | .slide__title { 57 | font-size: 1.75em; 58 | font-weight: normal; 59 | margin: 0 auto; 60 | padding: 1em 0 0 0; 61 | } 62 | 63 | .slide__title span { 64 | font-size: 55%; 65 | font-weight: bold; 66 | display: block; 67 | letter-spacing: 2px; 68 | text-transform: uppercase; 69 | color: #35303d; 70 | } 71 | 72 | .slider__nav { 73 | position: absolute; 74 | bottom: 2em; 75 | width: 100%; 76 | text-align: center; 77 | } 78 | 79 | .button { 80 | font-size: 1.31em; 81 | position: relative; 82 | display: inline-block; 83 | overflow: hidden; 84 | margin: 0 25px; 85 | padding: 0; 86 | cursor: pointer; 87 | color: #5c5edc; 88 | border: none; 89 | background: none; 90 | } 91 | 92 | .button:focus { 93 | outline: none; 94 | } 95 | 96 | .button:hover { 97 | color: #fff; 98 | } 99 | 100 | .text-hidden { 101 | position: absolute; 102 | top: 200%; 103 | } 104 | 105 | .button--close { 106 | font-size: 1.55em; 107 | position: absolute; 108 | top: 30px; 109 | right: 30px; 110 | margin: 0; 111 | opacity: 0; 112 | color: #50505a; 113 | -webkit-transition: opacity 0.3s; 114 | transition: opacity 0.3s; 115 | } 116 | 117 | .content--open .button--close { 118 | opacity: 1; 119 | } 120 | 121 | /* Zoomer */ 122 | .zoomer { 123 | position: relative; 124 | height: 360px; /* this is needed for IE10 so that vertical flexbox centering works */ 125 | } 126 | 127 | .flex-center { 128 | display: -webkit-flex; 129 | display: -ms-flexbox; 130 | display: flex; 131 | -webkit-align-items: center; 132 | -ms-flex-align: center; 133 | align-items: center; 134 | -webkit-justify-content: center; 135 | -ms-flex-pack: center; 136 | justify-content: center; 137 | } 138 | 139 | .zoomer__image { 140 | display: block; 141 | margin: 0; 142 | -webkit-flex: none; 143 | -ms-flex: none; 144 | flex: none; 145 | } 146 | 147 | .zoomer__area, 148 | .preview { 149 | position: absolute; 150 | top: 50%; 151 | left: 50%; 152 | -webkit-transform: translate3d(-50%,-50%,0); 153 | transform: translate3d(-50%,-50%,0); 154 | } 155 | 156 | .zoomer__area:focus { 157 | outline: none; 158 | } 159 | 160 | .zoomer__area--size-1 { 161 | /* Apple Watch */ 162 | width: 96px; 163 | height: 118px; 164 | } 165 | 166 | .zoomer__area--size-2 { 167 | /* iPhone */ 168 | width: 112px; 169 | height: 198px; 170 | } 171 | 172 | .zoomer__area--size-3 { 173 | /* MacBook */ 174 | width: 315px; 175 | height: 200px; 176 | } 177 | 178 | .zoomer__area--size-4 { 179 | /* iPad */ 180 | width: 150px; 181 | height: 200px; 182 | } 183 | 184 | .zoomer__area--size-5 { 185 | /* iMac */ 186 | width: 315px; 187 | height: 189px; 188 | } 189 | 190 | .preview { 191 | overflow: hidden; 192 | background: #18191b; 193 | } 194 | 195 | .preview img { 196 | display: block; 197 | border-radius: inherit; 198 | -webkit-transform: translate3d(0,0,0); 199 | transform: translate3d(0,0,0); 200 | } 201 | 202 | .zoomer--active .preview img { 203 | -webkit-transform: translate3d(100%,0,0); 204 | transform: translate3d(100%,0,0); 205 | } 206 | 207 | .rounded { 208 | border-radius: 15px; 209 | } 210 | 211 | .rounded-right { 212 | border-radius: 0 15px 15px 0; 213 | } 214 | 215 | .preview__content { 216 | position: absolute; 217 | top: 0; 218 | left: 100%; 219 | width: 100%; 220 | height: 100%; 221 | border-radius: inherit; 222 | } 223 | /* Content */ 224 | .content { 225 | position: fixed; 226 | z-index: 1000; 227 | top: 0; 228 | left: -100%; 229 | overflow: hidden; 230 | overflow-y: scroll; 231 | width: 100%; 232 | height: 100vh; 233 | background: #18191b; 234 | -webkit-overflow-scrolling: touch; 235 | } 236 | 237 | .content--open { 238 | left: 0; 239 | } 240 | 241 | .content__item { 242 | position: absolute; 243 | top: 0; 244 | display: -webkit-flex; 245 | display: -ms-flexbox; 246 | display: flex; 247 | overflow: hidden; 248 | height: 0; 249 | min-height: 100%; 250 | margin: 0 auto; 251 | padding: 2em 0; 252 | pointer-events: none; 253 | opacity: 0; 254 | color: #fff; 255 | -webkit-align-items: center; 256 | -ms-flex-align: center; 257 | align-items: center; 258 | } 259 | 260 | .content__item--current { 261 | pointer-events: auto; 262 | opacity: 1; 263 | } 264 | 265 | .content__item--reset { 266 | height: auto; 267 | } 268 | 269 | .content h2 { 270 | font-size: 3.5em; 271 | font-weight: normal; 272 | margin: 0; 273 | } 274 | 275 | .content h3 { 276 | font-size: 1.95em; 277 | font-weight: normal; 278 | margin: 0.25em 0 0.5em; 279 | color: #685884; 280 | } 281 | 282 | .content p { 283 | font-size: 1.25em; 284 | line-height: 1.5; 285 | } 286 | 287 | .content__item-img { 288 | display: block; 289 | max-width: 40vw; 290 | max-height: 80vh; 291 | -webkit-transform: translate3d(-120%,0,0); 292 | transform: translate3d(-120%,0,0); 293 | -webkit-flex: none; 294 | -ms-flex: none; 295 | flex: none; 296 | } 297 | 298 | .content__item--current .content__item-img { 299 | -webkit-transform: translate3d(-10px,0,0); 300 | transform: translate3d(-10px,0,0); 301 | } 302 | 303 | .content__item-inner { 304 | padding: 0 10vw 0; 305 | opacity: 0; 306 | -webkit-transform: translate3d(0,50px,0); 307 | transform: translate3d(0,50px,0); 308 | } 309 | 310 | .content__item--current .content__item-inner { 311 | opacity: 1; 312 | -webkit-transform: translate3d(0,0,0); 313 | transform: translate3d(0,0,0); 314 | } 315 | 316 | 317 | /**************************/ 318 | /* All synced transitions */ 319 | /**************************/ 320 | 321 | .zoomer { 322 | -webkit-transition: -webkit-transform 0.5s; 323 | transition: transform 0.5s; 324 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 325 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 326 | } 327 | 328 | .zoomer.zoomer--notrans { 329 | -webkit-transition: none; 330 | transition: none; 331 | } 332 | 333 | .zoomer__image { 334 | -webkit-transition: opacity 0.3s 0.3s; 335 | transition: opacity 0.3s 0.3s; 336 | } 337 | 338 | .zoomer--active .zoomer__image { 339 | opacity: 0; 340 | -webkit-transition-delay: 0s; 341 | transition-delay: 0s; 342 | } 343 | 344 | .preview img { 345 | -webkit-transition: -webkit-transform 0.6s 0.3s; 346 | transition: transform 0.6s 0.3s; 347 | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); 348 | transition-timing-function: cubic-bezier(0.2,1,0.3,1); 349 | } 350 | 351 | .zoomer--active .preview img { 352 | -webkit-transition: -webkit-transform 0.3s; 353 | transition: transform 0.3s; 354 | } 355 | 356 | .content { 357 | -webkit-transition: left 0s; 358 | transition: left 0s; 359 | } 360 | 361 | .content__item { 362 | -webkit-transition: opacity 0s; 363 | transition: opacity 0s; 364 | } 365 | 366 | .content, 367 | .content__item { 368 | /* delay for content to disappear and zoomer to start transitioning back to 0 */ 369 | -webkit-transition-delay: 0.3s; 370 | transition-delay: 0.3s; 371 | } 372 | 373 | .content--open, 374 | .content__item--current { 375 | -webkit-transition: none; 376 | transition: none; 377 | } 378 | 379 | .content__item-img { 380 | -webkit-transition: -webkit-transform 0.4s; 381 | transition: transform 0.4s; 382 | -webkit-transition-timing-function: cubic-bezier(0.7,1,0.8,1); 383 | transition-timing-function: cubic-bezier(0.7,1,0.8,1); 384 | } 385 | 386 | .content__item--current .content__item-img { 387 | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); 388 | transition-timing-function: cubic-bezier(0.2,1,0.3,1); 389 | -webkit-transition-duration: 1s; 390 | transition-duration: 1s; 391 | } 392 | 393 | .content__item-inner { 394 | -webkit-transition: -webkit-transform 0.6s, opacity 0.3s; 395 | transition: transform 0.6s, opacity 0.3s; 396 | -webkit-transition-timing-function: cubic-bezier(0.7,1,0.8,1), ease; 397 | transition-timing-function: cubic-bezier(0.7,1,0.8,1), ease; 398 | } 399 | 400 | .content__item--current .content__item-inner { 401 | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1), ease; 402 | transition-timing-function: cubic-bezier(0.2,1,0.3,1), ease; 403 | -webkit-transition-duration: 1.7s; 404 | transition-duration: 1.7s; 405 | } 406 | 407 | /* Media Queries */ 408 | @media screen and (max-width: 50em) { 409 | .content__item { 410 | display: block; 411 | } 412 | .content__item-img { 413 | max-width: calc(100% - 80px); 414 | max-height: 70vh; 415 | } 416 | .content h2 { 417 | font-size: 3em; 418 | } 419 | .content__item-inner { 420 | font-size: 82%; 421 | padding: 4em 3em 2em; 422 | } 423 | } -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | /* General Blueprint Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:400,700); 3 | @font-face { 4 | font-family: 'bpicons'; 5 | font-weight: normal; 6 | font-style: normal; 7 | src: url('../fonts/bpicons/bpicons.eot'); 8 | src: url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'), 9 | url('../fonts/bpicons/bpicons.woff') format('woff'), 10 | url('../fonts/bpicons/bpicons.ttf') format('truetype'), 11 | url('../fonts/bpicons/bpicons.svg#bpicons') format('svg'); 12 | } /* Made with http://icomoon.io/ */ 13 | 14 | /* Resets */ 15 | *, 16 | *:after, 17 | *:before { 18 | box-sizing: border-box; 19 | } 20 | 21 | html { 22 | overflow-y: scroll; 23 | } 24 | 25 | body, 26 | html { 27 | font-size: 100%; 28 | margin: 0; 29 | padding: 0; 30 | height: 100%; 31 | } 32 | 33 | /* Helper classes */ 34 | .cf:before, 35 | .cf:after { 36 | content: ' '; 37 | display: table; 38 | } 39 | 40 | .cf:after { 41 | clear: both; 42 | } 43 | 44 | .hidden { 45 | position: absolute; 46 | opacity: 0; 47 | pointer-events: none; 48 | } 49 | 50 | /* Main styles */ 51 | body { 52 | font-family: "Avenir", 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; 53 | color: #CECECE; 54 | background: #222125; 55 | -webkit-font-smoothing: antialiased; 56 | -moz-osx-font-smoothing: grayscale; 57 | } 58 | 59 | a { 60 | text-decoration: none; 61 | color: #5C5EDC; 62 | outline: none; 63 | } 64 | 65 | a:focus { 66 | color: #ddd; 67 | } 68 | 69 | a:hover { 70 | color: #fff; 71 | } 72 | 73 | /* Blueprint header */ 74 | .bp-header { 75 | margin: 0 auto; 76 | padding: 3em 3em 0; 77 | display: -webkit-flex; 78 | display: -ms-flexbox; 79 | display: flex; 80 | -webkit-flex-wrap: wrap; 81 | -ms-flex-wrap: wrap; 82 | flex-wrap: wrap; 83 | } 84 | 85 | .bp-header h1 { 86 | font-size: 2.125em; 87 | font-weight: 400; 88 | line-height: 1.3; 89 | margin: 0 0 .6em 0; 90 | } 91 | 92 | .bp-header h1 > span { 93 | font-size: 50%; 94 | display: block; 95 | color: #4D4D5A; 96 | } 97 | 98 | .bp-header > span { 99 | width: 100%; 100 | font-weight: 700; 101 | font-size: 0.85em; 102 | color: #5C5EDC; 103 | position: relative; 104 | z-index: 100; 105 | display: block; 106 | padding: 0 0 .6em .1em; 107 | letter-spacing: .5em; 108 | text-transform: uppercase; 109 | } 110 | 111 | .bp-header > span span:after { 112 | font-size: 50%; 113 | font-size: 75%; 114 | position: relative; 115 | top: -8px; 116 | left: -12px; 117 | width: 30px; 118 | height: 30px; 119 | cursor: help; 120 | } 121 | 122 | .bp-header > span span:hover:before { 123 | content: attr(data-content); 124 | font-size: 110%; 125 | font-weight: 700; 126 | line-height: 1.2; 127 | max-width: 500px; 128 | position: absolute; 129 | left: auto; 130 | margin-left: 4px; 131 | padding: .8em 1em; 132 | text-align: left; 133 | text-indent: 0; 134 | letter-spacing: 0; 135 | text-transform: none; 136 | color: #fff; 137 | background: #5C5EDC; 138 | } 139 | 140 | .bp-header nav { 141 | position: relative; 142 | z-index: 100; 143 | margin: -2em 0 0 auto; 144 | } 145 | 146 | .bp-header nav a { 147 | position: relative; 148 | display: inline-block; 149 | width: 2.5em; 150 | height: 2.5em; 151 | margin: 0 .1em; 152 | text-align: left; 153 | border-radius: 50%; 154 | } 155 | 156 | .bp-header nav a > span { 157 | display: none; 158 | } 159 | 160 | .bp-header nav a:hover:before { 161 | content: attr(data-info); 162 | color: #595A5F; 163 | font-weight: bold; 164 | font-size: 0.85em; 165 | position: absolute; 166 | top: 120%; 167 | right: 0; 168 | width: 600%; 169 | text-align: right; 170 | pointer-events: none; 171 | } 172 | 173 | .bp-header nav a:hover { 174 | background: #5C5EDC; 175 | } 176 | 177 | .bp-icon:after { 178 | font-family: 'bpicons'; 179 | font-weight: normal; 180 | font-style: normal; 181 | font-variant: normal; 182 | text-align: center; 183 | text-transform: none; 184 | color: #5C5EDC; 185 | speak: none; 186 | -webkit-font-smoothing: antialiased; 187 | } 188 | 189 | .bp-header nav .bp-icon:after { 190 | line-height: 2.4; 191 | position: absolute; 192 | top: 0; 193 | left: 0; 194 | width: 100%; 195 | height: 100%; 196 | text-indent: 0; 197 | } 198 | 199 | .bp-header nav a:hover:after { 200 | color: #fff; 201 | } 202 | 203 | .bp-icon-next:after { 204 | content: '\e000'; 205 | } 206 | 207 | .bp-icon-drop:after { 208 | content: '\e001'; 209 | } 210 | 211 | .bp-icon-archive:after { 212 | content: '\e002'; 213 | } 214 | 215 | .bp-icon-about:after { 216 | content: '\e003'; 217 | } 218 | 219 | .bp-icon-prev:after { 220 | content: '\e004'; 221 | } 222 | 223 | @media screen and (max-width: 40em) { 224 | .bp-header { 225 | text-align: center; 226 | } 227 | .bp-header > span { 228 | text-indent: 30px; 229 | } 230 | .bp-header > span span:hover:before { 231 | right: 0px; 232 | } 233 | .bp-header h1 { 234 | font-size: 1.8em; 235 | width: 100%; 236 | } 237 | .bp-header nav { 238 | margin: 0; 239 | width: 100%; 240 | } 241 | } -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/favicon.ico -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/fonts/bpicons/bpicons.eot -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/fonts/bpicons/bpicons.ttf -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/fonts/bpicons/bpicons.woff -------------------------------------------------------------------------------- /fonts/bpicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/feather/fonts/feather.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/fonts/feather/fonts/feather.eot -------------------------------------------------------------------------------- /fonts/feather/fonts/feather.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /fonts/feather/fonts/feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/fonts/feather/fonts/feather.ttf -------------------------------------------------------------------------------- /fonts/feather/fonts/feather.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/fonts/feather/fonts/feather.woff -------------------------------------------------------------------------------- /fonts/feather/selection.json: -------------------------------------------------------------------------------- 1 | { 2 | "IcoMoonType": "selection", 3 | "icons": [ 4 | { 5 | "icon": { 6 | "paths": [ 7 | "M512 42.667q95.667 0 182.5 37.167t149.667 100 100 149.667 37.167 182.5-37.167 182.5-100 149.667-149.667 100-182.5 37.167-182.5-37.167-149.667-100-100-149.667-37.167-182.5 37.167-182.5 100-149.667 149.667-100 182.5-37.167zM512 128q-78 0-149.167 30.5t-122.5 81.833-81.833 122.5-30.5 149.167 30.5 149.167 81.833 122.5 122.5 81.833 149.167 30.5 149.167-30.5 122.5-81.833 81.833-122.5 30.5-149.167-30.5-149.167-81.833-122.5-122.5-81.833-149.167-30.5zM632.667 348.333q17.667 0 30.333 12.5t12.667 30.167-12.667 30.333l-90.667 90.667 90.667 90.333q12.667 12.667 12.667 30 0 17.667-12.667 30.167t-30.333 12.5-30-12.333l-90.667-90.333-90.333 90.333q-12.333 12.333-30.333 12.333-17.667 0-30.167-12.333t-12.5-30q0-18 12.333-30.333l90.667-90.333-90.667-90.667q-12.333-12.333-12.333-30t12.5-30.333 30.167-12.667 30.333 12.667l90.333 90.667 90.667-90.667q12.667-12.667 30-12.667z" 8 | ], 9 | "attrs": [ 10 | {} 11 | ], 12 | "isMulticolor": false, 13 | "tags": [ 14 | "circle-cross" 15 | ], 16 | "grid": 24 17 | }, 18 | "attrs": [ 19 | {} 20 | ], 21 | "properties": { 22 | "order": 1, 23 | "id": 2, 24 | "prevSize": 24, 25 | "code": 58882, 26 | "name": "circle-cross" 27 | }, 28 | "setIdx": 0, 29 | "setId": 5, 30 | "iconIdx": 0 31 | }, 32 | { 33 | "icon": { 34 | "paths": [ 35 | "M597.333 170.667q18 0 30.333 12.333l298.667 298.667q12.333 12.333 12.333 30.333t-12.333 30.333l-298.667 298.667q-12.333 12.333-30.333 12.333-18.333 0-30.5-12.167t-12.167-30.5q0-18 12.333-30.333l226-225.667h-665q-17.667 0-30.167-12.5t-12.5-30.167 12.5-30.167 30.167-12.5h665l-226-225.667q-12.333-12.333-12.333-30.333 0-18.333 12.167-30.5t30.5-12.167z" 36 | ], 37 | "attrs": [ 38 | {} 39 | ], 40 | "isMulticolor": false, 41 | "tags": [ 42 | "arrow-right" 43 | ], 44 | "grid": 24 45 | }, 46 | "attrs": [ 47 | {} 48 | ], 49 | "properties": { 50 | "order": 1, 51 | "id": 1, 52 | "prevSize": 24, 53 | "code": 58880, 54 | "name": "arrow-right" 55 | }, 56 | "setIdx": 0, 57 | "setId": 5, 58 | "iconIdx": 1 59 | }, 60 | { 61 | "icon": { 62 | "paths": [ 63 | "M426.667 170.667q17.667 0 30.167 12.5t12.5 30.167q0 18-12.667 30.333l-225.667 225.667h665q17.667 0 30.167 12.5t12.5 30.167-12.5 30.167-30.167 12.5h-665l225.667 225.667q12.667 12.333 12.667 30.333 0 17.667-12.5 30.167t-30.167 12.5q-18 0-30.333-12.333l-298.667-298.667q-12.333-13-12.333-30.333t12.333-30.333l298.667-298.667q12.667-12.333 30.333-12.333z" 64 | ], 65 | "attrs": [ 66 | {} 67 | ], 68 | "isMulticolor": false, 69 | "tags": [ 70 | "arrow-left" 71 | ], 72 | "grid": 24 73 | }, 74 | "attrs": [ 75 | {} 76 | ], 77 | "properties": { 78 | "order": 2, 79 | "id": 0, 80 | "prevSize": 24, 81 | "code": 58881, 82 | "name": "arrow-left" 83 | }, 84 | "setIdx": 0, 85 | "setId": 5, 86 | "iconIdx": 2 87 | } 88 | ], 89 | "height": 1024, 90 | "metadata": { 91 | "name": "feather" 92 | }, 93 | "preferences": { 94 | "showGlyphs": true, 95 | "showQuickUse": true, 96 | "showQuickUse2": true, 97 | "showSVGs": true, 98 | "fontPref": { 99 | "prefix": "icon-", 100 | "metadata": { 101 | "fontFamily": "feather", 102 | "majorVersion": 1, 103 | "minorVersion": 0 104 | }, 105 | "metrics": { 106 | "emSize": 1024, 107 | "baseline": 6.25, 108 | "whitespace": 50 109 | } 110 | }, 111 | "imagePref": { 112 | "prefix": "icon-", 113 | "png": true, 114 | "useClassSelector": true, 115 | "color": 4473924, 116 | "bgColor": 16777215 117 | }, 118 | "historySize": 100, 119 | "showCodes": false, 120 | "gridSize": 16, 121 | "showGrid": true 122 | } 123 | } -------------------------------------------------------------------------------- /fonts/feather/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'feather'; 3 | src:url('fonts/feather.eot?-ajbl0g'); 4 | src:url('fonts/feather.eot?#iefix-ajbl0g') format('embedded-opentype'), 5 | url('fonts/feather.ttf?-ajbl0g') format('truetype'), 6 | url('fonts/feather.woff?-ajbl0g') format('woff'), 7 | url('fonts/feather.svg?-ajbl0g#feather') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | .icon { 13 | font-family: 'feather'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | .icon--zoom:before { 26 | content: "\e036"; 27 | } 28 | .icon--circle-cross:before { 29 | content: "\e602"; 30 | } 31 | .icon--arrow-right:before { 32 | content: "\e600"; 33 | } 34 | .icon--arrow-left:before { 35 | content: "\e601"; 36 | } 37 | -------------------------------------------------------------------------------- /images/apple-watch-content-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/apple-watch-content-preview.png -------------------------------------------------------------------------------- /images/apple-watch-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/apple-watch-content.png -------------------------------------------------------------------------------- /images/apple-watch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/apple-watch.png -------------------------------------------------------------------------------- /images/imac-content-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/imac-content-preview.jpg -------------------------------------------------------------------------------- /images/imac-content.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/imac-content.jpg -------------------------------------------------------------------------------- /images/imac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/imac.png -------------------------------------------------------------------------------- /images/ipad-content-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/ipad-content-preview.png -------------------------------------------------------------------------------- /images/ipad-content.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/ipad-content.jpg -------------------------------------------------------------------------------- /images/ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/ipad.png -------------------------------------------------------------------------------- /images/iphone-content-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/iphone-content-preview.png -------------------------------------------------------------------------------- /images/iphone-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/iphone-content.png -------------------------------------------------------------------------------- /images/iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/iphone.png -------------------------------------------------------------------------------- /images/macbook-content-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/macbook-content-preview.jpg -------------------------------------------------------------------------------- /images/macbook-content.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/macbook-content.jpg -------------------------------------------------------------------------------- /images/macbook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ZoomSlider/3b426d0017c84a8cdaf77157ea3e0c3e35927477/images/macbook.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blueprint: Zoom Slider 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 | Blueprint 26 |

Zoom Slider

27 | 33 |
34 | 35 |
36 |
37 |
38 |
39 | iPhone 40 |
41 | iPhone app preview 42 |
43 |
44 |
45 |
46 |

The Classy iPhone 6

47 |
48 |
49 |
50 |
51 | iPad Mini 52 |
53 | iPad Mini app preview 54 |
55 |
56 |
57 |
58 |

The Fantastic iPad Mini

59 |
60 |
61 |
62 |
63 | MacBook 64 |
65 | MacBook app preview 66 |
67 |
68 |
69 |
70 |

The Amazing MacBook

71 |
72 |
73 |
74 |
75 | iMac 76 |
77 | iMac app preview 78 |
79 |
80 |
81 |
82 |

The Glorious iMac

83 |
84 |
85 |
86 |
87 | Apple Watch 88 |
89 | Apple Watch app preview 90 |
91 |
92 |
93 |
94 |

The Fabulous Apple Watch

95 |
96 | 101 |
102 | 103 |
104 |
105 | Apple Watch Content 106 |
107 |

The iPhone 6

108 |

Incredible performance for powerful apps

109 |

Built on 64-bit desktop-class architecture, the new A8 chip delivers more power, even while driving a larger display. The M8 motion coprocessor efficiently gathers data from advanced sensors and a new barometer. And with increased battery life, iPhone 6 lets you do more, for longer than ever.

110 |

Learn more about this technology ⟶

111 |
112 |
113 |
114 | iPad Mini Content 115 |
116 |

The iPad Mini

117 |

Desktop-class architecture without a desktop

118 |

Don’t let its size fool you. iPad mini 3 is powered by an A7 chip with 64-bit desktop-class architecture. A7 delivers amazing processing power without sacrificing battery life. So you get incredible performance in a device you can take with you wherever you go.

119 |

Learn more about Performance ⟶

120 |
121 |
122 |
123 | MacBook Content 124 |
125 |

The MacBook

126 |

It's the future of the notebook

127 |

With the new MacBook, we set out to do the impossible: engineer a full-size experience into the lightest and most compact Mac notebook ever. That meant reimagining every element to make it not only lighter and thinner but also better. The result is more than just a new notebook. It's the future of the notebook.

128 |

Learn more about the design ⟶

129 |
130 |
131 |
132 | iMac Content 133 |
134 |

The iMac

135 |

Engineered to the very last detail

136 |

Every new Mac comes with Photos, iMovie, GarageBand, Pages, Numbers, and Keynote. So you can be creative with your photos, videos, music, documents, spreadsheets, and presentations right from the start. You also get great apps for email, surfing the web, sending texts, and making FaceTime calls — there’s even an app for finding new apps.

137 |

Learn more about the iMac's features ⟶

138 |
139 |
140 |
141 | Apple Watch Content 142 |
143 |

The Apple Watch

144 |

Entirely new ways to stay in touch

145 |

Apple Watch makes all the ways you're used to communicating more convenient. And because it sits right on your wrist, it can add a physical dimension to alerts and notifications. For example, you’ll feel a gentle tap with each incoming message. Apple Watch also lets you connect with your favorite people in fun, spontaneous ways — like sending a tap, a sketch, or even your heartbeat.

146 |

Learn more about new ways to connect ⟶

147 |
148 |
149 | 150 |
151 |
152 | 153 | 154 | 155 | 156 | -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie v1.0.1 3 | * class helper functions 4 | * from bonzo https://github.com/ded/bonzo 5 | * MIT license 6 | * 7 | * classie.has( elem, 'my-class' ) -> true/false 8 | * classie.add( elem, 'my-new-class' ) 9 | * classie.remove( elem, 'my-unwanted-class' ) 10 | * classie.toggle( elem, 'my-class' ) 11 | */ 12 | 13 | /*jshint browser: true, strict: true, undef: true, unused: true */ 14 | /*global define: false, module: false */ 15 | 16 | ( function( window ) { 17 | 18 | 'use strict'; 19 | 20 | // class helper functions from bonzo https://github.com/ded/bonzo 21 | 22 | function classReg( className ) { 23 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 24 | } 25 | 26 | // classList support for class management 27 | // altho to be fair, the api sucks because it won't accept multiple classes at once 28 | var hasClass, addClass, removeClass; 29 | 30 | if ( 'classList' in document.documentElement ) { 31 | hasClass = function( elem, c ) { 32 | return elem.classList.contains( c ); 33 | }; 34 | addClass = function( elem, c ) { 35 | elem.classList.add( c ); 36 | }; 37 | removeClass = function( elem, c ) { 38 | elem.classList.remove( c ); 39 | }; 40 | } 41 | else { 42 | hasClass = function( elem, c ) { 43 | return classReg( c ).test( elem.className ); 44 | }; 45 | addClass = function( elem, c ) { 46 | if ( !hasClass( elem, c ) ) { 47 | elem.className = elem.className + ' ' + c; 48 | } 49 | }; 50 | removeClass = function( elem, c ) { 51 | elem.className = elem.className.replace( classReg( c ), ' ' ); 52 | }; 53 | } 54 | 55 | function toggleClass( elem, c ) { 56 | var fn = hasClass( elem, c ) ? removeClass : addClass; 57 | fn( elem, c ); 58 | } 59 | 60 | var classie = { 61 | // full names 62 | hasClass: hasClass, 63 | addClass: addClass, 64 | removeClass: removeClass, 65 | toggleClass: toggleClass, 66 | // short names 67 | has: hasClass, 68 | add: addClass, 69 | remove: removeClass, 70 | toggle: toggleClass 71 | }; 72 | 73 | // transport 74 | if ( typeof define === 'function' && define.amd ) { 75 | // AMD 76 | define( classie ); 77 | } else if ( typeof exports === 'object' ) { 78 | // CommonJS 79 | module.exports = classie; 80 | } else { 81 | // browser global 82 | window.classie = classie; 83 | } 84 | 85 | })( window ); -------------------------------------------------------------------------------- /js/dynamics.min.js: -------------------------------------------------------------------------------- 1 | (function(){var t,e,n,r,i,o,s,a,l,u,f,h,c,p,m,d,g,y,v,b,w,x,M,k,S,T,C,F,H,R,q,X,Y,j,z,I,A,G,V,Z,E,O,L,D,P,W,N,$,B,U,K,J,Q,_,te,ee,ne=function(t,e){return function(){return t.apply(e,arguments)}};H=function(){return"visible"===document.visibilityState||null!=T.tests},j=function(){var t;return t=[],"undefined"!=typeof document&&null!==document&&document.addEventListener("visibilitychange",function(){var e,n,r,i;for(i=[],n=0,r=t.length;r>n;n++)e=t[n],i.push(e(H()));return i}),function(e){return t.push(e)}}(),x=function(t){var e,n,r;n={};for(e in t)r=t[e],n[e]=r;return n},b=function(t){var e;return e={},function(){var n,r,i,o,s;for(r="",o=0,s=arguments.length;s>o;o++)n=arguments[o],r+=n.toString()+",";return i=e[r],i||(e[r]=i=t.apply(this,arguments)),i}},Y=function(t){return function(e){var n,r,i;return e instanceof Array||e instanceof NodeList||e instanceof HTMLCollection?i=function(){var i,o,s;for(s=[],r=i=0,o=e.length;o>=0?o>i:i>o;r=o>=0?++i:--i)n=Array.prototype.slice.call(arguments,1),n.splice(0,0,e[r]),s.push(t.apply(this,n));return s}.apply(this,arguments):t.apply(this,arguments)}},d=function(t,e){var n,r,i;i=[];for(n in e)r=e[n],i.push(null!=t[n]?t[n]:t[n]=r);return i},g=function(t,e){var n,r,i;if(null!=t.style)return y(t,e);i=[];for(n in e)r=e[n],i.push(t[n]=r.format());return i},y=function(t,e){var n,r,i,o,s;e=z(e),o=[],n=R(t);for(r in e)s=e[r],_.contains(r)?o.push([r,s]):(s=null!=s.format?s.format():""+s+ee(r,s),n&&B.contains(r)?t.setAttribute(r,s):t.style[A(r)]=s);return o.length>0?n?(i=new l,i.applyProperties(o),t.setAttribute("transform",i.decompose().format())):(s=o.map(function(t){return te(t[0],t[1])}).join(" "),t.style[A("transform")]=s):void 0},R=function(t){var e,n;return"undefined"!=typeof SVGElement&&null!==SVGElement&&"undefined"!=typeof SVGSVGElement&&null!==SVGSVGElement?t instanceof SVGElement&&!(t instanceof SVGSVGElement):null!=(e=null!=(n=T.tests)&&"function"==typeof n.isSVG?n.isSVG(t):void 0)?e:!1},Z=function(t,e){var n;return n=Math.pow(10,e),Math.round(t*n)/n},u=function(){function t(t){var e,n,r;for(this.obj={},n=0,r=t.length;r>n;n++)e=t[n],this.obj[e]=1}return t.prototype.contains=function(t){return 1===this.obj[t]},t}(),Q=function(t){return t.replace(/([A-Z])/g,function(t){return"-"+t.toLowerCase()})},G=new u("marginTop,marginLeft,marginBottom,marginRight,paddingTop,paddingLeft,paddingBottom,paddingRight,top,left,bottom,right,translateX,translateY,translateZ,perspectiveX,perspectiveY,perspectiveZ,width,height,maxWidth,maxHeight,minWidth,minHeight,borderRadius".split(",")),S=new u("rotate,rotateX,rotateY,rotateZ,skew,skewX,skewY,skewZ".split(",")),_=new u("translate,translateX,translateY,translateZ,scale,scaleX,scaleY,scaleZ,rotate,rotateX,rotateY,rotateZ,rotateC,rotateCX,rotateCY,skew,skewX,skewY,skewZ,perspective".split(",")),B=new u("accent-height,ascent,azimuth,baseFrequency,baseline-shift,bias,cx,cy,d,diffuseConstant,divisor,dx,dy,elevation,filterRes,fx,fy,gradientTransform,height,k1,k2,k3,k4,kernelMatrix,kernelUnitLength,letter-spacing,limitingConeAngle,markerHeight,markerWidth,numOctaves,order,overline-position,overline-thickness,pathLength,points,pointsAtX,pointsAtY,pointsAtZ,r,radius,rx,ry,seed,specularConstant,specularExponent,stdDeviation,stop-color,stop-opacity,strikethrough-position,strikethrough-thickness,surfaceScale,target,targetX,targetY,transform,underline-position,underline-thickness,viewBox,width,x,x1,x2,y,y1,y2,z".split(",")),ee=function(t,e){return"number"!=typeof e?"":G.contains(t)?"px":S.contains(t)?"deg":""},te=function(t,e){var n,r;return n=(""+e).match(/^([0-9.-]*)([^0-9]*)$/),null!=n?(e=n[1],r=n[2]):e=parseFloat(e),e=Z(parseFloat(e),10),(null==r||""===r)&&(r=ee(t,e)),""+t+"("+e+r+")"},z=function(t){var e,n,r,i,o,s,a,l;r={};for(i in t)if(o=t[i],_.contains(i))if(n=i.match(/(translate|rotateC|rotate|skew|scale|perspective)(X|Y|Z|)/),n&&n[2].length>0)r[i]=o;else for(l=["X","Y","Z"],s=0,a=l.length;a>s;s++)e=l[s],r[n[1]+e]=o;else r[i]=o;return r},k=function(t){var e;return e="opacity"===t?1:0,""+e+ee(t,e)},C=function(t,e){var n,r,i,o,s,u,f,h,c,p,m;if(o={},n=R(t),null!=t.style)for(s=window.getComputedStyle(t,null),f=0,c=e.length;c>f;f++)r=e[f],_.contains(r)?null==o.transform&&(i=n?new l(null!=(m=t.transform.baseVal.consolidate())?m.matrix:void 0):a.fromTransform(s[A("transform")]),o.transform=i.decompose()):(u=s[r],null==u&&B.contains(r)&&(u=t.getAttribute(r)),(""===u||null==u)&&(u=k(r)),o[r]=M(u));else for(h=0,p=e.length;p>h;h++)r=e[h],o[r]=M(t[r]);return o},M=function(t){var e,n,a,l,u;for(a=[i,r,o,s],l=0,u=a.length;u>l;l++)if(n=a[l],e=n.create(t),null!=e)return e;return null},o=function(){function t(t){this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this),this.obj=t}return t.prototype.interpolate=function(e,n){var r,i,o,s,a;s=this.obj,r=e.obj,o={};for(i in s)a=s[i],o[i]=null!=a.interpolate?a.interpolate(r[i],n):a;return new t(o)},t.prototype.format=function(){return this.obj},t.create=function(e){var n,r,i;if(e instanceof Object){r={};for(n in e)i=e[n],r[n]=M(i);return new t(r)}return null},t}(),s=function(){function t(t,e,n){this.prefix=e,this.suffix=n,this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this),this.value=parseFloat(t)}return t.prototype.interpolate=function(e,n){var r,i;return i=this.value,r=e.value,new t((r-i)*n+i,e.prefix||this.prefix,e.suffix||this.suffix)},t.prototype.format=function(){return null==this.prefix&&null==this.suffix?Z(this.value,5):this.prefix+Z(this.value,5)+this.suffix},t.create=function(e){var n;return"string"!=typeof e?new t(e):(n=(""+e).match("([^0-9.+-]*)([0-9.+-]+)([^0-9.+-]*)"),null!=n?new t(n[2],n[1],n[3]):null)},t}(),r=function(){function t(t,e){this.values=t,this.sep=e,this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this)}return t.prototype.interpolate=function(e,n){var r,i,o,s,a,l;for(s=this.values,r=e.values,o=[],i=a=0,l=Math.min(s.length,r.length);l>=0?l>a:a>l;i=l>=0?++a:--a)o.push(null!=s[i].interpolate?s[i].interpolate(r[i],n):s[i]);return new t(o,this.sep)},t.prototype.format=function(){var t;return t=this.values.map(function(t){return null!=t.format?t.format():t}),null!=this.sep?t.join(this.sep):t},t.createFromArray=function(e,n){var r;return r=e.map(function(t){return M(t)||t}),r=r.filter(function(t){return null!=t}),new t(r,n)},t.create=function(e){var n,r,i,o,s;if(e instanceof Array)return t.createFromArray(e,null);if("string"==typeof e){for(i=[" ",",","|",";","/",":"],o=0,s=i.length;s>o;o++)if(r=i[o],n=e.split(r),n.length>1)return t.createFromArray(n,r);return null}},t}(),t=function(){function t(t,e){this.rgb=null!=t?t:{},this.format=e,this.toRgba=ne(this.toRgba,this),this.toRgb=ne(this.toRgb,this),this.toHex=ne(this.toHex,this)}return t.fromHex=function(e){var n,r;return n=e.match(/^#([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i),null!=n&&(e="#"+n[1]+n[1]+n[2]+n[2]+n[3]+n[3]),r=e.match(/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i),null!=r?new t({r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16),a:1},"hex"):null},t.fromRgb=function(e){var n,r;return n=e.match(/^rgba?\(([0-9.]*), ?([0-9.]*), ?([0-9.]*)(?:, ?([0-9.]*))?\)$/),null!=n?new t({r:parseFloat(n[1]),g:parseFloat(n[2]),b:parseFloat(n[3]),a:parseFloat(null!=(r=n[4])?r:1)},null!=n[4]?"rgba":"rgb"):null},t.componentToHex=function(t){var e;return e=t.toString(16),1===e.length?"0"+e:e},t.prototype.toHex=function(){return"#"+t.componentToHex(this.rgb.r)+t.componentToHex(this.rgb.g)+t.componentToHex(this.rgb.b)},t.prototype.toRgb=function(){return"rgb("+this.rgb.r+", "+this.rgb.g+", "+this.rgb.b+")"},t.prototype.toRgba=function(){return"rgba("+this.rgb.r+", "+this.rgb.g+", "+this.rgb.b+", "+this.rgb.a+")"},t}(),i=function(){function e(t){this.color=t,this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this)}return e.prototype.interpolate=function(n,r){var i,o,s,a,l,u,f,h;for(a=this.color,i=n.color,s={},h=["r","g","b"],u=0,f=h.length;f>u;u++)o=h[u],l=Math.round((i.rgb[o]-a.rgb[o])*r+a.rgb[o]),s[o]=Math.min(255,Math.max(0,l));return o="a",l=Z((i.rgb[o]-a.rgb[o])*r+a.rgb[o],5),s[o]=Math.min(1,Math.max(0,l)),new e(new t(s,i.format))},e.prototype.format=function(){return"hex"===this.color.format?this.color.toHex():"rgb"===this.color.format?this.color.toRgb():"rgba"===this.color.format?this.color.toRgba():void 0},e.create=function(n){var r;if("string"==typeof n)return r=t.fromHex(n)||t.fromRgb(n),null!=r?new e(r):null},e}(),n=function(){function t(t){this.props=t,this.applyRotateCenter=ne(this.applyRotateCenter,this),this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this)}return t.prototype.interpolate=function(e,n){var r,i,o,s,a,l,u,f,h,c,p,m;for(o={},c=["translate","scale","rotate"],s=0,f=c.length;f>s;s++)for(i=c[s],o[i]=[],r=a=0,p=this.props[i].length;p>=0?p>a:a>p;r=p>=0?++a:--a)o[i][r]=(e.props[i][r]-this.props[i][r])*n+this.props[i][r];for(r=l=1;2>=l;r=++l)o.rotate[r]=e.props.rotate[r];for(m=["skew"],u=0,h=m.length;h>u;u++)i=m[u],o[i]=(e.props[i]-this.props[i])*n+this.props[i];return new t(o)},t.prototype.format=function(){return"translate("+this.props.translate.join(",")+") rotate("+this.props.rotate.join(",")+") skewX("+this.props.skew+") scale("+this.props.scale.join(",")+")"},t.prototype.applyRotateCenter=function(t){var e,n,r,i,o,s;for(n=v.createSVGMatrix(),n=n.translate(t[0],t[1]),n=n.rotate(this.props.rotate[0]),n=n.translate(-t[0],-t[1]),r=new l(n),i=r.decompose().props.translate,s=[],e=o=0;1>=o;e=++o)s.push(this.props.translate[e]-=i[e]);return s},t}(),v="undefined"!=typeof document&&null!==document?document.createElementNS("http://www.w3.org/2000/svg","svg"):void 0,l=function(){function t(t){this.m=t,this.applyProperties=ne(this.applyProperties,this),this.decompose=ne(this.decompose,this),this.m||(this.m=v.createSVGMatrix())}return t.prototype.decompose=function(){var t,e,r,i,o;return i=new f([this.m.a,this.m.b]),o=new f([this.m.c,this.m.d]),t=i.length(),r=i.dot(o),i=i.normalize(),e=o.combine(i,1,-r).length(),new n({translate:[this.m.e,this.m.f],rotate:[180*Math.atan2(this.m.b,this.m.a)/Math.PI,this.rotateCX,this.rotateCY],scale:[t,e],skew:r/e*180/Math.PI})},t.prototype.applyProperties=function(t){var e,n,r,i,o,s,a,l;for(e={},o=0,s=t.length;s>o;o++)r=t[o],e[r[0]]=r[1];for(n in e)i=e[n],"translateX"===n?this.m=this.m.translate(i,0):"translateY"===n?this.m=this.m.translate(0,i):"scaleX"===n?this.m=this.m.scale(i,1):"scaleY"===n?this.m=this.m.scale(1,i):"rotateZ"===n?this.m=this.m.rotate(i):"skewX"===n?this.m=this.m.skewX(i):"skewY"===n&&(this.m=this.m.skewY(i));return this.rotateCX=null!=(a=e.rotateCX)?a:0,this.rotateCY=null!=(l=e.rotateCY)?l:0},t}(),f=function(){function t(t){this.els=t,this.combine=ne(this.combine,this),this.normalize=ne(this.normalize,this),this.length=ne(this.length,this),this.cross=ne(this.cross,this),this.dot=ne(this.dot,this),this.e=ne(this.e,this)}return t.prototype.e=function(t){return 1>t||t>this.els.length?null:this.els[t-1]},t.prototype.dot=function(t){var e,n,r;if(e=t.els||t,r=0,n=this.els.length,n!==e.length)return null;for(n+=1;--n;)r+=this.els[n-1]*e[n-1];return r},t.prototype.cross=function(e){var n,r;return r=e.els||e,3!==this.els.length||3!==r.length?null:(n=this.els,new t([n[1]*r[2]-n[2]*r[1],n[2]*r[0]-n[0]*r[2],n[0]*r[1]-n[1]*r[0]]))},t.prototype.length=function(){var t,e,n,r,i;for(t=0,i=this.els,n=0,r=i.length;r>n;n++)e=i[n],t+=Math.pow(e,2);return Math.sqrt(t)},t.prototype.normalize=function(){var e,n,r,i,o;r=this.length(),i=[],o=this.els;for(n in o)e=o[n],i[n]=e/r;return new t(i)},t.prototype.combine=function(e,n,r){var i,o,s,a;for(o=[],i=s=0,a=this.els.length;a>=0?a>s:s>a;i=a>=0?++s:--s)o[i]=n*this.els[i]+r*e.els[i];return new t(o)},t}(),e=function(){function t(){this.toMatrix=ne(this.toMatrix,this),this.format=ne(this.format,this),this.interpolate=ne(this.interpolate,this)}return t.prototype.interpolate=function(e,n,r){var i,o,s,a,l,u,f,h,c,p,m,d,g,y,v,b,w,x;for(null==r&&(r=null),s=this,o=new t,w=["translate","scale","skew","perspective"],d=0,b=w.length;b>d;d++)for(f=w[d],o[f]=[],a=g=0,x=s[f].length-1;x>=0?x>=g:g>=x;a=x>=0?++g:--g)o[f][a]=null==r||r.indexOf(f)>-1||r.indexOf(""+f+["x","y","z"][a])>-1?(e[f][a]-s[f][a])*n+s[f][a]:s[f][a];if(null==r||-1!==r.indexOf("rotate")){if(h=s.quaternion,c=e.quaternion,i=h[0]*c[0]+h[1]*c[1]+h[2]*c[2]+h[3]*c[3],0>i){for(a=y=0;3>=y;a=++y)h[a]=-h[a];i=-i}for(i+1>.05?1-i>=.05?(m=Math.acos(i),u=1/Math.sin(m),p=Math.sin(m*(1-n))*u,l=Math.sin(m*n)*u):(p=1-n,l=n):(c[0]=-h[1],c[1]=h[0],c[2]=-h[3],c[3]=h[2],p=Math.sin(piDouble*(.5-n)),l=Math.sin(piDouble*n)),o.quaternion=[],a=v=0;3>=v;a=++v)o.quaternion[a]=h[a]*p+c[a]*l}else o.quaternion=s.quaternion;return o},t.prototype.format=function(){return this.toMatrix().toString()},t.prototype.toMatrix=function(){var t,e,n,r,i,o,s,l,u,f,h,c,p,m,d,g;for(t=this,i=a.I(4),e=p=0;3>=p;e=++p)i.els[e][3]=t.perspective[e];for(o=t.quaternion,f=o[0],h=o[1],c=o[2],u=o[3],s=t.skew,r=[[1,0],[2,0],[2,1]],e=m=2;m>=0;e=--m)s[e]&&(l=a.I(4),l.els[r[e][0]][r[e][1]]=s[e],i=i.multiply(l));for(i=i.multiply(new a([[1-2*(h*h+c*c),2*(f*h-c*u),2*(f*c+h*u),0],[2*(f*h+c*u),1-2*(f*f+c*c),2*(h*c-f*u),0],[2*(f*c-h*u),2*(h*c+f*u),1-2*(f*f+h*h),0],[0,0,0,1]])),e=d=0;2>=d;e=++d){for(n=g=0;2>=g;n=++g)i.els[e][n]*=t.scale[e];i.els[3][e]=t.translate[e]}return i},t}(),a=function(){function t(t){this.els=t,this.toString=ne(this.toString,this),this.decompose=ne(this.decompose,this),this.inverse=ne(this.inverse,this),this.augment=ne(this.augment,this),this.toRightTriangular=ne(this.toRightTriangular,this),this.transpose=ne(this.transpose,this),this.multiply=ne(this.multiply,this),this.dup=ne(this.dup,this),this.e=ne(this.e,this)}return t.prototype.e=function(t,e){return 1>t||t>this.els.length||1>e||e>this.els[0].length?null:this.els[t-1][e-1]},t.prototype.dup=function(){return new t(this.els)},t.prototype.multiply=function(e){var n,r,i,o,s,a,l,u,f,h,c,p,m;for(p=e.modulus?!0:!1,n=e.els||e,"undefined"==typeof n[0][0]&&(n=new t(n).els),h=this.els.length,l=h,u=n[0].length,i=this.els[0].length,o=[],h+=1;--h;)for(s=l-h,o[s]=[],c=u,c+=1;--c;){for(a=u-c,m=0,f=i,f+=1;--f;)r=i-f,m+=this.els[s][r]*n[r][a];o[s][a]=m}return n=new t(o),p?n.col(1):n},t.prototype.transpose=function(){var e,n,r,i,o,s,a;for(a=this.els.length,e=this.els[0].length,n=[],o=e,o+=1;--o;)for(r=e-o,n[r]=[],s=a,s+=1;--s;)i=a-s,n[r][i]=this.els[i][r];return new t(n)},t.prototype.toRightTriangular=function(){var t,e,n,r,i,o,s,a,l,u,f,h,c,p;for(t=this.dup(),a=this.els.length,i=a,o=this.els[0].length;--a;){if(n=i-a,0===t.els[n][n])for(r=f=c=n+1;i>=c?i>f:f>i;r=i>=c?++f:--f)if(0!==t.els[r][n]){for(e=[],l=o,l+=1;--l;)u=o-l,e.push(t.els[n][u]+t.els[r][u]);t.els[n]=e;break}if(0!==t.els[n][n])for(r=h=p=n+1;i>=p?i>h:h>i;r=i>=p?++h:--h){for(s=t.els[r][n]/t.els[n][n],e=[],l=o,l+=1;--l;)u=o-l,e.push(n>=u?0:t.els[r][u]-t.els[n][u]*s);t.els[r]=e}}return t},t.prototype.augment=function(e){var n,r,i,o,s,a,l,u,f;if(n=e.els||e,"undefined"==typeof n[0][0]&&(n=new t(n).els),r=this.dup(),i=r.els[0].length,u=r.els.length,a=u,l=n[0].length,u!==n.length)return null;for(u+=1;--u;)for(o=a-u,f=l,f+=1;--f;)s=l-f,r.els[o][i+s]=n[o][s];return r},t.prototype.inverse=function(){var e,n,r,i,o,s,a,l,u,f,h,c,p;for(f=this.els.length,a=f,e=this.augment(t.I(f)).toRightTriangular(),l=e.els[0].length,o=[],f+=1;--f;){for(i=f-1,r=[],h=l,o[i]=[],n=e.els[i][i],h+=1;--h;)c=l-h,u=e.els[i][c]/n,r.push(u),c>=a&&o[i].push(u);for(e.els[i]=r,s=p=0;i>=0?i>p:p>i;s=i>=0?++p:--p){for(r=[],h=l,h+=1;--h;)c=l-h,r.push(e.els[s][c]-e.els[i][c]*e.els[s][i]);e.els[s]=r}}return new t(o)},t.I=function(e){var n,r,i,o,s;for(n=[],o=e,e+=1;--e;)for(r=o-e,n[r]=[],s=o,s+=1;--s;)i=o-s,n[r][i]=r===i?1:0;return new t(n)},t.prototype.decompose=function(){var t,n,r,i,o,s,a,l,u,h,c,p,m,d,g,y,v,b,w,x,M,k,S,T,C,F,H,R,q,X,Y,j,z,I,A,G,V,Z;for(s=this,x=[],v=[],b=[],h=[],l=[],t=[],n=q=0;3>=q;n=++q)for(t[n]=[],i=X=0;3>=X;i=++X)t[n][i]=s.els[n][i];if(0===t[3][3])return!1;for(n=Y=0;3>=Y;n=++Y)for(i=j=0;3>=j;i=++j)t[n][i]/=t[3][3];for(u=s.dup(),n=z=0;2>=z;n=++z)u.els[n][3]=0;if(u.els[3][3]=1,0!==t[0][3]||0!==t[1][3]||0!==t[2][3]){for(p=new f(t.slice(0,4)[3]),r=u.inverse(),M=r.transpose(),l=M.multiply(p).els,n=I=0;2>=I;n=++I)t[n][3]=0;t[3][3]=1}else l=[0,0,0,1];for(n=A=0;2>=A;n=++A)x[n]=t[3][n],t[3][n]=0;for(d=[],n=G=0;2>=G;n=++G)d[n]=new f(t[n].slice(0,3));if(v[0]=d[0].length(),d[0]=d[0].normalize(),b[0]=d[0].dot(d[1]),d[1]=d[1].combine(d[0],1,-b[0]),v[1]=d[1].length(),d[1]=d[1].normalize(),b[0]/=v[1],b[1]=d[0].dot(d[2]),d[2]=d[2].combine(d[0],1,-b[1]),b[2]=d[1].dot(d[2]),d[2]=d[2].combine(d[1],1,-b[2]),v[2]=d[2].length(),d[2]=d[2].normalize(),b[1]/=v[2],b[2]/=v[2],a=d[1].cross(d[2]),d[0].dot(a)<0)for(n=V=0;2>=V;n=++V)for(v[n]*=-1,i=Z=0;2>=Z;i=++Z)d[n].els[i]*=-1;g=function(t,e){return d[t].els[e]},m=[],m[1]=Math.asin(-g(0,2)),0!==Math.cos(m[1])?(m[0]=Math.atan2(g(1,2),g(2,2)),m[2]=Math.atan2(g(0,1),g(0,0))):(m[0]=Math.atan2(-g(2,0),g(1,1)),m[1]=0),w=g(0,0)+g(1,1)+g(2,2)+1,w>1e-4?(y=.5/Math.sqrt(w),C=.25/y,F=(g(2,1)-g(1,2))*y,H=(g(0,2)-g(2,0))*y,R=(g(1,0)-g(0,1))*y):g(0,0)>g(1,1)&&g(0,0)>g(2,2)?(y=2*Math.sqrt(1+g(0,0)-g(1,1)-g(2,2)),F=.25*y,H=(g(0,1)+g(1,0))/y,R=(g(0,2)+g(2,0))/y,C=(g(2,1)-g(1,2))/y):g(1,1)>g(2,2)?(y=2*Math.sqrt(1+g(1,1)-g(0,0)-g(2,2)),F=(g(0,1)+g(1,0))/y,H=.25*y,R=(g(1,2)+g(2,1))/y,C=(g(0,2)-g(2,0))/y):(y=2*Math.sqrt(1+g(2,2)-g(0,0)-g(1,1)),F=(g(0,2)+g(2,0))/y,H=(g(1,2)+g(2,1))/y,R=.25*y,C=(g(1,0)-g(0,1))/y),h=[F,H,R,C],c=new e,c.translate=x,c.scale=v,c.skew=b,c.quaternion=h,c.perspective=l,c.rotate=m;for(S in c){k=c[S];for(o in k)T=k[o],isNaN(T)&&(k[o]=0)}return c},t.prototype.toString=function(){var t,e,n,r,i;for(n="matrix3d(",t=r=0;3>=r;t=++r)for(e=i=0;3>=i;e=++i)n+=Z(this.els[t][e],10),(3!==t||3!==e)&&(n+=",");return n+=")"},t.matrixForTransform=b(function(t){var e,n,r,i,o,s;return e=document.createElement("div"),e.style.position="absolute",e.style.visibility="hidden",e.style[A("transform")]=t,document.body.appendChild(e),r=window.getComputedStyle(e,null),n=null!=(i=null!=(o=r.transform)?o:r[A("transform")])?i:null!=(s=T.tests)?s.matrixForTransform(t):void 0,document.body.removeChild(e),n}),t.fromTransform=function(e){var n,r,i,o,s,a;for(o=null!=e?e.match(/matrix3?d?\(([-0-9,e \.]*)\)/):void 0,o?(n=o[1].split(","),n=n.map(parseFloat),r=6===n.length?[n[0],n[1],0,0,n[2],n[3],0,0,0,0,1,0,n[4],n[5],0,1]:n):r=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],s=[],i=a=0;3>=a;i=++a)s.push(r.slice(4*i,4*i+4));return new t(s)},t}(),I=b(function(t){var e,n,r,i,o,s,a,l,u,f;if(void 0!==document.body.style[t])return"";for(i=t.split("-"),o="",s=0,l=i.length;l>s;s++)r=i[s],o+=r.substring(0,1).toUpperCase()+r.substring(1);for(f=["Webkit","Moz","ms"],a=0,u=f.length;u>a;a++)if(n=f[a],e=n+o,void 0!==document.body.style[e])return n;return""}),A=b(function(t){var e;return e=I(t),"Moz"===e?""+e+(t.substring(0,1).toUpperCase()+t.substring(1)):""!==e?"-"+e.toLowerCase()+"-"+Q(t):Q(t)}),V="undefined"!=typeof window&&null!==window?window.requestAnimationFrame:void 0,p=[],m=[],P=!1,W=1,"undefined"!=typeof window&&null!==window&&window.addEventListener("keyup",function(t){return 68===t.keyCode&&t.shiftKey&&t.ctrlKey?T.toggleSlow():void 0}),null==V&&(q=0,V=function(t){var e,n,r;return e=Date.now(),r=Math.max(0,16-(e-q)),n=window.setTimeout(function(){return t(e+r)},r),q=e+r,n}),O=!1,E=!1,$=function(){return O?void 0:(O=!0,V(L))},L=function(t){var e,n,r,i;if(E)return void V(L);for(n=[],r=0,i=p.length;i>r;r++)e=p[r],c(t,e)||n.push(e);return p=p.filter(function(t){return-1===n.indexOf(t)}),0===p.length?O=!1:V(L)},c=function(t,e){var n,r,i,o,s,a,l,u;if(null==e.tStart&&(e.tStart=t),o=(t-e.tStart)/e.options.duration,s=e.curve(o),r={},o>=1)r=e.curve.initialForce?e.properties.start:e.properties.end;else{u=e.properties.start;for(n in u)i=u[n],r[n]=F(i,e.properties.end[n],s)}return g(e.el,r),"function"==typeof(a=e.options).change&&a.change(e.el),o>=1&&"function"==typeof(l=e.options).complete&&l.complete(e.el),1>o},F=function(t,e,n){return null!=t&&null!=t.interpolate?t.interpolate(e,n):null},N=function(t,e,n,r){var i,o,u,f,h,c,d,g;if(null!=r&&(m=m.filter(function(t){return t.id!==r})),T.stop(t,{timeout:!1}),!n.animated)return T.css(t,e),void("function"==typeof n.complete&&n.complete(this));e=z(e),h=C(t,Object.keys(e)),i={},c=[];for(u in e)d=e[u],_.contains(u)?c.push([u,d]):(i[u]=M(d),i[u]instanceof s&&null!=t.style&&(i[u].prefix="",null==(g=i[u]).suffix&&(g.suffix=ee(u,0))));return c.length>0&&(o=R(t),o?(f=new l,f.applyProperties(c)):(d=c.map(function(t){return te(t[0],t[1])}).join(" "),f=a.fromTransform(a.matrixForTransform(d))),i.transform=f.decompose(),o&&h.transform.applyRotateCenter([i.transform.props.rotate[1],i.transform.props.rotate[2]])),p.push({el:t,properties:{start:h,end:i},options:n,curve:n.type.call(n.type,n)}),$()},J=[],K=0,D=function(t){return H()?t.realTimeoutId=setTimeout(function(){return t.fn(),w(t.id)},t.delay):void 0},h=function(t,e){var n;return K+=1,n={id:K,tStart:Date.now(),fn:t,delay:e,originalDelay:e},D(n),J.push(n),K},w=function(t){return J=J.filter(function(e){return e.id===t&&clearTimeout(e.realTimeoutId),e.id!==t})},X=function(t,e){var n;return null!=t?(n=t-e.tStart,e.originalDelay-n):e.originalDelay},"undefined"!=typeof window&&null!==window&&window.addEventListener("unload",function(){}),U=null,j(function(t){var e,n,r,i,o,s,a,l,u,f;if(E=!t,t){if(O)for(n=Date.now()-U,o=0,l=p.length;l>o;o++)e=p[o],null!=e.tStart&&(e.tStart+=n);for(s=0,u=J.length;u>s;s++)r=J[s],r.delay=X(U,r),D(r);return U=null}for(U=Date.now(),f=[],i=0,a=J.length;a>i;i++)r=J[i],f.push(clearTimeout(r.realTimeoutId));return f}),T={},T.linear=function(){return function(t){return t}},T.spring=function(t){var e,n,r,i,o,s;return null==t&&(t={}),d(t,arguments.callee.defaults),i=Math.max(1,t.frequency/20),o=Math.pow(20,t.friction/100),s=t.anticipationSize/1e3,r=Math.max(0,s),e=function(e){var n,r,i,o,a;return n=.8,o=s/(1-s),a=0,i=(o-n*a)/(o-a),r=(n-i)/o,r*e*t.anticipationStrength/100+i},n=function(t){return Math.pow(o/10,-t)*(1-t)},function(t){var r,o,a,l,u,f,h,c;return f=t/(1-s)-s/(1-s),s>t?(c=s/(1-s)-s/(1-s),h=0/(1-s)-s/(1-s),u=Math.acos(1/e(c)),a=(Math.acos(1/e(h))-u)/(i*-s),r=e):(r=n,u=0,a=1),o=r(f),l=i*(t-s)*a+u,1-o*Math.cos(l)}},T.bounce=function(t){var e,n,r,i;return null==t&&(t={}),d(t,arguments.callee.defaults),r=Math.max(1,t.frequency/20),i=Math.pow(20,t.friction/100),e=function(t){return Math.pow(i/10,-t)*(1-t)},n=function(t){var n,i,o,s;return s=-1.57,i=1,n=e(t),o=r*t*i+s,n*Math.cos(o)},n.initialForce=!0,n},T.gravity=function(t){var e,n,r,i,o,s,a;return null==t&&(t={}),d(t,arguments.callee.defaults),n=Math.min(t.bounciness/1250,.8),i=t.elasticity/1e3,a=100,r=[],e=function(){var r,i;for(r=Math.sqrt(2/a),i={a:-r,b:r,H:1},t.initialForce&&(i.a=0,i.b=2*i.b);i.H>.001;)e=i.b-i.a,i={a:i.b,b:i.b+e*n,H:i.H*n*n};return i.b}(),s=function(n,r,i,o){var s,a;return e=r-n,a=2/e*o-1-2*n/e,s=a*a*i-i+1,t.initialForce&&(s=1-s),s},function(){var o,s,l,u;for(s=Math.sqrt(2/(a*e*e)),l={a:-s,b:s,H:1},t.initialForce&&(l.a=0,l.b=2*l.b),r.push(l),o=e,u=[];l.b<1&&l.H>.001;)o=l.b-l.a,l={a:l.b,b:l.b+o*n,H:l.H*i},u.push(r.push(l));return u}(),o=function(e){var n,i,o;for(i=0,n=r[i];!(e>=n.a&&e<=n.b)&&(i+=1,n=r[i]););return o=n?s(n.a,n.b,n.H,e):t.initialForce?0:1},o.initialForce=t.initialForce,o},T.forceWithGravity=function(t){return null==t&&(t={}),d(t,arguments.callee.defaults),t.initialForce=!0,T.gravity(t)},T.bezier=function(){var t,e,n;return e=function(t,e,n,r,i){return Math.pow(1-t,3)*e+3*Math.pow(1-t,2)*t*n+3*(1-t)*Math.pow(t,2)*r+Math.pow(t,3)*i},t=function(t,n,r,i,o){return{x:e(t,n.x,r.x,i.x,o.x),y:e(t,n.y,r.y,i.y,o.y)}},n=function(t,e,n){var r,i,o,s,a,l,u,f,h,c;for(r=null,h=0,c=e.length;c>h&&(i=e[h],t>=i(0).x&&t<=i(1).x&&(r=i),null===r);h++);if(!r)return n?0:1;for(f=1e-4,s=0,l=1,a=(l+s)/2,u=r(a).x,o=0;Math.abs(t-u)>f&&100>o;)t>u?s=a:l=a,a=(l+s)/2,u=r(a).x,o+=1;return r(a).y},function(e){var r,i,o;return null==e&&(e={}),i=e.points,o=!1,r=function(){var e,n,o;r=[],o=function(e,n){var i;return i=function(r){return t(r,e,e.cp[e.cp.length-1],n.cp[0],n)},r.push(i)};for(e in i){if(n=parseInt(e),n>=i.length-1)break;o(i[n],i[n+1])}return r}(),function(t){return 0===t?0:1===t?1:n(t,r,o)}}}(),T.easeInOut=function(t){var e,n;return null==t&&(t={}),e=null!=(n=t.friction)?n:arguments.callee.defaults.friction,T.bezier({points:[{x:0,y:0,cp:[{x:.92-e/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+e/1e3,y:1}]}]})},T.easeIn=function(t){var e,n;return null==t&&(t={}),e=null!=(n=t.friction)?n:arguments.callee.defaults.friction,T.bezier({points:[{x:0,y:0,cp:[{x:.92-e/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},T.easeOut=function(t){var e,n;return null==t&&(t={}),e=null!=(n=t.friction)?n:arguments.callee.defaults.friction,T.bezier({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+e/1e3,y:1}]}]})},T.spring.defaults={frequency:300,friction:200,anticipationSize:0,anticipationStrength:0},T.bounce.defaults={frequency:300,friction:200},T.forceWithGravity.defaults=T.gravity.defaults={bounciness:400,elasticity:200},T.easeInOut.defaults=T.easeIn.defaults=T.easeOut.defaults={friction:500},T.css=Y(function(t,e){return y(t,e,!0)}),T.animate=Y(function(t,e,n){var r;return null==n&&(n={}),n=x(n),d(n,{type:T.easeInOut,duration:1e3,delay:0,animated:!0}),n.duration=Math.max(0,n.duration*W),n.delay=Math.max(0,n.delay),0===n.delay?N(t,e,n):(r=T.setTimeout(function(){return N(t,e,n,r)},n.delay),m.push({id:r,el:t}))}),T.stop=Y(function(t,e){return null==e&&(e={}),null==e.timeout&&(e.timeout=!0),e.timeout&&(m=m.filter(function(n){return n.el!==t||null!=e.filter&&!e.filter(n)?!1:(T.clearTimeout(n.id),!0)})),p=p.filter(function(e){return e.el!==t})}),T.setTimeout=function(t,e){return h(t,e*W)},T.clearTimeout=function(t){return w(t)},T.toggleSlow=function(){return P=!P,W=P?3:1,"undefined"!=typeof console&&null!==console&&"function"==typeof console.log?console.log("dynamics.js: slow animations "+(P?"enabled":"disabled")):void 0},"object"==typeof module&&"object"==typeof module.exports?module.exports=T:"function"==typeof define&&define.amd?define(T):window.dynamics=T}).call(this); -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * main.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2015, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;(function(window) { 12 | 13 | 'use strict'; 14 | 15 | var bodyEl = document.body, 16 | docElem = window.document.documentElement, 17 | support = { transitions: Modernizr.csstransitions }, 18 | // transition end event name 19 | transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, 20 | transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], 21 | onEndTransition = function( el, callback ) { 22 | var onEndCallbackFn = function( ev ) { 23 | if( support.transitions ) { 24 | if( ev.target != this ) return; 25 | this.removeEventListener( transEndEventName, onEndCallbackFn ); 26 | } 27 | if( callback && typeof callback === 'function' ) { callback.call(this); } 28 | }; 29 | if( support.transitions ) { 30 | el.addEventListener( transEndEventName, onEndCallbackFn ); 31 | } 32 | else { 33 | onEndCallbackFn(); 34 | } 35 | }, 36 | // window sizes 37 | win = {width: window.innerWidth, height: window.innerHeight}, 38 | // some helper vars to disallow scrolling 39 | lockScroll = false, xscroll, yscroll, 40 | scrollContainer = document.querySelector('.container'), 41 | // the main slider and its items 42 | sliderEl = document.querySelector('.slider'), 43 | items = [].slice.call(sliderEl.querySelectorAll('.slide')), 44 | // total number of items 45 | itemsTotal = items.length, 46 | // navigation controls/arrows 47 | navRightCtrl = sliderEl.querySelector('.button--nav-next'), 48 | navLeftCtrl = sliderEl.querySelector('.button--nav-prev'), 49 | zoomCtrl = sliderEl.querySelector('.button--zoom'), 50 | // the main content element 51 | contentEl = document.querySelector('.content'), 52 | // close content control 53 | closeContentCtrl = contentEl.querySelector('button.button--close'), 54 | // index of current item 55 | current = 0, 56 | // check if an item is "open" 57 | isOpen = false, 58 | isFirefox = typeof InstallTrigger !== 'undefined', 59 | // scale body when zooming into the items, if not Firefox (the performance in Firefox is not very good) 60 | bodyScale = isFirefox ? false : 3; 61 | 62 | // some helper functions: 63 | function scrollX() { return window.pageXOffset || docElem.scrollLeft; } 64 | function scrollY() { return window.pageYOffset || docElem.scrollTop; } 65 | // from http://www.sberry.me/articles/javascript-event-throttling-debouncing 66 | function throttle(fn, delay) { 67 | var allowSample = true; 68 | 69 | return function(e) { 70 | if (allowSample) { 71 | allowSample = false; 72 | setTimeout(function() { allowSample = true; }, delay); 73 | fn(e); 74 | } 75 | }; 76 | } 77 | 78 | function init() { 79 | initEvents(); 80 | } 81 | 82 | // event binding 83 | function initEvents() { 84 | // open items 85 | zoomCtrl.addEventListener('click', function() { 86 | openItem(items[current]); 87 | }); 88 | 89 | // close content 90 | closeContentCtrl.addEventListener('click', closeContent); 91 | 92 | // navigation 93 | navRightCtrl.addEventListener('click', function() { navigate('right'); }); 94 | navLeftCtrl.addEventListener('click', function() { navigate('left'); }); 95 | 96 | // window resize 97 | window.addEventListener('resize', throttle(function(ev) { 98 | // reset window sizes 99 | win = {width: window.innerWidth, height: window.innerHeight}; 100 | 101 | // reset transforms for the items (slider items) 102 | items.forEach(function(item, pos) { 103 | if( pos === current ) return; 104 | var el = item.querySelector('.slide__mover'); 105 | dynamics.css(el, { translateX: el.offsetWidth }); 106 | }); 107 | }, 10)); 108 | 109 | // keyboard navigation events 110 | document.addEventListener( 'keydown', function( ev ) { 111 | if( isOpen ) return; 112 | var keyCode = ev.keyCode || ev.which; 113 | switch (keyCode) { 114 | case 37: 115 | navigate('left'); 116 | break; 117 | case 39: 118 | navigate('right'); 119 | break; 120 | } 121 | } ); 122 | } 123 | 124 | // opens one item 125 | function openItem(item) { 126 | if( isOpen ) return; 127 | isOpen = true; 128 | 129 | // the element that will be transformed 130 | var zoomer = item.querySelector('.zoomer'); 131 | // slide screen preview 132 | classie.add(zoomer, 'zoomer--active'); 133 | // disallow scroll 134 | scrollContainer.addEventListener('scroll', noscroll); 135 | // apply transforms 136 | applyTransforms(zoomer); 137 | // also scale the body so it looks the camera moves to the item. 138 | if( bodyScale ) { 139 | dynamics.animate(bodyEl, { scale: bodyScale }, { type: dynamics.easeInOut, duration: 500 }); 140 | } 141 | // after the transition is finished: 142 | onEndTransition(zoomer, function() { 143 | // reset body transform 144 | if( bodyScale ) { 145 | dynamics.stop(bodyEl); 146 | dynamics.css(bodyEl, { scale: 1 }); 147 | 148 | // fix for safari (allowing fixed children to keep position) 149 | bodyEl.style.WebkitTransform = 'none'; 150 | bodyEl.style.transform = 'none'; 151 | } 152 | // no scrolling 153 | classie.add(bodyEl, 'noscroll'); 154 | classie.add(contentEl, 'content--open'); 155 | var contentItem = document.getElementById(item.getAttribute('data-content')) 156 | classie.add(contentItem, 'content__item--current'); 157 | classie.add(contentItem, 'content__item--reset'); 158 | 159 | 160 | // reset zoomer transform - back to its original position/transform without a transition 161 | classie.add(zoomer, 'zoomer--notrans'); 162 | zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)'; 163 | zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)'; 164 | }); 165 | } 166 | 167 | // closes the item/content 168 | function closeContent() { 169 | var contentItem = contentEl.querySelector('.content__item--current'), 170 | zoomer = items[current].querySelector('.zoomer'); 171 | 172 | classie.remove(contentEl, 'content--open'); 173 | classie.remove(contentItem, 'content__item--current'); 174 | classie.remove(bodyEl, 'noscroll'); 175 | 176 | if( bodyScale ) { 177 | // reset fix for safari (allowing fixed children to keep position) 178 | bodyEl.style.WebkitTransform = ''; 179 | bodyEl.style.transform = ''; 180 | } 181 | 182 | /* fix for safari flickering */ 183 | var nobodyscale = true; 184 | applyTransforms(zoomer, nobodyscale); 185 | /* fix for safari flickering */ 186 | 187 | // wait for the inner content to finish the transition 188 | onEndTransition(contentItem, function(ev) { 189 | classie.remove(this, 'content__item--reset'); 190 | 191 | // reset scrolling permission 192 | lockScroll = false; 193 | scrollContainer.removeEventListener('scroll', noscroll); 194 | 195 | /* fix for safari flickering */ 196 | zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)'; 197 | zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)'; 198 | /* fix for safari flickering */ 199 | 200 | // scale up - behind the scenes - the item again (without transition) 201 | applyTransforms(zoomer); 202 | 203 | // animate/scale down the item 204 | setTimeout(function() { 205 | classie.remove(zoomer, 'zoomer--notrans'); 206 | classie.remove(zoomer, 'zoomer--active'); 207 | zoomer.style.WebkitTransform = 'translate3d(0,0,0) scale3d(1,1,1)'; 208 | zoomer.style.transform = 'translate3d(0,0,0) scale3d(1,1,1)'; 209 | }, 25); 210 | 211 | if( bodyScale ) { 212 | dynamics.css(bodyEl, { scale: bodyScale }); 213 | dynamics.animate(bodyEl, { scale: 1 }, { 214 | type: dynamics.easeInOut, 215 | duration: 500 216 | }); 217 | } 218 | 219 | isOpen = false; 220 | }); 221 | } 222 | 223 | // applies the necessary transform value to scale the item up 224 | function applyTransforms(el, nobodyscale) { 225 | // zoomer area and scale value 226 | var zoomerArea = el.querySelector('.zoomer__area'), 227 | zoomerAreaSize = {width: zoomerArea.offsetWidth, height: zoomerArea.offsetHeight}, 228 | zoomerOffset = zoomerArea.getBoundingClientRect(), 229 | scaleVal = zoomerAreaSize.width/zoomerAreaSize.height < win.width/win.height ? win.width/zoomerAreaSize.width : win.height/zoomerAreaSize.height; 230 | 231 | if( bodyScale && !nobodyscale ) { 232 | scaleVal /= bodyScale; 233 | } 234 | 235 | // apply transform 236 | el.style.WebkitTransform = 'translate3d(' + Number(win.width/2 - (zoomerOffset.left+zoomerAreaSize.width/2)) + 'px,' + Number(win.height/2 - (zoomerOffset.top+zoomerAreaSize.height/2)) + 'px,0) scale3d(' + scaleVal + ',' + scaleVal + ',1)'; 237 | el.style.transform = 'translate3d(' + Number(win.width/2 - (zoomerOffset.left+zoomerAreaSize.width/2)) + 'px,' + Number(win.height/2 - (zoomerOffset.top+zoomerAreaSize.height/2)) + 'px,0) scale3d(' + scaleVal + ',' + scaleVal + ',1)'; 238 | } 239 | 240 | // navigate the slider 241 | function navigate(dir) { 242 | var itemCurrent = items[current], 243 | currentEl = itemCurrent.querySelector('.slide__mover'), 244 | currentTitleEl = itemCurrent.querySelector('.slide__title'); 245 | 246 | // update new current value 247 | if( dir === 'right' ) { 248 | current = current < itemsTotal-1 ? current + 1 : 0; 249 | } 250 | else { 251 | current = current > 0 ? current - 1 : itemsTotal-1; 252 | } 253 | 254 | var itemNext = items[current], 255 | nextEl = itemNext.querySelector('.slide__mover'), 256 | nextTitleEl = itemNext.querySelector('.slide__title'); 257 | 258 | // animate the current element out 259 | dynamics.animate(currentEl, { opacity: 0, translateX: dir === 'right' ? -1*currentEl.offsetWidth/2 : currentEl.offsetWidth/2, rotateZ: dir === 'right' ? -10 : 10 }, { 260 | type: dynamics.spring, 261 | duration: 2000, 262 | friction: 600, 263 | complete: function() { 264 | dynamics.css(itemCurrent, { opacity: 0, visibility: 'hidden' }); 265 | } 266 | }); 267 | 268 | // animate the current title out 269 | dynamics.animate(currentTitleEl, { translateX: dir === 'right' ? -250 : 250, opacity: 0 }, { 270 | type: dynamics.bezier, 271 | points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], 272 | duration: 450 273 | }); 274 | 275 | // set the right properties for the next element to come in 276 | dynamics.css(itemNext, { opacity: 1, visibility: 'visible' }); 277 | dynamics.css(nextEl, { opacity: 0, translateX: dir === 'right' ? nextEl.offsetWidth/2 : -1*nextEl.offsetWidth/2, rotateZ: dir === 'right' ? 10 : -10 }); 278 | 279 | // animate the next element in 280 | dynamics.animate(nextEl, { opacity: 1, translateX: 0 }, { 281 | type: dynamics.spring, 282 | duration: 2000, 283 | friction: 600, 284 | complete: function() { 285 | items.forEach(function(item) { classie.remove(item, 'slide--current'); }); 286 | classie.add(itemNext, 'slide--current'); 287 | } 288 | }); 289 | 290 | // set the right properties for the next title to come in 291 | dynamics.css(nextTitleEl, { translateX: dir === 'right' ? 250 : -250, opacity: 0 }); 292 | // animate the next title in 293 | dynamics.animate(nextTitleEl, { translateX: 0, opacity: 1 }, { 294 | type: dynamics.bezier, 295 | points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}], 296 | duration: 650 297 | }); 298 | } 299 | 300 | // disallow scrolling (on the scrollContainer) 301 | function noscroll() { 302 | if(!lockScroll) { 303 | lockScroll = true; 304 | xscroll = scrollContainer.scrollLeft; 305 | yscroll = scrollContainer.scrollTop; 306 | } 307 | scrollContainer.scrollTop = yscroll; 308 | scrollContainer.scrollLeft = xscroll; 309 | } 310 | 311 | init(); 312 | 313 | })(window); -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.3 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransitions-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.8.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(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=t.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(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransitions=function(){return D("transition")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(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},x(""),i=k=null,function(a,b){function l(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 m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=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){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.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