├── README.md ├── ReadMe.txt ├── css ├── demo.css ├── font │ ├── LICENSE.txt │ ├── README.txt │ ├── icon.eot │ ├── icon.svg │ ├── icon.ttf │ └── icon.woff ├── normalize.css ├── noscript.css └── style.css ├── images ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg └── 5.jpg ├── index.html └── js ├── modernizr.custom.79639.js └── slider.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | VerticalShowcaseSlider 3 | ========= 4 | 5 | A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We'll be using jQuery, CSS Transitions and media queries to make the layout adaptive. 6 | 7 | [article on Codrops](http://tympanus.net/codrops/2012/10/01/vertical-showcase-slider-with-jquery-and-css-transitions/) 8 | 9 | [demo](http://tympanus.net/Tutorials/VerticalShowcaseSlider/) 10 | 11 | Licensed under the MIT License -------------------------------------------------------------------------------- /ReadMe.txt: -------------------------------------------------------------------------------- 1 | Created by Codrops 2 | License: http://tympanus.net/codrops/licensing/ 3 | 4 | Background Pattern(s) from http://subtlepatterns.com/ 5 | http://creativecommons.org/licenses/by-sa/3.0/deed.en_US 6 | 7 | normalize.css by Nicolas Gallagher: http://github.com/necolas/normalize.css 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | html { height: 100%; } 3 | 4 | body { 5 | font-family: 'Dosis', Arial, sans-serif; 6 | background: #fff; 7 | font-weight: 400; 8 | font-size: 15px; 9 | color: #333; 10 | -webkit-font-smoothing: antialiased; 11 | overflow: hidden; 12 | } 13 | 14 | a { 15 | color: #555; 16 | text-decoration: none; 17 | } 18 | 19 | /* Header Style */ 20 | .codrops-top { 21 | line-height: 24px; 22 | font-size: 11px; 23 | background: #fff; 24 | background: rgba(255, 255, 255, 0.6); 25 | text-transform: uppercase; 26 | z-index: 9999; 27 | position: absolute; 28 | top: 0px; 29 | width: 100%; 30 | left: 0px; 31 | box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 32 | } 33 | 34 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 35 | 36 | .codrops-top:before, 37 | .codrops-top:after { 38 | content: " "; /* 1 */ 39 | display: table; /* 2 */ 40 | } 41 | 42 | .codrops-top:after { 43 | clear: both 44 | } 45 | 46 | .codrops-top a{ 47 | padding: 0px 10px; 48 | letter-spacing: 1px; 49 | color: #555; 50 | display: inline-block; 51 | } 52 | 53 | .codrops-top a:hover { 54 | color: #000; 55 | } 56 | 57 | .codrops-top span.right { 58 | float: right; 59 | } 60 | 61 | .codrops-top span.right a { 62 | float: left; 63 | display: block; 64 | } 65 | 66 | .support-note span{ 67 | color: #ac375d; 68 | font-size: 16px; 69 | display: none; 70 | font-weight: bold; 71 | text-align: center; 72 | padding: 5px 0; 73 | } 74 | 75 | .no-cssanimations .support-note span.no-cssanimations, 76 | .no-csstransforms .support-note span.no-csstransforms, 77 | .no-csstransforms3d .support-note span.no-csstransforms3d, 78 | .no-csstransitions .support-note span.no-csstransitions{ 79 | display: block; 80 | } 81 | 82 | @media screen and (max-width: 860px) { 83 | .codrops-top { 84 | display: none; 85 | } 86 | } -------------------------------------------------------------------------------- /css/font/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Font license info 2 | 3 | 4 | ## Font Awesome 5 | 6 | Copyright (C) 2012 by Dave Gandy 7 | 8 | Author: Dave Gandy 9 | License: CC BY 3.0 (http://creativecommons.org/licenses/by/3.0/) 10 | Homepage: http://fortawesome.github.com/Font-Awesome/ 11 | 12 | 13 | -------------------------------------------------------------------------------- /css/font/README.txt: -------------------------------------------------------------------------------- 1 | This webfont is generated by http://fontello.com open source project. 2 | 3 | 4 | ================================================================================ 5 | Please, note, that you should obey original font licences, used to make this 6 | webfont pack. Details available in LICENSE.txt file. 7 | 8 | - Usually, it's enougth to publish content of LICENSE.txt file somewhere on your 9 | site in "About" section. 10 | 11 | - If your project is open-source, usually, it will be ok to make LICENSE.txt 12 | file publically available in your repository. 13 | 14 | - Fonts, used in Fontello, don't require to make clickable links on your site. 15 | But any kind of additional authors crediting is welcome. 16 | ================================================================================ 17 | 18 | 19 | Attention for server setup (IE users and others) 20 | ------------------------------------------------ 21 | 22 | You MUST setup server to reply with proper `mime-types` for font files. In other 23 | case, some browsers will fail to show fonts. 24 | 25 | Usually, `apache` already has necessary settings, but `nginx` and other 26 | webservers should be tuned. Here is list of mime types for our file extentions: 27 | 28 | - `application/vnd.ms-fontobject` - eot 29 | - `application/x-font-woff` - woff 30 | - `application/x-font-ttf` - ttf 31 | - `image/svg+xml` - svg 32 | 33 | 34 | Comments on archive content 35 | --------------------------- 36 | 37 | - /font/* - fonts in different formats 38 | 39 | - /css/* - different kinds of css, for all situations. Should be ok with 40 | twitter bootstrap. Also, you can skip style and assign icon classes 41 | directly to text elements 42 | 43 | - demo.html - demo file, to show your webfont content 44 | 45 | - LICENSE.txt - license info about source fonts, used to build your one. 46 | 47 | - config.json - keeps your settings. You can import it back to fontello anytime, 48 | to continue your work 49 | -------------------------------------------------------------------------------- /css/font/icon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/VerticalShowcaseSlider/0145fbdc057a2c27165ca6a5c156ea14eb74ef18/css/font/icon.eot -------------------------------------------------------------------------------- /css/font/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20100429 at Sat Sep 29 18:59:31 2012 6 | By root 7 | Copyright (C) 2012 by original authors @ fontello.com 8 | 9 | 10 | 11 | 24 | 26 | 28 | 30 | 32 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /css/font/icon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/VerticalShowcaseSlider/0145fbdc057a2c27165ca6a5c156ea14eb74ef18/css/font/icon.ttf -------------------------------------------------------------------------------- /css/font/icon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/VerticalShowcaseSlider/0145fbdc057a2c27165ca6a5c156ea14eb74ef18/css/font/icon.woff -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */ 2 | 3 | /* ============================================================================= 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /* 8 | * Corrects block display not defined in IE6/7/8/9 & FF3 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | nav, 20 | section, 21 | summary { 22 | display: block; 23 | } 24 | 25 | /* 26 | * Corrects inline-block display not defined in IE6/7/8/9 & FF3 27 | */ 28 | 29 | audio, 30 | canvas, 31 | video { 32 | display: inline-block; 33 | *display: inline; 34 | *zoom: 1; 35 | } 36 | 37 | /* 38 | * Prevents modern browsers from displaying 'audio' without controls 39 | * Remove excess height in iOS5 devices 40 | */ 41 | 42 | audio:not([controls]) { 43 | display: none; 44 | height: 0; 45 | } 46 | 47 | /* 48 | * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 49 | * Known issue: no IE6 support 50 | */ 51 | 52 | [hidden] { 53 | display: none; 54 | } 55 | 56 | 57 | /* ============================================================================= 58 | Base 59 | ========================================================================== */ 60 | 61 | /* 62 | * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units 63 | * http://clagnut.com/blog/348/#c790 64 | * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom 65 | * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ 66 | */ 67 | 68 | html { 69 | font-size: 100%; /* 1 */ 70 | -webkit-text-size-adjust: 100%; /* 2 */ 71 | -ms-text-size-adjust: 100%; /* 2 */ 72 | } 73 | 74 | /* 75 | * Addresses font-family inconsistency between 'textarea' and other form elements. 76 | */ 77 | 78 | html, 79 | button, 80 | input, 81 | select, 82 | textarea { 83 | font-family: sans-serif; 84 | } 85 | 86 | /* 87 | * Addresses margins handled incorrectly in IE6/7 88 | */ 89 | 90 | body { 91 | margin: 0; 92 | } 93 | 94 | 95 | /* ============================================================================= 96 | Links 97 | ========================================================================== */ 98 | 99 | /* 100 | * Addresses outline displayed oddly in Chrome 101 | */ 102 | 103 | a:focus { 104 | outline: thin dotted; 105 | } 106 | 107 | /* 108 | * Improves readability when focused and also mouse hovered in all browsers 109 | * people.opera.com/patrickl/experiments/keyboard/test 110 | */ 111 | 112 | a:hover, 113 | a:active { 114 | outline: 0; 115 | } 116 | 117 | 118 | /* ============================================================================= 119 | Typography 120 | ========================================================================== */ 121 | 122 | /* 123 | * Addresses font sizes and margins set differently in IE6/7 124 | * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 125 | */ 126 | 127 | h1 { 128 | font-size: 2em; 129 | margin: 0.67em 0; 130 | } 131 | 132 | h2 { 133 | font-size: 1.5em; 134 | margin: 0.83em 0; 135 | } 136 | 137 | h3 { 138 | font-size: 1.17em; 139 | margin: 1em 0; 140 | } 141 | 142 | h4 { 143 | font-size: 1em; 144 | margin: 1.33em 0; 145 | } 146 | 147 | h5 { 148 | font-size: 0.83em; 149 | margin: 1.67em 0; 150 | } 151 | 152 | h6 { 153 | font-size: 0.75em; 154 | margin: 2.33em 0; 155 | } 156 | 157 | /* 158 | * Addresses styling not present in IE7/8/9, S5, Chrome 159 | */ 160 | 161 | abbr[title] { 162 | border-bottom: 1px dotted; 163 | } 164 | 165 | /* 166 | * Addresses style set to 'bolder' in FF3+, S4/5, Chrome 167 | */ 168 | 169 | b, 170 | strong { 171 | font-weight: bold; 172 | } 173 | 174 | blockquote { 175 | margin: 1em 40px; 176 | } 177 | 178 | /* 179 | * Addresses styling not present in S5, Chrome 180 | */ 181 | 182 | dfn { 183 | font-style: italic; 184 | } 185 | 186 | /* 187 | * Addresses styling not present in IE6/7/8/9 188 | */ 189 | 190 | mark { 191 | background: #ff0; 192 | color: #000; 193 | } 194 | 195 | /* 196 | * Addresses margins set differently in IE6/7 197 | */ 198 | 199 | p, 200 | pre { 201 | margin: 1em 0; 202 | } 203 | 204 | /* 205 | * Corrects font family set oddly in IE6, S4/5, Chrome 206 | * en.wikipedia.org/wiki/User:Davidgothberg/Test59 207 | */ 208 | 209 | pre, 210 | code, 211 | kbd, 212 | samp { 213 | font-family: monospace, serif; 214 | _font-family: 'courier new', monospace; 215 | font-size: 1em; 216 | } 217 | 218 | /* 219 | * Improves readability of pre-formatted text in all browsers 220 | */ 221 | 222 | pre { 223 | white-space: pre; 224 | white-space: pre-wrap; 225 | word-wrap: break-word; 226 | } 227 | 228 | /* 229 | * 1. Addresses CSS quotes not supported in IE6/7 230 | * 2. Addresses quote property not supported in S4 231 | */ 232 | 233 | /* 1 */ 234 | 235 | q { 236 | quotes: none; 237 | } 238 | 239 | /* 2 */ 240 | 241 | q:before, 242 | q:after { 243 | content: ''; 244 | content: none; 245 | } 246 | 247 | small { 248 | font-size: 75%; 249 | } 250 | 251 | /* 252 | * Prevents sub and sup affecting line-height in all browsers 253 | * gist.github.com/413930 254 | */ 255 | 256 | sub, 257 | sup { 258 | font-size: 75%; 259 | line-height: 0; 260 | position: relative; 261 | vertical-align: baseline; 262 | } 263 | 264 | sup { 265 | top: -0.5em; 266 | } 267 | 268 | sub { 269 | bottom: -0.25em; 270 | } 271 | 272 | 273 | /* ============================================================================= 274 | Lists 275 | ========================================================================== */ 276 | 277 | /* 278 | * Addresses margins set differently in IE6/7 279 | */ 280 | 281 | dl, 282 | menu, 283 | ol, 284 | ul { 285 | margin: 1em 0; 286 | } 287 | 288 | dd { 289 | margin: 0 0 0 40px; 290 | } 291 | 292 | /* 293 | * Addresses paddings set differently in IE6/7 294 | */ 295 | 296 | menu, 297 | ol, 298 | ul { 299 | padding: 0 0 0 40px; 300 | } 301 | 302 | /* 303 | * Corrects list images handled incorrectly in IE7 304 | */ 305 | 306 | nav ul, 307 | nav ol { 308 | list-style: none; 309 | list-style-image: none; 310 | } 311 | 312 | 313 | /* ============================================================================= 314 | Embedded content 315 | ========================================================================== */ 316 | 317 | /* 318 | * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 319 | * 2. Improves image quality when scaled in IE7 320 | * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ 321 | */ 322 | 323 | img { 324 | border: 0; /* 1 */ 325 | -ms-interpolation-mode: bicubic; /* 2 */ 326 | } 327 | 328 | /* 329 | * Corrects overflow displayed oddly in IE9 330 | */ 331 | 332 | svg:not(:root) { 333 | overflow: hidden; 334 | } 335 | 336 | 337 | /* ============================================================================= 338 | Figures 339 | ========================================================================== */ 340 | 341 | /* 342 | * Addresses margin not present in IE6/7/8/9, S5, O11 343 | */ 344 | 345 | figure { 346 | margin: 0; 347 | -webkit-margin-before: 0; 348 | -webkit-margin-after: 0; 349 | -webkit-margin-start: 0; 350 | -webkit-margin-end: 0; 351 | } 352 | 353 | 354 | /* ============================================================================= 355 | Forms 356 | ========================================================================== */ 357 | 358 | /* 359 | * Corrects margin displayed oddly in IE6/7 360 | */ 361 | 362 | form { 363 | margin: 0; 364 | } 365 | 366 | /* 367 | * Define consistent border, margin, and padding 368 | */ 369 | 370 | fieldset { 371 | border: 1px solid #c0c0c0; 372 | margin: 0 2px; 373 | padding: 0.35em 0.625em 0.75em; 374 | } 375 | 376 | /* 377 | * 1. Corrects color not being inherited in IE6/7/8/9 378 | * 2. Corrects text not wrapping in FF3 379 | * 3. Corrects alignment displayed oddly in IE6/7 380 | */ 381 | 382 | legend { 383 | border: 0; /* 1 */ 384 | padding: 0; 385 | white-space: normal; /* 2 */ 386 | *margin-left: -7px; /* 3 */ 387 | } 388 | 389 | /* 390 | * 1. Corrects font size not being inherited in all browsers 391 | * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome 392 | * 3. Improves appearance and consistency in all browsers 393 | */ 394 | 395 | button, 396 | input, 397 | select, 398 | textarea { 399 | font-size: 100%; /* 1 */ 400 | margin: 0; /* 2 */ 401 | vertical-align: baseline; /* 3 */ 402 | *vertical-align: middle; /* 3 */ 403 | } 404 | 405 | /* 406 | * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet 407 | */ 408 | 409 | button, 410 | input { 411 | line-height: normal; /* 1 */ 412 | } 413 | 414 | /* 415 | * 1. Improves usability and consistency of cursor style between image-type 'input' and others 416 | * 2. Corrects inability to style clickable 'input' types in iOS 417 | * 3. Removes inner spacing in IE7 without affecting normal text inputs 418 | * Known issue: inner spacing remains in IE6 419 | */ 420 | 421 | button, 422 | input[type="button"], 423 | input[type="reset"], 424 | input[type="submit"] { 425 | cursor: pointer; /* 1 */ 426 | -webkit-appearance: button; /* 2 */ 427 | *overflow: visible; /* 3 */ 428 | } 429 | 430 | /* 431 | * Re-set default cursor for disabled elements 432 | */ 433 | 434 | button[disabled], 435 | input[disabled] { 436 | cursor: default; 437 | } 438 | 439 | /* 440 | * 1. Addresses box sizing set to content-box in IE8/9 441 | * 2. Removes excess padding in IE8/9 442 | * 3. Removes excess padding in IE7 443 | Known issue: excess padding remains in IE6 444 | */ 445 | 446 | input[type="checkbox"], 447 | input[type="radio"] { 448 | box-sizing: border-box; /* 1 */ 449 | padding: 0; /* 2 */ 450 | *height: 13px; /* 3 */ 451 | *width: 13px; /* 3 */ 452 | } 453 | 454 | /* 455 | * 1. Addresses appearance set to searchfield in S5, Chrome 456 | * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) 457 | */ 458 | 459 | input[type="search"] { 460 | -webkit-appearance: textfield; /* 1 */ 461 | -moz-box-sizing: content-box; 462 | -webkit-box-sizing: content-box; /* 2 */ 463 | box-sizing: content-box; 464 | } 465 | 466 | /* 467 | * Removes inner padding and search cancel button in S5, Chrome on OS X 468 | */ 469 | 470 | input[type="search"]::-webkit-search-decoration, 471 | input[type="search"]::-webkit-search-cancel-button { 472 | -webkit-appearance: none; 473 | } 474 | 475 | /* 476 | * Removes inner padding and border in FF3+ 477 | * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 478 | */ 479 | 480 | button::-moz-focus-inner, 481 | input::-moz-focus-inner { 482 | border: 0; 483 | padding: 0; 484 | } 485 | 486 | /* 487 | * 1. Removes default vertical scrollbar in IE6/7/8/9 488 | * 2. Improves readability and alignment in all browsers 489 | */ 490 | 491 | textarea { 492 | overflow: auto; /* 1 */ 493 | vertical-align: top; /* 2 */ 494 | } 495 | 496 | 497 | /* ============================================================================= 498 | Tables 499 | ========================================================================== */ 500 | 501 | /* 502 | * Remove most spacing between table cells 503 | */ 504 | 505 | table { 506 | border-collapse: collapse; 507 | border-spacing: 0; 508 | } 509 | /* Addition */ 510 | /* Apply a natural box layout model to all elements */ 511 | /* Read this post by Paul Irish: http://paulirish.com/2012/box-sizing-border-box-ftw/ */ 512 | * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } -------------------------------------------------------------------------------- /css/noscript.css: -------------------------------------------------------------------------------- 1 | body { 2 | overflow: auto; 3 | } 4 | .ps-container, 5 | .ps-container div, 6 | .ps-contentwrapper, 7 | .ps-header { 8 | position: relative; 9 | width: 100%; 10 | top: auto; 11 | bottom: auto; 12 | overflow: visible; 13 | } 14 | 15 | .ps-contentwrapper div { 16 | padding-left: 240px; 17 | margin-bottom: 80px; 18 | height: 300px; 19 | } 20 | 21 | .ps-slides > div { 22 | width: 200px; 23 | height: 200px; 24 | positon: relative; 25 | margin-bottom: 172px; 26 | box-shadow: none; 27 | } 28 | 29 | .ps-slidewrapper > nav{ 30 | display: none; 31 | } 32 | 33 | .ps-container .ps-slidewrapper { 34 | z-index: 10000; 35 | position: absolute; 36 | top: 270px; 37 | width: 200px; 38 | left: 0px; 39 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('normalize.css'); 2 | @import url('demo.css'); 3 | 4 | @font-face { 5 | font-family: 'icon'; 6 | src: url("font/icon.eot"); 7 | src: 8 | url("font/icon.eot?#iefix") format('embedded-opentype'), 9 | url("font/icon.woff") format('woff'), 10 | url("font/icon.ttf") format('truetype'), 11 | url("font/icon.svg#icon") format('svg'); 12 | font-weight: normal; 13 | font-style: normal; 14 | } 15 | 16 | .ps-container { 17 | position: absolute; 18 | width: 100%; 19 | height: 100%; 20 | overflow: hidden; 21 | text-transform: uppercase; 22 | color: #555; 23 | background: #fff; 24 | } 25 | 26 | .ps-container > div { 27 | position: absolute; 28 | width: 50%; 29 | } 30 | 31 | .ps-container > div > div, 32 | .ps-slidewrapper > nav, 33 | .ps-slides > div { 34 | position: absolute; 35 | } 36 | 37 | .ps-header { 38 | top: 0px; 39 | left: 0px; 40 | height: 150px; 41 | z-index: 1001; 42 | background: #fff; 43 | } 44 | 45 | .ps-header h1 { 46 | color: #ccc; 47 | line-height: 150px; 48 | margin: 0; 49 | padding: 0 50px; 50 | font-weight: 200; 51 | font-size: 14px; 52 | letter-spacing: 10px; 53 | } 54 | 55 | .ps-contentwrapper { 56 | top: 150px; 57 | bottom: 0px; 58 | overflow: hidden; 59 | z-index: 1000; 60 | } 61 | 62 | .ps-content { 63 | background: #fff; 64 | width: 100%; 65 | height: 100%; 66 | padding: 50px; 67 | } 68 | 69 | .ps-content h2 { 70 | padding: 10px 15px; 71 | border-right: 1px solid #f2f2f2; 72 | border-bottom: 1px solid #f2f2f2; 73 | letter-spacing: 4px; 74 | margin: 10px 0 30px; 75 | text-align: right; 76 | font-weight: 700; 77 | } 78 | 79 | .ps-content p { 80 | line-height: 26px; 81 | font-size: 12px; 82 | letter-spacing: 2px; 83 | word-spacing: 10px; 84 | padding: 10px 15px; 85 | font-weight: 400; 86 | text-align: justify; 87 | border-left: 1px solid #f2f2f2; 88 | border-top: 1px solid #f2f2f2; 89 | } 90 | 91 | .ps-content span.ps-price { 92 | float: left; 93 | margin: 10px; 94 | width: 140px; 95 | height: 140px; 96 | line-height: 140px; 97 | text-align: center; 98 | color: #fff; 99 | background: #f7cfc6; 100 | background: rgba(247,197,185,0.8); 101 | font-size: 55px; 102 | font-weight: 200; 103 | } 104 | 105 | .ps-content a:last-child { 106 | font-size: 14px; 107 | font-weight: 700; 108 | color: #555; 109 | letter-spacing: 4px; 110 | float: right; 111 | border: 3px solid #555; 112 | padding: 3px; 113 | text-indent: 4px; 114 | } 115 | 116 | .no-touch .ps-content a:last-child:hover { 117 | color: #b2d79d; 118 | border-color: #b2d79d; 119 | } 120 | 121 | .ps-content a:last-child:before { 122 | content: '\53'; 123 | font-family: 'icon'; 124 | font-style: normal; 125 | font-weight: normal; 126 | speak: none; 127 | padding-right: 5px; 128 | } 129 | 130 | .ps-slidewrapper { 131 | right: 0px; 132 | top: 0px; 133 | height: 100%; 134 | overflow: hidden; 135 | } 136 | 137 | .ps-slides { 138 | top: 0px; 139 | bottom: 200px; 140 | width: 100%; 141 | } 142 | 143 | .ps-slides > div { 144 | width: 100%; 145 | height: 100%; 146 | box-shadow: inset 0 0 0 9999px rgba(179,157,250,0.1); 147 | } 148 | 149 | .ps-slidewrapper > nav { 150 | width: 100%; 151 | height: 200px; 152 | bottom: 0px; 153 | right: 0px; 154 | z-index: 1000; 155 | } 156 | 157 | .ps-slidewrapper > nav > a { 158 | width: 50%; 159 | height: 100%; 160 | position: relative; 161 | float: left; 162 | box-shadow: inset 0 0 0 9999px rgba(207,227,206,0.8); 163 | outline: none; 164 | } 165 | 166 | .ps-slidewrapper > nav > a:first-child { 167 | box-shadow: inset 0 0 0 9999px rgba(233,217,141,0.8); 168 | } 169 | 170 | .no-touch .ps-slidewrapper > nav > a { 171 | -webkit-transition: box-shadow 0.4s ease-in-out; 172 | -moz-transition: box-shadow 0.4s ease-in-out; 173 | -ms-transition: box-shadow 0.4s ease-in-out; 174 | -o-transition: box-shadow 0.4s ease-in-out; 175 | transition: box-shadow 0.4s ease-in-out; 176 | } 177 | 178 | .no-touch .ps-slidewrapper > nav > a:hover { 179 | box-shadow: inset 0 0 0 9999px rgba(246,224,121,0.1); 180 | } 181 | 182 | .no-touch .ps-slidewrapper > nav > a:first-child:hover { 183 | box-shadow: inset 0 0 0 9999px rgba(249,15,15,0.1); 184 | } 185 | 186 | .ps-slidewrapper > nav > a:after { 187 | content: ''; 188 | position: absolute; 189 | width: 100px; 190 | height: 100px; 191 | top: 50%; 192 | left: 50%; 193 | margin: -20px 0 0 -50px; 194 | -webkit-transform: rotate(45deg); 195 | -moz-transform: rotate(45deg); 196 | -o-transform: rotate(45deg); 197 | -ms-transform: rotate(45deg); 198 | transform: rotate(45deg); 199 | border-left: 1px solid #fff; 200 | border-top: 1px solid #fff; 201 | } 202 | 203 | .ps-slidewrapper > nav > a:first-child:after { 204 | -webkit-transform: rotate(-135deg); 205 | -moz-transform: rotate(-135deg); 206 | -o-transform: rotate(-135deg); 207 | -ms-transform: rotate(-135deg); 208 | transform: rotate(-135deg); 209 | margin: -80px 0 0 -50px; 210 | } 211 | 212 | .ps-slides > div, 213 | .ps-slidewrapper > nav > a { 214 | background-color: #fff; 215 | background-position: center top; 216 | background-repeat: no-repeat; 217 | -webkit-background-size: auto 100%; 218 | -moz-background-size: auto 100%; 219 | background-size: auto 100%; 220 | } 221 | 222 | .ps-move { 223 | -webkit-transition: top 400ms ease-out; 224 | -moz-transition: top 400ms ease-out; 225 | -o-transition: top 400ms ease-out; 226 | -ms-transition: top 400ms ease-out; 227 | transition: top 400ms ease-out; 228 | } 229 | 230 | @media screen and (max-width: 860px) { 231 | 232 | .js .ps-container > div { 233 | width: 100%; 234 | } 235 | 236 | .js .ps-header { 237 | height: 50px; 238 | } 239 | 240 | .js .ps-header h1 { 241 | line-height: 50px; 242 | padding: 0px 20px; 243 | letter-spacing: 4px; 244 | } 245 | 246 | .js .ps-slides { 247 | bottom: 320px; 248 | top: 50px; 249 | } 250 | 251 | .js .ps-slidewrapper > nav { 252 | height: 100px; 253 | } 254 | 255 | .js .ps-contentwrapper { 256 | top: auto; 257 | height: 220px; 258 | bottom: 100px; 259 | } 260 | 261 | .js .ps-content { 262 | padding: 10px; 263 | } 264 | 265 | .js .ps-content h2 { 266 | border-right: none; 267 | font-size: 18px; 268 | margin: 10px 0; 269 | padding-top: 0; 270 | } 271 | 272 | .js .ps-content span.ps-price { 273 | font-size: 18px; 274 | width: 50px; 275 | height: 50px; 276 | line-height: 50px; 277 | font-weight: 700; 278 | margin-bottom: 0; 279 | } 280 | 281 | .js .ps-content p { 282 | line-height: 20px; 283 | border: none; 284 | padding: 5px 10px; 285 | height: 80px; 286 | overflow-y: scroll; 287 | } 288 | 289 | .js .ps-content a:last-child { 290 | font-size: 13px; 291 | margin: 10px 20px 0 0; 292 | } 293 | } 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | -------------------------------------------------------------------------------- /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/VerticalShowcaseSlider/0145fbdc057a2c27165ca6a5c156ea14eb74ef18/images/1.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/VerticalShowcaseSlider/0145fbdc057a2c27165ca6a5c156ea14eb74ef18/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/VerticalShowcaseSlider/0145fbdc057a2c27165ca6a5c156ea14eb74ef18/images/3.jpg -------------------------------------------------------------------------------- /images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/VerticalShowcaseSlider/0145fbdc057a2c27165ca6a5c156ea14eb74ef18/images/4.jpg -------------------------------------------------------------------------------- /images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/VerticalShowcaseSlider/0145fbdc057a2c27165ca6a5c156ea14eb74ef18/images/5.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vertical Showcase Slider with jQuery and CSS Transitions 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | « Previous Demo: 3D Restaurant Menu Concept 24 | 25 | 26 | Products and images by IKEA 27 | 28 | Back to the Codrops Article 29 | 30 | 31 |
32 | 33 |
34 | 35 |
36 |

