├── .gitignore ├── README.md ├── css ├── demo.css ├── normalize.css └── revealer.css ├── favicon.ico ├── img ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 17.jpg ├── 18.jpg ├── 19.jpg ├── 2.jpg ├── 20.jpg ├── 21.jpg ├── 22.jpg ├── 23.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg ├── index.html ├── index2.html ├── index3.html ├── js ├── demo.js ├── imagesloaded.pkgd.min.js └── revealer.js └── pater ├── dapulse_logo.svg ├── dapulse_logo_white.svg ├── pater.css └── winmacrainbow.png /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Grid Layout Slideshow 2 | 3 | A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating. 4 | 5 | ![CSS Grid Layout Slideshow](https://tympanus.net/codrops/wp-content/uploads/2017/07/GridLayoutSlideshow_Featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=31774) 8 | 9 | [Demo](https://tympanus.net/Development/GridLayoutSlideshow/) 10 | 11 | This demo is kindly sponsored by [dapulse](http://go.hackingui.com/DaPulsecodrops180717), the visual project management tool. 12 | 13 | ## Credits 14 | 15 | - Images from [Unsplash.com](https://unsplash.com/) 16 | - [imagesLoaded](https://imagesloaded.desandro.com/) by Dave DeSandro 17 | 18 | ## License 19 | This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used. 20 | 21 | ## Misc 22 | 23 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/) 24 | 25 | [© Codrops 2017](http://www.codrops.com) 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | /* Grid gap */ 9 | --gap: 10px; 10 | /* Color scheme */ 11 | --body-text: #333; 12 | --body-bg: #ccd8e4; 13 | --link-text: #ef3b3b; 14 | --link-text-hover: #333; 15 | --grid-name-text: #ef3b3b; 16 | --grid-title-text: #ef3b3b; 17 | --grid-nav-text: #fff; 18 | --grid-nav-bg: #442ef4; 19 | --grid-nav-text-hover: #fff; 20 | --grid-nav-bg-hover: #1f1f1f; 21 | --grid-text: #333; 22 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 23 | min-height: 600px; 24 | color: #333; 25 | color: var(--body-text); 26 | background: #ccd8e4; 27 | background: var(--body-bg); 28 | } 29 | 30 | a { 31 | text-decoration: none; 32 | color: #ef3b3b; 33 | color: var(--link-text); 34 | outline: none; 35 | } 36 | 37 | a:hover, 38 | a:focus { 39 | color: #333; 40 | color: var(--link-text-hover); 41 | } 42 | 43 | .hidden { 44 | position: absolute; 45 | overflow: hidden; 46 | width: 0; 47 | height: 0; 48 | pointer-events: none; 49 | } 50 | 51 | /* Icons */ 52 | .icon { 53 | display: block; 54 | width: 1.5em; 55 | height: 1.5em; 56 | margin: 0 auto; 57 | fill: currentColor; 58 | } 59 | 60 | /* Page Loader */ 61 | .js .loading::before { 62 | content: ''; 63 | position: fixed; 64 | z-index: 10000; 65 | top: 0; 66 | left: 0; 67 | width: 100%; 68 | height: 100%; 69 | background: #ccd8e4; 70 | background: var(--body-bg); 71 | } 72 | 73 | .js .loading::after { 74 | content: ''; 75 | position: fixed; 76 | z-index: 10000; 77 | top: 50%; 78 | left: 50%; 79 | width: 80px; 80 | height: 80px; 81 | margin: -40px 0 0 -40px; 82 | pointer-events: none; 83 | background: #333; 84 | background: var(--body-text); 85 | transform-origin: 0% 50%; 86 | animation: loaderAnim 1.5s linear infinite alternate forwards; 87 | } 88 | 89 | @keyframes loaderAnim { 90 | 0% { 91 | transform: scale3d(0,1,1); 92 | transform-origin: 0% 50%; 93 | } 94 | 50% { 95 | transform: scale3d(1,1,1); 96 | transform-origin: 0% 50%; 97 | } 98 | 51% { 99 | transform: scale3d(1,1,1); 100 | transform-origin: 100% 50%; 101 | } 102 | 100% { 103 | transform: scale3d(0,1,1); 104 | transform-origin: 100% 50%; 105 | } 106 | } 107 | 108 | /* Frame */ 109 | .frame { 110 | top: 0; 111 | left: 0; 112 | position: fixed; 113 | display: grid; 114 | width: 100%; 115 | height: 100vh; 116 | z-index: 100; 117 | pointer-events: none; 118 | padding: 2em; 119 | grid-template-columns: 50% 50%; 120 | grid-template-rows: auto auto 4em; 121 | grid-template-areas: "header header" 122 | "... ..." 123 | "... demos"; 124 | } 125 | 126 | .no-js .frame { 127 | position: relative; 128 | display: block; 129 | height: auto; 130 | } 131 | 132 | .frame a { 133 | pointer-events: auto; 134 | } 135 | 136 | .message { 137 | background: #333; 138 | background: var(--body-text); 139 | color: #ccd8e4; 140 | color: var(--body-bg); 141 | text-align: center; 142 | padding: 1em; 143 | display: none; 144 | } 145 | 146 | /* Header */ 147 | .codrops-header { 148 | position: relative; 149 | display: flex; 150 | flex-wrap: wrap; 151 | align-items: center; 152 | z-index: 100; 153 | grid-area: header; 154 | align-self: start; 155 | } 156 | 157 | .codrops-header__title { 158 | font-size: 1em; 159 | margin: 0; 160 | font-weight: 400; 161 | } 162 | 163 | .no-js .codrops-header { 164 | flex-direction: column; 165 | } 166 | 167 | .no-js .codrops-header__title { 168 | padding: 1em 0; 169 | } 170 | 171 | .github { 172 | margin: 0 0 0 auto; 173 | } 174 | 175 | /* Top Navigation Style */ 176 | .codrops-links { 177 | position: relative; 178 | display: flex; 179 | justify-content: space-between; 180 | align-items: center; 181 | margin: 0 0.5em 0 0; 182 | text-align: center; 183 | white-space: nowrap; 184 | } 185 | 186 | .codrops-icon { 187 | display: inline-block; 188 | margin: 0 0.25em; 189 | padding: 0 0.25em; 190 | } 191 | 192 | /* Demos */ 193 | .demos { 194 | grid-area: demos; 195 | align-self: end; 196 | justify-self: end; 197 | display: block; 198 | text-align: center; 199 | } 200 | 201 | .demo { 202 | margin: 0 0 0 1em; 203 | } 204 | 205 | .demo--current { 206 | color: #333; 207 | color: var(--link-text-hover); 208 | } 209 | 210 | /* Grid */ 211 | .grid { 212 | display: grid; 213 | width: calc(100% - 6em); 214 | height: calc(100vh - 6em); 215 | grid-auto-rows: calc((calc(100vh - 6em) / 30) - var(--gap)); 216 | grid-auto-columns: calc((calc(100% - 6em) / 30) - var(--gap)); 217 | justify-content: center; 218 | align-content: center; 219 | grid-gap: var(--gap); 220 | pointer-events: none; 221 | } 222 | 223 | .no-js .grid { 224 | margin: 0 0 15vh; 225 | } 226 | 227 | .js .grid { 228 | position: absolute; 229 | top: 3em; 230 | left: 3em; 231 | opacity: 0; 232 | } 233 | 234 | .js .grid--current { 235 | opacity: 1; 236 | pointer-events: auto; 237 | } 238 | 239 | .grid__item { 240 | position: relative; 241 | padding: 1em; 242 | background-repeat: no-repeat; 243 | background-position: 50% 50%; 244 | background-size: cover; 245 | transition: transform 0.2s ease-out; 246 | } 247 | 248 | .grid__item--name, 249 | .grid__item--title, 250 | .grid__item--text { 251 | pointer-events: none; 252 | padding: 0; 253 | margin: 0; 254 | } 255 | 256 | .grid__item--name, 257 | .grid__item--title { 258 | text-transform: uppercase; 259 | line-height: 0.8; 260 | font-family: 'Kanit', sans-serif; 261 | } 262 | 263 | .grid__item--name { 264 | font-size: 7vw; 265 | color: #ef3b3b; 266 | color: var(--grid-name-text); 267 | } 268 | 269 | .grid__item--title { 270 | font-size: 3.5vh; 271 | text-transform: uppercase; 272 | -webkit-writing-mode: vertical-lr; 273 | writing-mode: vertical-lr; 274 | text-align: right; 275 | display: flex; 276 | justify-content: flex-end; 277 | color: #ef3b3b; 278 | color: var(--grid-title-text); 279 | } 280 | 281 | .grid__item--text { 282 | font-size: 0.85em; 283 | line-height: 1.2; 284 | display: flex; 285 | color: inherit; 286 | color: var(--grid-text); 287 | } 288 | 289 | .grid__item--nav { 290 | background: #442ef4; 291 | background: var(--grid-nav-bg); 292 | color: #fff; 293 | color: var(--grid-nav-text); 294 | display: flex; 295 | align-items: center; 296 | cursor: pointer; 297 | } 298 | 299 | .grid__item--nav:hover { 300 | background: #1f1f1f; 301 | background: var(--grid-nav-bg-hover); 302 | color: #fff; 303 | color: var(--grid-nav-text-hover); 304 | } 305 | 306 | .grid__item--nav-next .icon--nav-arrow { 307 | margin: 0 0 0 auto; 308 | } 309 | 310 | .grid__item--nav-prev .icon--nav-arrow { 311 | transform: rotate(180deg); 312 | margin: 0; 313 | } 314 | 315 | .no-js .grid__item--nav { 316 | display: none; 317 | } 318 | 319 | .grid__item--animateOut { 320 | animation: animateOut 0.8s cubic-bezier(0.7,0,0.3,1) forwards; 321 | } 322 | 323 | @keyframes animateOut { 324 | to { 325 | opacity: 0; 326 | } 327 | } 328 | 329 | .grid__item--animateIn { 330 | animation: animateIn 0.8s cubic-bezier(0.7,0,0.3,1) forwards; 331 | } 332 | 333 | @keyframes animateIn { 334 | from { 335 | opacity: 0; 336 | } 337 | to { 338 | opacity: 1; 339 | } 340 | } 341 | 342 | /* Layout 1 */ 343 | .grid--layout-1 .grid__item:first-child { grid-area: 11 / 1 / 17 / 5; background-image: url(../img/2.jpg); } 344 | .grid--layout-1 .grid__item:nth-child(2) { grid-area: 22 / 6 / 28 / 10; background-image: url(../img/4.jpg); } 345 | .grid--layout-1 .grid__item:nth-child(3) { grid-area: 8 / 5 / 22 / 15; background-image: url(../img/6.jpg); } 346 | .grid--layout-1 .grid__item:nth-child(4) { grid-area: 22 / 10 / 29 / 15; background-image: url(../img/8.jpg); } 347 | .grid--layout-1 .grid__item:nth-child(5) { grid-area: 1 / 11 / 8 / 15; background-image: url(../img/10.jpg); } 348 | .grid--layout-1 .grid__item:nth-child(6) { grid-area: 17 / 15 / 24 / 20; background-image: url(../img/12.jpg); } 349 | .grid--layout-1 .grid__item:nth-child(7) { grid-area: 9 / 15 / 17 / 23; background-image: url(../img/14.jpg); } 350 | .grid--layout-1 .grid__item:nth-child(8) { grid-area: 2 / 18 / 9 / 23; background-image: url(../img/16.jpg); } 351 | .grid--layout-1 .grid__item:nth-child(9) { grid-area: 17 / 20 / 22 / 26; background-image: url(../img/18.jpg); } 352 | .grid--layout-1 .grid__item:nth-child(10) { grid-area: 22 / 20 / 28 / 23; background-image: url(../img/20.jpg); } 353 | .grid--layout-1 .grid__item:nth-child(11) { grid-area: 4 / 23 / 11 / 27; background-image: url(../img/22.jpg); } 354 | .grid--layout-1 .grid__item:nth-child(12) { grid-area: 11 / 23 / 17 / 30; background-image: url(../img/3.jpg); } 355 | .grid--layout-1 .grid__item:nth-child(13) { grid-area: 17 / 26 / 22 / 28; background-image: url(../img/5.jpg); } 356 | .grid--layout-1 .grid__item--name { grid-area: 3 / 12 / 30 / 25; } 357 | .grid--layout-1 .grid__item--title { grid-area: 1 / 27 / 11 / 29; } 358 | .grid--layout-1 .grid__item--text { grid-area: 22 / 23 / 30 / 26; } 359 | .grid--layout-1 .grid__item--nav-prev { grid-area: 3 / 6 / 8 / 11; } 360 | .grid--layout-1 .grid__item--nav-next { grid-area: 24 / 15 / 29 / 20; } 361 | 362 | /* Layout 2 */ 363 | .grid--layout-2 .grid__item:first-child { grid-area: 17 / 1 / 24 / 5; background-image: url(../img/7.jpg); } 364 | .grid--layout-2 .grid__item:nth-child(2) { grid-area: 22 / 6 / 28 / 10; background-image: url(../img/9.jpg); } 365 | .grid--layout-2 .grid__item:nth-child(3) { grid-area: 14 / 5 / 22 / 10; background-image: url(../img/11.jpg); } 366 | .grid--layout-2 .grid__item:nth-child(4) { grid-area: 17 / 10 / 26 / 15; background-image: url(../img/13.jpg); } 367 | .grid--layout-2 .grid__item:nth-child(5) { grid-area: 1 / 10 / 17 / 15; background-image: url(../img/15.jpg); } 368 | .grid--layout-2 .grid__item:nth-child(6) { grid-area: 11 / 15 / 24 / 20; background-image: url(../img/17.jpg); } 369 | .grid--layout-2 .grid__item:nth-child(7) { grid-area: 5 / 15 / 11 / 18; background-image: url(../img/19.jpg); } 370 | .grid--layout-2 .grid__item:nth-child(8) { grid-area: 1 / 18 / 11 / 23; background-image: url(../img/21.jpg); } 371 | .grid--layout-2 .grid__item:nth-child(9) { grid-area: 20 / 20 / 27 / 24; background-image: url(../img/23.jpg); } 372 | .grid--layout-2 .grid__item:nth-child(10) { grid-area: 24 / 15 / 29 / 20; background-image: url(../img/2.jpg); } 373 | .grid--layout-2 .grid__item:nth-child(11) { grid-area: 4 / 23 / 11 / 27; background-image: url(../img/4.jpg); } 374 | .grid--layout-2 .grid__item:nth-child(12) { grid-area: 11 / 20 / 20 / 30; background-image: url(../img/6.jpg); } 375 | .grid--layout-2 .grid__item:nth-child(13) { grid-area: 25 / 24 / 29 / 28; background-image: url(../img/8.jpg); } 376 | .grid--layout-2 .grid__item--name { grid-area: 16 / 9 / 30 / 16; } 377 | .grid--layout-2 .grid__item--title { grid-area: 1 / 27 / 11 / 29; } 378 | .grid--layout-2 .grid__item--text { grid-area: 1 / 5 / 9 / 10; align-items: flex-end; text-align: right;} 379 | .grid--layout-2 .grid__item--nav-prev { grid-area: 9 / 5 / 14 / 10; } 380 | .grid--layout-2 .grid__item--nav-next { grid-area: 20 / 24 / 25 / 30; } 381 | 382 | /* Layout 3 */ 383 | .grid--layout-3 .grid__item:first-child { grid-area: 6 / 1 / 14 / 5; background-image: url(../img/1.jpg); } 384 | .grid--layout-3 .grid__item:nth-child(2) { grid-area: 3 / 5 / 14 / 10; background-image: url(../img/2.jpg); } 385 | .grid--layout-3 .grid__item:nth-child(3) { grid-area: 14 / 1 / 21 / 5; background-image: url(../img/3.jpg); } 386 | .grid--layout-3 .grid__item:nth-child(4) { grid-area: 19 / 10 / 28 / 20; background-image: url(../img/4.jpg); } 387 | .grid--layout-3 .grid__item:nth-child(5) { grid-area: 1 / 10 / 11 / 18; background-image: url(../img/5.jpg); } 388 | .grid--layout-3 .grid__item:nth-child(6) { grid-area: 11 / 10 / 19 / 15; background-image: url(../img/6.jpg); } 389 | .grid--layout-3 .grid__item:nth-child(7) { grid-area: 11 / 15 / 19 / 20; background-image: url(../img/7.jpg); } 390 | .grid--layout-3 .grid__item:nth-child(8) { grid-area: 1 / 18 / 6 / 23; background-image: url(../img/8.jpg); } 391 | .grid--layout-3 .grid__item:nth-child(9) { grid-area: 20 / 20 / 27 / 24; background-image: url(../img/9.jpg); } 392 | .grid--layout-3 .grid__item:nth-child(10) { grid-area: 20 / 28 / 25 / 30; background-image: url(../img/10.jpg); } 393 | .grid--layout-3 .grid__item:nth-child(11) { grid-area: 4 / 23 / 11 / 27; background-image: url(../img/11.jpg); } 394 | .grid--layout-3 .grid__item:nth-child(12) { grid-area: 11 / 20 / 20 / 30; background-image: url(../img/12.jpg); } 395 | .grid--layout-3 .grid__item:nth-child(13) { grid-area: 20 / 24 / 26 / 28; background-image: url(../img/13.jpg); } 396 | .grid--layout-3 .grid__item--name { grid-area: 15 / 16 / 30 / 23; } 397 | .grid--layout-3 .grid__item--title { grid-area: 1 / 27 / 11 / 29; } 398 | .grid--layout-3 .grid__item--text { grid-area: 19 / 5 / 30 / 10; text-align: right;} 399 | .grid--layout-3 .grid__item--nav-prev { grid-area: 14 / 5 / 19 / 10; } 400 | .grid--layout-3 .grid__item--nav-next { grid-area: 6 / 18 / 11 / 23; } 401 | 402 | /* Demo themes */ 403 | .demo-2 { 404 | --gap: 10px; 405 | --body-text: #333; 406 | --body-bg: #c4f8de; 407 | --link-text: #000000; 408 | --link-text-hover: #727272; 409 | --grid-name-text: #7ed72e; 410 | --grid-title-text: #39c283; 411 | --grid-nav-text: #000; 412 | --grid-nav-bg: #39c283; 413 | --grid-nav-text-hover: #ffffff; 414 | --grid-nav-bg-hover: #000000; 415 | --grid-text: #39c283; 416 | } 417 | 418 | .demo-2 .revealer--hideX, 419 | .demo-2 .revealer--hideY, 420 | .demo-2 .revealer--showX, 421 | .demo-2 .revealer--showY, 422 | .demo-2 .grid__item--animateOut, 423 | .demo-2 .grid__item--animateIn { 424 | animation-duration: 0.6s; 425 | } 426 | 427 | .demo-3 { 428 | --gap: 20px; 429 | --body-text: #d3d9d9; 430 | --body-bg: #252626; 431 | --link-text: #727676; 432 | --link-text-hover: #f95422; 433 | --grid-name-text: #f95422; 434 | --grid-title-text: #1f2ee0; 435 | --grid-nav-text: #000; 436 | --grid-nav-bg: #fffa3a; 437 | --grid-nav-text-hover: #fff; 438 | --grid-nav-bg-hover: #1f2ee0; 439 | --grid-text: #fff; 440 | } 441 | 442 | .demo-3 div.grid__item:not(.grid__item--nav)::after { 443 | content: ''; 444 | position: absolute; 445 | width: 100%; 446 | height: 100%; 447 | top: 0; 448 | left: 0; 449 | background: #0013ff; 450 | mix-blend-mode: exclusion; 451 | opacity: 0; 452 | pointer-events: none; 453 | transition: opacity 0.3s; 454 | } 455 | 456 | .demo-3 .grid:not(.grid--animating) div.grid__item:not(.grid__item--nav):hover::after { 457 | opacity: 1; 458 | } 459 | 460 | @media screen and (max-width: 60em) { 461 | .message { 462 | display: block; 463 | } 464 | .frame { 465 | display: block; 466 | height: auto; 467 | position: relative; 468 | text-align: center; 469 | } 470 | .codrops-header { 471 | flex-direction: column; 472 | } 473 | .codrops-header__title { 474 | padding: 1em 0; 475 | } 476 | .github { 477 | margin: 0 auto; 478 | } 479 | .demos { 480 | padding: 1em 0 0; 481 | } 482 | .demo { 483 | margin: 0 0.5em; 484 | } 485 | main .grid { 486 | height: auto; 487 | top: auto !important; 488 | width: 100%; 489 | left: auto !important; 490 | padding: 0 2em; 491 | grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); 492 | grid-auto-rows: auto !important; 493 | grid-auto-columns: auto !important; 494 | grid-gap: 1vw; 495 | margin: 0 0 5em; 496 | } 497 | 498 | .grid__item { 499 | min-height: 50px; 500 | grid-area: auto !important; 501 | } 502 | 503 | .grid__item br { 504 | content: ''; 505 | display: none; 506 | } 507 | 508 | .grid__item--name, 509 | .grid__item--title, 510 | .grid__item--text { 511 | grid-column: 1 / -1 !important; 512 | justify-content: flex-start; 513 | min-height: 0; 514 | padding: 1vh 0; 515 | text-align: left !important; 516 | } 517 | 518 | .grid__item--name { 519 | grid-row: 1 / -1 !important; 520 | } 521 | 522 | .grid .grid__item--title { 523 | -webkit-writing-mode: horizontal-tb; 524 | writing-mode: horizontal-tb; 525 | } 526 | } 527 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /css/revealer.css: -------------------------------------------------------------------------------- 1 | 2 | .revealer { 3 | position: absolute; 4 | width: calc(100% + 4px); 5 | height: calc(100% + 4px); /* Firefox and Safari gap hack */ 6 | background: #fff; 7 | top: -2px; 8 | left: -2px; 9 | opacity: 0; 10 | pointer-events: none; 11 | } 12 | 13 | /* Direction control */ 14 | .revealer--right { 15 | transform-origin: 100% 50%; 16 | } 17 | 18 | .revealer--left { 19 | transform-origin: 0% 50%; 20 | } 21 | 22 | .revealer--top { 23 | transform-origin: 50% 0%; 24 | } 25 | 26 | .revealer--bottom { 27 | transform-origin: 50% 100%; 28 | } 29 | 30 | .revealer--showX, 31 | .revealer--hideX, 32 | .revealer--showY, 33 | .revealer--hideY, 34 | .revealer--visible { 35 | opacity: 1; 36 | } 37 | 38 | /* Hide from left/right */ 39 | .revealer--hideX { 40 | animation: hideX 0.8s cubic-bezier(0.7,0,0.3,1) forwards; 41 | } 42 | 43 | @keyframes hideX { 44 | from { 45 | transform: scale3d(0,1,1); 46 | } 47 | to { 48 | transform: scale3d(1,1,1); 49 | } 50 | } 51 | 52 | /* Show from left/right */ 53 | .revealer--showX { 54 | animation: showX 0.8s cubic-bezier(0.7,0,0.3,1) forwards; 55 | } 56 | 57 | @keyframes showX { 58 | to { 59 | opacity: 1; 60 | transform: scale3d(0,1,1); 61 | } 62 | } 63 | 64 | /* Hide from top/bottom */ 65 | .revealer--hideY { 66 | animation: hideY 0.8s cubic-bezier(0.7,0,0.3,1) forwards; 67 | } 68 | 69 | @keyframes hideY { 70 | from { 71 | transform: scale3d(1,0,1); 72 | } 73 | to { 74 | transform: scale3d(1,1,1); 75 | } 76 | } 77 | 78 | /* Show from top/bottom */ 79 | .revealer--showY { 80 | animation: showY 0.8s cubic-bezier(0.7,0,0.3,1) forwards; 81 | } 82 | 83 | @keyframes showY { 84 | to { 85 | opacity: 1; 86 | transform: scale3d(1,0,1); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/favicon.ico -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/1.jpg -------------------------------------------------------------------------------- /img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/10.jpg -------------------------------------------------------------------------------- /img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/11.jpg -------------------------------------------------------------------------------- /img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/12.jpg -------------------------------------------------------------------------------- /img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/13.jpg -------------------------------------------------------------------------------- /img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/14.jpg -------------------------------------------------------------------------------- /img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/15.jpg -------------------------------------------------------------------------------- /img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/16.jpg -------------------------------------------------------------------------------- /img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/17.jpg -------------------------------------------------------------------------------- /img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/18.jpg -------------------------------------------------------------------------------- /img/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/19.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/2.jpg -------------------------------------------------------------------------------- /img/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/20.jpg -------------------------------------------------------------------------------- /img/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/21.jpg -------------------------------------------------------------------------------- /img/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/22.jpg -------------------------------------------------------------------------------- /img/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/23.jpg -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/4.jpg -------------------------------------------------------------------------------- /img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/5.jpg -------------------------------------------------------------------------------- /img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/6.jpg -------------------------------------------------------------------------------- /img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/7.jpg -------------------------------------------------------------------------------- /img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/8.jpg -------------------------------------------------------------------------------- /img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/img/9.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Grid Layout Slideshow | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 33 |
34 |
Please view this demo on a desktop to see the grid.
35 |
36 |
37 |
38 | 39 | 40 |
41 |

[CSS Grid] Layout Slideshow

42 | GitHub 43 |
44 | 49 | 50 | 51 |

Project management is better when it's visual

52 |
dapulse Creative
53 | 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 |

Oyo
Expo
2017

76 |

Belfast

77 |

A reet bobbydazzler a right toff Sherlock Queen Elizabeth Shakespeare

78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 |

Oyo
Expo
2018

100 |

Minsk

101 |

You mean it ain't me noggin' leisurely shepherd's pie bossy britches

102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 | 122 |
123 |

Oyo
Expo
2019

124 |

Paris

125 |

Dignified teacakes air one's dirty linen off t'shop scouser quid pezzy little taking the mick

126 |
127 |
128 | 129 | 130 | 131 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Grid Layout Slideshow | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 33 |
34 |
Please view this demo on a desktop to see the grid.
35 |
36 |
37 |
38 | 39 | 40 |
41 |

[CSS Grid] Layout Slideshow

42 | GitHub 43 |
44 | 49 | 50 | 51 |

Project management is better when it's visual

52 |
dapulse Creative
53 | 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 |

Oyo
Expo
2017

76 |

Belfast

77 |

A reet bobbydazzler a right toff Sherlock Queen Elizabeth Shakespeare

78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 |

Oyo
Expo
2018

100 |

Minsk

101 |

You mean it ain't me noggin' leisurely shepherd's pie bossy britches

102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 | 122 |
123 |

Oyo
Expo
2019

124 |

Paris

125 |

Dignified teacakes air one's dirty linen off t'shop scouser quid pezzy little taking the mick

126 |
127 |
128 | 129 | 130 | 131 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Grid Layout Slideshow | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 33 |
34 |
Please view this demo on a desktop to see the grid.
35 |
36 |
37 |
38 | 39 | 40 |
41 |

[CSS Grid] Layout Slideshow

42 | GitHub 43 |
44 | 49 | 50 | 51 |

Project management is better when it's visual

52 |
dapulse Creative
53 | 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 |

Oyo
Expo
2017

76 |

Belfast

77 |

A reet bobbydazzler a right toff Sherlock Queen Elizabeth Shakespeare

78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 |

Oyo
Expo
2018

100 |

Minsk

101 |

You mean it ain't me noggin' leisurely shepherd's pie bossy britches

102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 | 122 |
123 |

Oyo
Expo
2019

124 |

Paris

125 |

Dignified teacakes air one's dirty linen off t'shop scouser quid pezzy little taking the mick

126 |
127 |
128 | 129 | 130 | 131 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /js/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * demo.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 2017, Codrops 9 | * http://www.codrops.com 10 | */ 11 | { 12 | // from http://www.quirksmode.org/js/events_properties.html#position 13 | const getMousePos = (e) => { 14 | let posx = 0; 15 | let posy = 0; 16 | if (!e) {let e = window.event}; 17 | if (e.pageX || e.pageY) { 18 | posx = e.pageX; 19 | posy = e.pageY; 20 | } 21 | else if (e.clientX || e.clientY) { 22 | posx = e.clientX + document.body.scrollLeft 23 | + document.documentElement.scrollLeft; 24 | posy = e.clientY + document.body.scrollTop 25 | + document.documentElement.scrollTop; 26 | } 27 | return { 28 | x : posx, 29 | y : posy 30 | }; 31 | } 32 | 33 | // From https://davidwalsh.name/javascript-debounce-function. 34 | const debounce = (func, wait, immediate) => { 35 | let timeout; 36 | return () => { 37 | let context = this, args = arguments; 38 | let later = () => { 39 | timeout = null; 40 | if (!immediate) func.apply(context, args); 41 | }; 42 | let callNow = immediate && !timeout; 43 | clearTimeout(timeout); 44 | timeout = setTimeout(later, wait); 45 | if (callNow) func.apply(context, args); 46 | }; 47 | }; 48 | 49 | const distance = (x1,x2,y1,y2) => { 50 | const a = x1 - x2; 51 | const b = y1 - y2; 52 | return Math.sqrt(a*a + b*b); 53 | }; 54 | 55 | let win = {width: window.innerWidth, height: window.innerHeight}; 56 | let center = {x: win.width/2, y: win.height/2}; 57 | 58 | class GridItem { 59 | constructor(el, options) { 60 | this.CONFIG = { 61 | filledColor: '#fff' 62 | }; 63 | Object.assign(this.CONFIG, options); 64 | this.DOM = {}; 65 | this.DOM.el = el; 66 | const bcr = this.DOM.el.getBoundingClientRect(); 67 | this.itemCenter = { 68 | x: bcr.left + bcr.width/2, 69 | y: bcr.top + bcr.height/2 70 | }; 71 | this.revealer = new Revealer(this.DOM.el, {color: this.CONFIG.filledColor || window.getComputedStyle(document.body, null).backgroundColor}); 72 | this.initEvents(); 73 | } 74 | initEvents() { 75 | window.addEventListener('resize', (ev) => debounce(this.onresize())); 76 | } 77 | onresize(ev) { 78 | const bcr = this.DOM.el.getBoundingClientRect(); 79 | this.itemCenter = { 80 | x: bcr.left + bcr.width/2, 81 | y: bcr.top + bcr.height/2 82 | }; 83 | } 84 | show(animation = true) { 85 | return animation ? this.revealer.show({direction: this.DOM.el.dataset.direction || 'rtl', delay: this.DOM.el.dataset.delay || 0}) : this.revealer.show(); 86 | } 87 | hide(animation = true) { 88 | return animation ? this.revealer.hide({direction: this.DOM.el.dataset.direction || 'rtl', delay: this.DOM.el.dataset.delay || 0}) : this.revealer.hide(); 89 | } 90 | showFilled() { 91 | return this.revealer.showFilled({direction: this.DOM.el.dataset.direction || 'rtl', delay: this.DOM.el.dataset.delay || 0}); 92 | } 93 | hideFilled() { 94 | return this.revealer.hideFilled({direction: this.DOM.el.dataset.direction || 'rtl', delay: this.DOM.el.dataset.delay || 0}); 95 | } 96 | setTransform(transform) { 97 | const dist = distance(this.itemCenter.x, this.itemCenter.y, center.x, center.y); 98 | const tx = transform.translateX/win.width*dist || 0; 99 | const ty = transform.translateY/win.height*dist || 0; 100 | this.DOM.el.style.transform = `translate3d(${tx}px, ${ty}px, 0)`; 101 | } 102 | isNavCtrl() { 103 | return this.DOM.el.classList.contains('grid__item--nav'); 104 | } 105 | }; 106 | 107 | class Grid { 108 | constructor(el, options) { 109 | this.CONFIG = { 110 | filledColor: '#fff' 111 | }; 112 | Object.assign(this.CONFIG, options); 113 | this.DOM = {}; 114 | this.DOM.el = el; 115 | this.DOM.items = Array.from(this.DOM.el.querySelectorAll('div.grid__item')); 116 | this.DOM.name = this.DOM.el.querySelector('.grid__item--name'); 117 | this.DOM.title = this.DOM.el.querySelector('.grid__item--title'); 118 | this.DOM.text = this.DOM.el.querySelector('.grid__item--text'); 119 | this.textElems = [this.DOM.name, this.DOM.title, this.DOM.text]; 120 | this.layout(); 121 | } 122 | layout() { 123 | this.itemsTotal = this.DOM.items.length; 124 | this.items = []; 125 | this.DOM.items.forEach((item) => this.items.push(new GridItem(item, {filledColor: this.CONFIG.filledColor}))); 126 | } 127 | show(filled = false, animation = true) { 128 | return new Promise((resolve, reject) => { 129 | this.DOM.el.classList.add('grid--animating'); 130 | this.hideItems(); 131 | 132 | this.DOM.el.classList.add('grid--current'); 133 | const promises = []; 134 | for (let i = 0; i < this.itemsTotal; i++) { 135 | const promise = filled ? this.items[i].showFilled() : this.items[i].show(animation); 136 | promises.push(promise); 137 | }; 138 | for (let i = 0, len = this.textElems.length; i < len; i++) { 139 | const promise = this.animateText(this.textElems[i], 'In'); 140 | promises.push(promise); 141 | }; 142 | Promise.all(promises).then(() => { 143 | this.resetTextClasses('In'); 144 | this.DOM.el.classList.remove('grid--animating'); 145 | resolve() 146 | }); 147 | }); 148 | } 149 | hide(filled = false, animation = true) { 150 | return new Promise((resolve, reject) => { 151 | this.DOM.el.classList.add('grid--animating'); 152 | const promises = []; 153 | for (let i = 0; i < this.itemsTotal; i++) { 154 | const promise = filled ? this.items[i].hideFilled() : this.items[i].hide(animation); 155 | promises.push(promise); 156 | }; 157 | for (let i = 0, len = this.textElems.length; i < len; i++) { 158 | const promise = this.animateText(this.textElems[i], 'Out'); 159 | promises.push(promise); 160 | }; 161 | Promise.all(promises).then(() => { 162 | this.resetTextClasses('Out'); 163 | this.DOM.el.classList.remove('grid--animating'); 164 | this.DOM.el.classList.remove('grid--current'); 165 | resolve(); 166 | }); 167 | }); 168 | } 169 | animateText(el, dir) { 170 | return new Promise((resolve, reject) => { 171 | el.classList.add(`grid__item--animate${dir}`); 172 | el.addEventListener('animationend', resolve); 173 | }); 174 | } 175 | resetTextClasses(dir) { 176 | for (let i = 0, len = this.textElems.length; i < len; i++) { 177 | this.textElems[i].classList.remove(`grid__item--animate${dir}`); 178 | }; 179 | } 180 | hideItems() { 181 | for (let i = 0; i < this.itemsTotal; i++) { 182 | this.items[i].hide(false); 183 | }; 184 | } 185 | tilt(transform) { 186 | for (let i = 0; i < this.itemsTotal; i++) { 187 | const item = this.items[i]; 188 | if ( !item.isNavCtrl() ) { 189 | item.setTransform(transform); 190 | } 191 | }; 192 | } 193 | }; 194 | 195 | class Slideshow { 196 | constructor(grids, options) { 197 | this.CONFIG = { 198 | filledColor: false, // false || colorvalue (e.g. '#666') 199 | hasTilt: false, 200 | tilt: {maxTranslationX: 50, maxTranslationY: 50} 201 | }; 202 | Object.assign(this.CONFIG, options); 203 | this.DOM = {}; 204 | this.DOM.grids = grids; 205 | this.init(); 206 | } 207 | init() { 208 | this.current = 0; 209 | this.gridsTotal = this.DOM.grids.length; 210 | this.grids = []; 211 | this.DOM.grids.forEach((grid) => this.grids.push(new Grid(grid, { 212 | filledColor: this.CONFIG.filledColor 213 | }))); 214 | this.initEvents(); 215 | } 216 | initEvents() { 217 | Array.from(document.querySelectorAll('.grid__item--nav-next')).forEach((ctrl) => ctrl.addEventListener('click', (ev) => this.navigate(ev, 'next'))); 218 | Array.from(document.querySelectorAll('.grid__item--nav-prev')).forEach((ctrl) => ctrl.addEventListener('click', (ev) => this.navigate(ev, 'prev'))) 219 | if ( this.CONFIG.hasTilt ) { 220 | document.addEventListener('mousemove', (ev) => this.onmousemove(ev)); 221 | window.addEventListener('resize', (ev) => debounce(this.onresize())); 222 | } 223 | } 224 | onmousemove(ev) { 225 | requestAnimationFrame(() => { 226 | const mousepos = getMousePos(ev); 227 | const transX = 2*this.CONFIG.tilt.maxTranslationX/win.width*mousepos.x - this.CONFIG.tilt.maxTranslationX; 228 | const transY = 2*this.CONFIG.tilt.maxTranslationY/win.height*mousepos.y - this.CONFIG.tilt.maxTranslationY; 229 | this.grids[this.current].tilt({translateX: transX, translateY: transY}); 230 | }); 231 | } 232 | onresize(ev) { 233 | win = {width: window.innerWidth, height: window.innerHeight}; 234 | center = {x: win.width/2, y: win.height/2}; 235 | } 236 | navigate(ev, direction) { 237 | if ( this.isAnimating ) { 238 | return false; 239 | } 240 | this.isAnimating = true; 241 | const currentGrid = this.grids[this.current]; 242 | this.current = direction === 'next' ? (this.current < this.gridsTotal-1 ? this.current+1 : 0) : (this.current > 0 ? this.current-1 : this.gridsTotal-1); 243 | const nextGrid = this.grids[this.current]; 244 | const filled = this.CONFIG.filledColor; 245 | currentGrid.hide(!!filled).then(() => { 246 | nextGrid.show(!!filled).then(() => this.isAnimating = false); 247 | if ( this.CONFIG.hasTilt ) { 248 | this.onmousemove(ev); 249 | } 250 | }); 251 | } 252 | }; 253 | 254 | window.Slideshow = Slideshow; 255 | }; -------------------------------------------------------------------------------- /js/imagesloaded.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v4.1.3 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | 7 | !function(e,t){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",t):"object"==typeof module&&module.exports?module.exports=t():e.EvEmitter=t()}("undefined"!=typeof window?window:this,function(){function e(){}var t=e.prototype;return t.on=function(e,t){if(e&&t){var i=this._events=this._events||{},n=i[e]=i[e]||[];return-1==n.indexOf(t)&&n.push(t),this}},t.once=function(e,t){if(e&&t){this.on(e,t);var i=this._onceEvents=this._onceEvents||{},n=i[e]=i[e]||{};return n[t]=!0,this}},t.off=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=i.indexOf(t);return-1!=n&&i.splice(n,1),this}},t.emitEvent=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=0,o=i[n];t=t||[];for(var r=this._onceEvents&&this._onceEvents[e];o;){var s=r&&r[o];s&&(this.off(e,o),delete r[o]),o.apply(this,t),n+=s?0:1,o=i[n]}return this}},t.allOff=t.removeAllListeners=function(){delete this._events,delete this._onceEvents},e}),function(e,t){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return t(e,i)}):"object"==typeof module&&module.exports?module.exports=t(e,require("ev-emitter")):e.imagesLoaded=t(e,e.EvEmitter)}("undefined"!=typeof window?window:this,function(e,t){function i(e,t){for(var i in t)e[i]=t[i];return e}function n(e){var t=[];if(Array.isArray(e))t=e;else if("number"==typeof e.length)for(var i=0;i { 45 | if ( animationOpts ) { 46 | this.animate(animationOpts, action); 47 | this.revealerEl.addEventListener('animationend', resolve); 48 | } 49 | else { 50 | this.revealerEl.classList.remove(...this.allClasses); 51 | this.revealerEl.classList.add('revealer--visible'); 52 | resolve(); 53 | } 54 | }); 55 | } 56 | showFilled(animation) { 57 | return new Promise((resolve, reject) => { 58 | this.hide(); 59 | animation.target = this.DOM.item; 60 | animation.target.style.visibility = 'hidden'; 61 | this.animate(animation, 'hide'); 62 | 63 | let completefn = () => { 64 | animation.target.removeEventListener('animationend', completefn); 65 | animation.target = this.revealerEl; 66 | this.animate(animation, 'show'); 67 | animation.target.addEventListener('animationend', (ev) => { 68 | if ( ev.target === animation.target ) { 69 | resolve(); 70 | } 71 | }); 72 | }; 73 | animation.target.addEventListener('animationend', completefn); 74 | }); 75 | } 76 | hideFilled(animation) { 77 | return new Promise((resolve, reject) => { 78 | this.animate(animation, 'hide'); 79 | 80 | let completefn = () => { 81 | this.revealerEl.removeEventListener('animationend', completefn); 82 | animation.target = this.DOM.item; 83 | this.animate(animation, 'show'); 84 | animation.target.addEventListener('animationend', (ev) => { 85 | if ( ev.target === animation.target ) { 86 | resolve(); 87 | } 88 | }); 89 | }; 90 | this.revealerEl.addEventListener('animationend', completefn); 91 | }); 92 | } 93 | animate(animationOpts, action) { 94 | setTimeout(() => { 95 | const target = animationOpts.target || this.revealerEl; 96 | target.style.visibility = 'visible'; 97 | target.classList.remove(...this.allClasses); 98 | 99 | let dirClass = 'revealer--right'; 100 | let orientation = 'h'; 101 | 102 | if ( animationOpts.direction === 'rtl' ) { 103 | dirClass = action === 'hide' ? 'revealer--right' : 'revealer--left'; 104 | orientation = 'h'; 105 | } 106 | else if ( animationOpts.direction === 'ltr' ) { 107 | dirClass = action === 'hide' ? 'revealer--left' : 'revealer--right'; 108 | orientation = 'h'; 109 | } 110 | else if ( animationOpts.direction === 'ttb' ) { 111 | dirClass = action === 'hide' ? 'revealer--top' : 'revealer--bottom'; 112 | orientation = 'v'; 113 | } 114 | else if ( animationOpts.direction === 'btt' ) { 115 | dirClass = action === 'hide' ? 'revealer--bottom' : 'revealer--top'; 116 | orientation = 'v'; 117 | } 118 | target.classList.add(dirClass, orientation === 'h' ? `revealer--${action}X` : `revealer--${action}Y`); 119 | }, animationOpts.delay || 0); 120 | } 121 | }; 122 | }; -------------------------------------------------------------------------------- /pater/dapulse_logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pater/dapulse_logo_white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pater/pater.css: -------------------------------------------------------------------------------- 1 | .pater { 2 | position: fixed; 3 | bottom: 0; 4 | left: 0; 5 | width: 100%; 6 | padding: 1em 0; 7 | color: inherit; 8 | background: #fff; 9 | } 10 | 11 | .pater:hover { 12 | color: inherit; 13 | } 14 | 15 | .pater::before { 16 | content: 'Sponsored by:'; 17 | display: inline-block; 18 | vertical-align: middle; 19 | padding: 0 1em 0 0; 20 | font-size: 0.75em; 21 | transition: transform 0.5s 0.1s; 22 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 23 | } 24 | 25 | .pater__logo { 26 | vertical-align: middle; 27 | max-width: 100px; 28 | transition: transform 0.5s, opacity 0.3s; 29 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 30 | } 31 | 32 | .pater__title { 33 | margin: 0; 34 | display: none; 35 | font-size: 0.85em; 36 | font-weight: normal; 37 | transition: transform 0.5s, opacity 0.3s; 38 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 39 | } 40 | 41 | .pater__img-wrap { 42 | position: absolute; 43 | bottom: 2em; 44 | left: 0; 45 | width: 100%; 46 | background: #000; 47 | transition: transform 0.5s 0.1s; 48 | transform: translate3d(0,100%,0) translate3d(0,2em,0); 49 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 50 | } 51 | 52 | .pater__img { 53 | max-width: 100%; 54 | display: block; 55 | opacity: 0; 56 | transition: opacity 0.5s 0.2s; 57 | } 58 | 59 | 60 | @media screen and (min-width: 60em) { 61 | .pater { 62 | position: fixed; 63 | bottom: 0; 64 | left: 0; 65 | width: 320px; 66 | padding: 2em 0; 67 | margin: 0 2em; 68 | color: inherit; 69 | background: transparent; 70 | } 71 | .pater__title { 72 | display: block; 73 | } 74 | .pater::before { 75 | display: block; 76 | padding: 0 0 1em 0; 77 | } 78 | .pater__logo { 79 | max-width: 250px; 80 | } 81 | .pater:hover::before { 82 | transform: translate3d(0, -180px, 0); 83 | transition-delay: 0s; 84 | } 85 | .pater:hover .pater__logo, 86 | .pater:hover .pater__title { 87 | opacity: 0; 88 | transform: translate3d(0, -180px, 0); 89 | } 90 | .pater:hover .pater__img-wrap { 91 | transform: translate3d(0,0,0); 92 | } 93 | .pater:hover .pater__img { 94 | opacity: 1; 95 | } 96 | } -------------------------------------------------------------------------------- /pater/winmacrainbow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/GridLayoutSlideshow/7fc2f9c05085a46c7a8d8166ec1d31f943226404/pater/winmacrainbow.png --------------------------------------------------------------------------------