Vertical Showcase Slider

37 |
38 | 39 |
40 | 41 |
42 |

Bernhard

43 | £100 44 |

With restful springiness in the seat; prevents static sitting and provides enhanced seating comfort. Padded seat and back for enhanced seating comfort. Soft, hardwearing and easy care leather, which ages gracefully.

45 | Buy this item 46 |
47 | 48 |
49 |

Tobias

50 | £65 51 |

For increased stability, re-tighten the screws about two weeks after assembly. Seat and back with restful flexibility; prevents a static sitting posture and enhances comfort.

52 | Buy this item 53 |
54 | 55 |
56 |

Pöang

57 | £140 58 |

Frame made of layer-glued bent birch; a very strong and durable material. High back provides great support for your neck. Sheepskin has natural insulating properties, which make it feel warm and cosy to sit on. Extra cushions are available for variation and renewal.

59 | Buy this item 60 |
61 | 62 |
63 |

Mellby

64 | £195 65 |

Easy to keep clean; removable, machine washable cover. Seat cushion with a top layer of memory foam; moulds to the precise contours of your body and regains its shape when you get up.

66 | Buy this item 67 |
68 | 69 |
70 |

Torbjörn

71 | £30 72 |

Height adjustable for a comfortable sitting posture. The sloping seat gives a comfortable sitting position when leaning forwards.

73 | Buy this item 74 |
75 | 76 |
77 | 78 |
79 | 80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 | 88 | 92 | 93 |
94 | 95 |
96 | 97 | 98 | 99 | 100 | 107 | 108 | -------------------------------------------------------------------------------- /js/modernizr.custom.79639.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransitions-touch-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.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:w(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},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 a.ps-prev' ), 14 | $navnext = $slidewrapper.find( 'nav > a.ps-next' ), 15 | // current index for items and slides 16 | current = 0, 17 | // checks if the transition is in progress 18 | isAnimating = false, 19 | // support for CSS transitions 20 | support = Modernizr.csstransitions, 21 | // transition end event 22 | // https://github.com/twitter/bootstrap/issues/2870 23 | transEndEventNames = { 24 | 'WebkitTransition' : 'webkitTransitionEnd', 25 | 'MozTransition' : 'transitionend', 26 | 'OTransition' : 'oTransitionEnd', 27 | 'msTransition' : 'MSTransitionEnd', 28 | 'transition' : 'transitionend' 29 | }, 30 | // its name 31 | transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], 32 | 33 | init = function() { 34 | 35 | // show first item 36 | var $currentItem = $items.eq( current ), 37 | $currentSlide = $slides.eq( current ), 38 | initCSS = { 39 | top : 0, 40 | zIndex : 999 41 | }; 42 | 43 | $currentItem.css( initCSS ); 44 | $currentSlide.css( initCSS ); 45 | 46 | // update nav images 47 | updateNavImages(); 48 | 49 | // initialize some events 50 | initEvents(); 51 | 52 | }, 53 | updateNavImages = function() { 54 | 55 | // updates the background image for the navigation arrows 56 | var configPrev = ( current > 0 ) ? $slides.eq( current - 1 ).css( 'background-image' ) : $slides.eq( itemsCount - 1 ).css( 'background-image' ), 57 | configNext = ( current < itemsCount - 1 ) ? $slides.eq( current + 1 ).css( 'background-image' ) : $slides.eq( 0 ).css( 'background-image' ); 58 | 59 | $navprev.css( 'background-image', configPrev ); 60 | $navnext.css( 'background-image', configNext ); 61 | 62 | }, 63 | initEvents = function() { 64 | 65 | $navprev.on( 'click', function( event ) { 66 | 67 | if( !isAnimating ) { 68 | 69 | slide( 'prev' ); 70 | 71 | } 72 | return false; 73 | 74 | } ); 75 | 76 | $navnext.on( 'click', function( event ) { 77 | 78 | if( !isAnimating ) { 79 | 80 | slide( 'next' ); 81 | 82 | } 83 | return false; 84 | 85 | } ); 86 | 87 | // transition end event 88 | $items.on( transEndEventName, removeTransition ); 89 | $slides.on( transEndEventName, removeTransition ); 90 | 91 | }, 92 | removeTransition = function() { 93 | 94 | isAnimating = false; 95 | $(this).removeClass('ps-move'); 96 | 97 | }, 98 | slide = function( dir ) { 99 | 100 | isAnimating = true; 101 | 102 | var $currentItem = $items.eq( current ), 103 | $currentSlide = $slides.eq( current ); 104 | 105 | // update current value 106 | if( dir === 'next' ) { 107 | 108 | ( current < itemsCount - 1 ) ? ++current : current = 0; 109 | 110 | } 111 | else if( dir === 'prev' ) { 112 | 113 | ( current > 0 ) ? --current : current = itemsCount - 1; 114 | 115 | } 116 | // new item that will be shown 117 | var $newItem = $items.eq( current ), 118 | // new slide that will be shown 119 | $newSlide = $slides.eq( current ); 120 | 121 | // position the new item up or down the viewport depending on the direction 122 | $newItem.css( { 123 | top : ( dir === 'next' ) ? '-100%' : '100%', 124 | zIndex : 999 125 | } ); 126 | 127 | $newSlide.css( { 128 | top : ( dir === 'next' ) ? '100%' : '-100%', 129 | zIndex : 999 130 | } ); 131 | 132 | setTimeout( function() { 133 | 134 | // move the current item and slide to the top or bottom depending on the direction 135 | $currentItem.addClass( 'ps-move' ).css( { 136 | top : ( dir === 'next' ) ? '100%' : '-100%', 137 | zIndex : 1 138 | } ); 139 | 140 | $currentSlide.addClass( 'ps-move' ).css( { 141 | top : ( dir === 'next' ) ? '-100%' : '100%', 142 | zIndex : 1 143 | } ); 144 | 145 | // move the new ones to the main viewport 146 | $newItem.addClass( 'ps-move' ).css( 'top', 0 ); 147 | $newSlide.addClass( 'ps-move' ).css( 'top', 0 ); 148 | 149 | // if no CSS transitions set the isAnimating flag to false 150 | if( !support ) { 151 | 152 | isAnimating = false; 153 | 154 | } 155 | 156 | }, 0 ); 157 | 158 | // update nav images 159 | updateNavImages(); 160 | 161 | }; 162 | 163 | return { init : init }; 164 | 165 | })(); --------------------------------------------------------------------------------