├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── package.json └── src ├── css └── base.css ├── favicon.ico ├── img ├── 3DCloth_featured.jpg ├── AnimatedCursor_featured-1.jpg ├── BackgroundScaleClip_featured.jpg ├── BeesBombsANimation.png ├── Buttons_featured.png ├── CaseStudy_Itsnotviolent_featured.jpg ├── Cutoutlayout_featured.jpg ├── DiagonalThumbnailsSlideshow_featured.jpg ├── DistortedLink_featured.png ├── FoldingDOM_featured.jpg ├── GooeyMenu_featured-1.jpg ├── HorizontalScroll_featured.jpg ├── ImageDragging_featured.jpg ├── InfiniteScrollMenu_featured.jpg ├── InlineMenuLayout_featured.jpg ├── IntroImageStackAnimation_featured.jpg ├── LinkEffects_featured.png ├── Marquee_featured.jpg ├── MenuEffects_feat.jpg ├── MenuToGrid_featured.jpg ├── Mirrors_featured.jpg ├── MotionGrid_featured.jpg ├── ParallaxSliderHoverReveal_featured.jpg ├── ProceduralClouds_featured-1.jpg ├── RapidLayerAnimation_featured.jpg ├── ScrollAnimationLocomotive.jpg ├── Soundbasedimagedistortion_featured.jpg ├── TextPath_featured.jpg ├── TextureProjection_featured.jpg ├── ThumbToFull_featured-1.jpg ├── Triangles_Featured.jpg ├── TypographyMotion_featured.jpg ├── Unrolling_featured-1.jpg ├── VideoTransitions_featured-2.jpg ├── WaveMotion_featured.jpg ├── glitchygrid.jpg ├── mousefeatured.jpg ├── rapid_feat.jpg └── thumbnail.jpg ├── index.html └── js ├── index.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.cache 3 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Codrops 2020 2 | 3 | A roundup of selected Codrops publications from the past year. 4 | 5 | ![Codrops 2020](https://tympanus.net/codrops/wp-content/uploads/2020/12/codrops2020.png) 6 | 7 | [Demo](http://tympanus.net/codrops2020) 8 | 9 | 10 | ## Installation 11 | 12 | Install dependencies: 13 | 14 | ``` 15 | npm install 16 | ``` 17 | 18 | Compile the code for development and start a local server: 19 | 20 | ``` 21 | npm start 22 | ``` 23 | 24 | Create the build: 25 | 26 | ``` 27 | npm run build 28 | ``` 29 | 30 | ## Misc 31 | 32 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 33 | 34 | ## License 35 | [MIT](LICENSE) 36 | 37 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codrops2020", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "parcel src/index.html --open", 8 | "clean": "rm -rf dist/*", 9 | "build:parcel": "parcel build src/index.html --no-content-hash --no-minify --no-source-maps --public-url ./", 10 | "build": "npm run clean && npm run build:parcel" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "imagesloaded": "^4.1.4", 17 | "locomotive-scroll": "^4.0.6", 18 | "parcel-bundler": "^1.12.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: inherit; 8 | } 9 | 10 | :root { 11 | font-size: 15px; 12 | } 13 | 14 | body { 15 | --color-text: #fff; 16 | --color-text-alt: #464646; 17 | --color-bg: #151617; 18 | --color-link: #777; 19 | --color-link-hover: #fff; 20 | color: #fff; 21 | color: var(--color-text); 22 | background-color: #151515; 23 | background-color: var(--color-bg); 24 | font-family: niveau-grotesk, sans-serif; 25 | -webkit-font-smoothing: antialiased; 26 | -moz-osx-font-smoothing: grayscale; 27 | } 28 | 29 | /* Page Loader */ 30 | .js .loading::before, 31 | .js .loading::after { 32 | content: ''; 33 | position: fixed; 34 | z-index: 1000; 35 | } 36 | 37 | .js .loading::before { 38 | top: 0; 39 | left: 0; 40 | width: 100%; 41 | height: 100%; 42 | background: var(--color-bg); 43 | } 44 | 45 | .js .loading::after { 46 | content: 'C'; 47 | text-align: center; 48 | top: 50%; 49 | left: 50%; 50 | width: 60px; 51 | height: 60px; 52 | margin: -30px 0 0 -30px; 53 | font-size: 4rem; 54 | color: var(--color-link); 55 | animation: loaderAnim 0.7s linear infinite alternate forwards; 56 | 57 | } 58 | 59 | @keyframes loaderAnim { 60 | to { 61 | transform: scale3d(-1,1,1); 62 | } 63 | } 64 | 65 | a { 66 | text-decoration: none; 67 | color: var(--color-link); 68 | outline: none; 69 | } 70 | 71 | a:hover, 72 | a:focus { 73 | color: var(--color-link-hover); 74 | outline: none; 75 | } 76 | 77 | h1, 78 | h2, 79 | h3, 80 | .loading { 81 | font-family: ivypresto-display, serif; 82 | font-weight: 100; 83 | font-style: normal; 84 | } 85 | 86 | p { 87 | line-height: 1.6; 88 | } 89 | 90 | .block { 91 | display: grid; 92 | position: relative; 93 | max-width: 1300px; 94 | margin: 0 auto; 95 | padding: 35vh 3.25rem; 96 | } 97 | 98 | .block--screen { 99 | align-items: center; 100 | } 101 | 102 | .block--centered { 103 | align-content: center; 104 | text-align: center; 105 | } 106 | 107 | .block--prime { 108 | grid-gap: 0; 109 | max-width: none; 110 | padding: 1.85rem 3.25rem; 111 | } 112 | 113 | .bgletter { 114 | z-index: -1; 115 | position: absolute; 116 | overflow: hidden; 117 | width: 100vw; 118 | top: 0; 119 | font-size: 67vw; 120 | display: flex; 121 | justify-content: center; 122 | align-items: flex-start; 123 | white-space: nowrap; 124 | } 125 | 126 | .block--two { 127 | grid-template-columns: auto; 128 | grid-gap: 3rem; 129 | } 130 | 131 | .block--story { 132 | justify-content: center; 133 | margin: 0 auto; 134 | grid-column-gap: 10vw; 135 | grid-template-columns: 100%; 136 | } 137 | 138 | .block__item { 139 | max-width: 100vw; 140 | justify-self: center; 141 | margin-bottom: 8rem; 142 | } 143 | 144 | .block__item:last-child { 145 | margin-bottom: 0; 146 | } 147 | 148 | .block__item-imgwrap { 149 | width: 100%; 150 | max-width: 600px; 151 | position: relative; 152 | overflow: hidden; 153 | } 154 | 155 | .block__item-img { 156 | width: 100%; 157 | height: auto; 158 | display: block; 159 | } 160 | 161 | .block__item-title { 162 | font-size: 2.25rem; 163 | line-height: 1.3; 164 | margin: 2rem 0; 165 | max-width: 400px; 166 | } 167 | 168 | .block__item-desc { 169 | margin: 1rem 0 2rem; 170 | max-width: 380px; 171 | color: var(--color-text-alt); 172 | } 173 | 174 | .block__item-link { 175 | display: inline-block; 176 | color: var(--color-text); 177 | text-decoration: underline; 178 | } 179 | 180 | .block__item-link:hover { 181 | text-decoration: none; 182 | } 183 | 184 | .block__item-link+.block__item-link { 185 | margin-left: 1rem; 186 | } 187 | 188 | .block__title { 189 | position: relative; 190 | font-size: 1.75rem; 191 | line-height: 1.1; 192 | } 193 | 194 | .block__title--single { 195 | font-size: 1.5rem; 196 | white-space: pre-wrap; 197 | } 198 | 199 | .block__title--small { 200 | text-transform: uppercase; 201 | font-family: inherit; 202 | font-weight: bold; 203 | font-size: 1rem; 204 | margin: 0 0 0.5rem 0; 205 | } 206 | 207 | .block__titlewrap { 208 | margin-top: 3rem; 209 | } 210 | 211 | .block__listtitle { 212 | font-weight: 400; 213 | font-size: 1.15rem; 214 | margin: 2rem 0; 215 | line-height: 1.25; 216 | } 217 | 218 | .block__listtitle a { 219 | color: var(--color-text); 220 | } 221 | 222 | .block__listtitle a:hover, 223 | .block__listtitle a:focus { 224 | text-decoration: underline; 225 | } 226 | 227 | .block__text { 228 | margin-left: auto; 229 | margin-right: auto; 230 | max-width: 450px; 231 | } 232 | 233 | .block__text--subline { 234 | margin: 2.5rem auto; 235 | } 236 | 237 | .block__text--em { 238 | font-style: italic; 239 | } 240 | 241 | .block__link { 242 | color: var(--color-text); 243 | text-decoration: underline; 244 | } 245 | 246 | .block__link:hover, 247 | .block__link:focus { 248 | text-decoration: none; 249 | } 250 | 251 | .row { 252 | display: flex; 253 | justify-content: space-between; 254 | } 255 | 256 | .row--header { 257 | align-self: start; 258 | } 259 | 260 | .row--footer { 261 | align-self: end; 262 | margin: 2rem 0 0 0; 263 | } 264 | 265 | .linkgroup { 266 | display: inline-block; 267 | } 268 | 269 | .linkgroup__text { 270 | display: inline-block; 271 | } 272 | 273 | .linkgroup__item { 274 | margin-left: 1.25rem; 275 | } 276 | 277 | .row--footer .linkgroup__item { 278 | margin: 0 0.25rem; 279 | } 280 | 281 | .title { 282 | text-align: center; 283 | margin: 4rem 0; 284 | } 285 | 286 | .title__main { 287 | line-height: 1; 288 | font-size: 20vw; 289 | margin: 0; 290 | } 291 | 292 | .title__sub { 293 | text-indent: -3vw; 294 | font-size: 1.5rem; 295 | font-weight: 300; 296 | color: var(--color-text-alt); 297 | } 298 | 299 | .intro { 300 | align-self: baseline; 301 | } 302 | 303 | .intro__block { 304 | max-width: 30ch; 305 | margin: 0 auto 1rem; 306 | } 307 | 308 | .nobreak { 309 | white-space: nowrap; 310 | } 311 | 312 | .breakout { 313 | left: 50%; 314 | right: 50%; 315 | margin: 0 -50vw; 316 | } 317 | 318 | .image-grid { 319 | pointer-events: none; 320 | position: relative; 321 | grid-area: 1 / 1 / 2 / 2; 322 | z-index: -1; 323 | width: 100vw; 324 | min-height: 90vh; 325 | display: grid; 326 | justify-content: space-between; 327 | align-content: space-between; 328 | grid-template-columns: repeat(4, 230px); 329 | grid-template-rows: repeat(3, 126px); 330 | grid-auto-flow: column; 331 | overflow: hidden; 332 | } 333 | 334 | .image-grid img { 335 | opacity: 0.4; 336 | justify-self: center; 337 | } 338 | 339 | .image-grid img:first-child { 340 | margin-top: 6vh; 341 | } 342 | 343 | .image-grid img:nth-child(4) { 344 | grid-column: 2; 345 | grid-row: 1 / 3; 346 | align-self: center; 347 | } 348 | 349 | .image-grid img:nth-child(5) { 350 | grid-column: 2; 351 | grid-row: 2 / 4; 352 | align-self: center; 353 | width: 200px; 354 | margin-top: 10vh; 355 | } 356 | 357 | .image-grid img:nth-child(7) { 358 | margin-top: 4vh; 359 | width: 210px; 360 | } 361 | 362 | .image-grid img:nth-child(9) { 363 | margin-top: 6vh; 364 | } 365 | 366 | .image-grid img:nth-child(11) { 367 | margin-top: -4vh; 368 | } 369 | 370 | .block--websites .block__cell { 371 | grid-area: 1 / 1 / 2 / 2; 372 | align-self: center; 373 | } 374 | 375 | .block__cell--grid { 376 | display: grid; 377 | grid-template-columns: repeat(3, 1fr); 378 | grid-template-rows: 50vh; 379 | align-items: center; 380 | direction: rtl; 381 | padding-left: 45px; 382 | } 383 | 384 | .block__cell-img { 385 | width: calc(100% + 45px); 386 | } 387 | 388 | .block__cell-img:first-child { 389 | align-self: start; 390 | } 391 | 392 | .block__cell-img:last-child { 393 | align-self: end; 394 | } 395 | 396 | .column-wrap { 397 | display: grid; 398 | grid-template-columns: repeat(4, 1fr); 399 | grid-gap: 1.5rem; 400 | grid-auto-flow: column; 401 | justify-content: space-between; 402 | } 403 | 404 | .column:nth-child(even) { 405 | margin-top: 3rem; 406 | } 407 | 408 | .column img { 409 | margin: 1.5rem 0; 410 | max-width: 100%; 411 | } 412 | 413 | #mc_embed_signup form { 414 | text-align: left; 415 | padding: 0; 416 | position: relative; 417 | display: inline-flex; 418 | width: 75%; 419 | min-width: 220px; 420 | max-width: 450px; 421 | } 422 | 423 | #mc_embed_signup input.email { 424 | width: 100%; 425 | padding: 1rem; 426 | font-size: 1rem; 427 | border-radius: 0; 428 | font-weight: 400; 429 | font-family: inherit; 430 | color: inherit; 431 | border: 1px solid var(--color-link); 432 | border-right: 0; 433 | background: none; 434 | } 435 | 436 | input.email::placeholder { 437 | color: #e1ddd7; 438 | } 439 | 440 | #mc_embed_signup input.email:focus { 441 | border-color: #fff; 442 | box-shadow: none; 443 | outline: none; 444 | } 445 | 446 | #mc_embed_signup .arrow { 447 | height: 100%; 448 | position: relative; 449 | } 450 | 451 | #mc_embed_signup .button { 452 | border: 0; 453 | -moz-appearance: none; 454 | -webkit-appearance: none; 455 | position: absolute; 456 | top: 0; 457 | left: 0; 458 | border-radius: 0; 459 | transition: none; 460 | width: 100%; 461 | height: 100%; 462 | line-height: inherit; 463 | background: transparent; 464 | cursor: pointer; 465 | } 466 | 467 | #mc_embed_signup .button:focus { 468 | outline: none; 469 | } 470 | 471 | #mc_embed_signup .arrow__inner { 472 | background: var(--color-link); 473 | height: 100%; 474 | position: relative; 475 | pointer-events: none; 476 | } 477 | 478 | #mc_embed_signup .button:focus + .arrow__inner { 479 | background: #fff; 480 | } 481 | 482 | #mc_embed_signup input:focus ~ .arrow .arrow__inner { 483 | background: #fff; 484 | } 485 | 486 | #mc_embed_signup .arrow svg { 487 | padding: 1rem; 488 | width: 52px; 489 | height: 52px; 490 | margin: 0 auto; 491 | display: block; 492 | fill: #000; 493 | } 494 | 495 | .footer { 496 | text-align: center; 497 | padding: 3rem; 498 | } 499 | 500 | .footer a { 501 | color: inherit; 502 | } 503 | 504 | @media screen and (max-width: 53em) { 505 | .row--footer { 506 | flex-wrap: wrap; 507 | justify-content: center; 508 | text-align: center; 509 | } 510 | 511 | .linkgroup--wrap { 512 | margin: 2rem 0 0 0; 513 | width: 100%; 514 | } 515 | .block--party h2 { 516 | text-align: center; 517 | margin: 0 auto; 518 | } 519 | .star { 520 | width: 7rem; 521 | height: 7rem; 522 | display: flex; 523 | align-items: center; 524 | justify-content: center; 525 | margin: 1rem auto; 526 | } 527 | } 528 | 529 | @media screen and (min-width: 53em) { 530 | .title { 531 | grid-area: 2 / 1 / 3 / 3; 532 | margin: 0; 533 | } 534 | 535 | .block--screen { 536 | min-height: 100vh; 537 | } 538 | 539 | .block--prime { 540 | grid-template-columns: 50% 50%; 541 | grid-template-rows: 2rem 1fr; 542 | } 543 | 544 | .block--story { 545 | grid-template-columns: 1fr 1fr; 546 | } 547 | 548 | .block__item { 549 | max-width: 600px; 550 | } 551 | 552 | .block__item:nth-child(even) { 553 | padding: 80% 0 0; 554 | } 555 | 556 | .row { 557 | grid-column: 1 / 3; 558 | } 559 | 560 | .row--footer { 561 | margin: 0; 562 | } 563 | 564 | .linkgroup__text { 565 | display: none; 566 | } 567 | 568 | .intro__block { 569 | margin: 0 0 1rem 0; 570 | } 571 | 572 | .block__listtitle { 573 | font-size: 1.5rem; 574 | } 575 | 576 | .block__title { 577 | font-size: 7vw; 578 | } 579 | 580 | .block__title--small { 581 | font-size: 1.5rem; 582 | } 583 | 584 | .block__title--single { 585 | white-space: nowrap; 586 | font-size: 2.75rem; 587 | } 588 | 589 | .block--two { 590 | grid-template-columns: minmax(200px, 360px) 1fr; 591 | } 592 | 593 | .column-wrap { 594 | grid-template-columns: repeat(4, 120px); 595 | } 596 | #mc_embed_signup input.email { 597 | padding: 1rem; 598 | font-size: 1rem; 599 | } 600 | } 601 | 602 | /*! locomotive-scroll v4.0.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ 603 | html.has-scroll-smooth { 604 | overflow: hidden; } 605 | 606 | html.has-scroll-dragging { 607 | -webkit-user-select: none; 608 | -moz-user-select: none; 609 | -ms-user-select: none; 610 | user-select: none; } 611 | 612 | .has-scroll-smooth body { 613 | overflow: hidden; } 614 | 615 | .has-scroll-smooth [data-scroll-container] { 616 | min-height: 100vh; } 617 | 618 | [data-scroll-direction="horizontal"] [data-scroll-container] { 619 | white-space: nowrap; 620 | height: 100vh; 621 | display: inline-block; 622 | white-space: nowrap; } 623 | 624 | [data-scroll-direction="horizontal"] [data-scroll-section] { 625 | display: inline-block; 626 | vertical-align: top; 627 | white-space: nowrap; 628 | height: 100%; } 629 | 630 | .c-scrollbar { 631 | position: absolute; 632 | right: 0; 633 | top: 0; 634 | width: 11px; 635 | height: 100%; 636 | transform-origin: center right; 637 | transition: transform 0.3s, opacity 0.3s; 638 | opacity: 0; } 639 | .c-scrollbar:hover { 640 | transform: scaleX(1.45); } 641 | .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { 642 | opacity: 1; } 643 | [data-scroll-direction="horizontal"] .c-scrollbar { 644 | width: 100%; 645 | height: 10px; 646 | top: auto; 647 | bottom: 0; 648 | transform: scaleY(1); } 649 | [data-scroll-direction="horizontal"] .c-scrollbar:hover { 650 | transform: scaleY(1.3); } 651 | 652 | .c-scrollbar_thumb { 653 | position: absolute; 654 | top: 0; 655 | right: 0; 656 | background-color: black; 657 | opacity: 0.5; 658 | width: 7px; 659 | border-radius: 10px; 660 | margin: 2px; 661 | cursor: -webkit-grab; 662 | cursor: grab; } 663 | .has-scroll-dragging .c-scrollbar_thumb { 664 | cursor: -webkit-grabbing; 665 | cursor: grabbing; } 666 | [data-scroll-direction="horizontal"] .c-scrollbar_thumb { 667 | right: auto; 668 | bottom: 0; } -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/favicon.ico -------------------------------------------------------------------------------- /src/img/3DCloth_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/3DCloth_featured.jpg -------------------------------------------------------------------------------- /src/img/AnimatedCursor_featured-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/AnimatedCursor_featured-1.jpg -------------------------------------------------------------------------------- /src/img/BackgroundScaleClip_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/BackgroundScaleClip_featured.jpg -------------------------------------------------------------------------------- /src/img/BeesBombsANimation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/BeesBombsANimation.png -------------------------------------------------------------------------------- /src/img/Buttons_featured.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/Buttons_featured.png -------------------------------------------------------------------------------- /src/img/CaseStudy_Itsnotviolent_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/CaseStudy_Itsnotviolent_featured.jpg -------------------------------------------------------------------------------- /src/img/Cutoutlayout_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/Cutoutlayout_featured.jpg -------------------------------------------------------------------------------- /src/img/DiagonalThumbnailsSlideshow_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/DiagonalThumbnailsSlideshow_featured.jpg -------------------------------------------------------------------------------- /src/img/DistortedLink_featured.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/DistortedLink_featured.png -------------------------------------------------------------------------------- /src/img/FoldingDOM_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/FoldingDOM_featured.jpg -------------------------------------------------------------------------------- /src/img/GooeyMenu_featured-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/GooeyMenu_featured-1.jpg -------------------------------------------------------------------------------- /src/img/HorizontalScroll_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/HorizontalScroll_featured.jpg -------------------------------------------------------------------------------- /src/img/ImageDragging_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/ImageDragging_featured.jpg -------------------------------------------------------------------------------- /src/img/InfiniteScrollMenu_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/InfiniteScrollMenu_featured.jpg -------------------------------------------------------------------------------- /src/img/InlineMenuLayout_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/InlineMenuLayout_featured.jpg -------------------------------------------------------------------------------- /src/img/IntroImageStackAnimation_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/IntroImageStackAnimation_featured.jpg -------------------------------------------------------------------------------- /src/img/LinkEffects_featured.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/LinkEffects_featured.png -------------------------------------------------------------------------------- /src/img/Marquee_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/Marquee_featured.jpg -------------------------------------------------------------------------------- /src/img/MenuEffects_feat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/MenuEffects_feat.jpg -------------------------------------------------------------------------------- /src/img/MenuToGrid_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/MenuToGrid_featured.jpg -------------------------------------------------------------------------------- /src/img/Mirrors_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/Mirrors_featured.jpg -------------------------------------------------------------------------------- /src/img/MotionGrid_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/MotionGrid_featured.jpg -------------------------------------------------------------------------------- /src/img/ParallaxSliderHoverReveal_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/ParallaxSliderHoverReveal_featured.jpg -------------------------------------------------------------------------------- /src/img/ProceduralClouds_featured-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/ProceduralClouds_featured-1.jpg -------------------------------------------------------------------------------- /src/img/RapidLayerAnimation_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/RapidLayerAnimation_featured.jpg -------------------------------------------------------------------------------- /src/img/ScrollAnimationLocomotive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/ScrollAnimationLocomotive.jpg -------------------------------------------------------------------------------- /src/img/Soundbasedimagedistortion_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/Soundbasedimagedistortion_featured.jpg -------------------------------------------------------------------------------- /src/img/TextPath_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/TextPath_featured.jpg -------------------------------------------------------------------------------- /src/img/TextureProjection_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/TextureProjection_featured.jpg -------------------------------------------------------------------------------- /src/img/ThumbToFull_featured-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/ThumbToFull_featured-1.jpg -------------------------------------------------------------------------------- /src/img/Triangles_Featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/Triangles_Featured.jpg -------------------------------------------------------------------------------- /src/img/TypographyMotion_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/TypographyMotion_featured.jpg -------------------------------------------------------------------------------- /src/img/Unrolling_featured-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/Unrolling_featured-1.jpg -------------------------------------------------------------------------------- /src/img/VideoTransitions_featured-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/VideoTransitions_featured-2.jpg -------------------------------------------------------------------------------- /src/img/WaveMotion_featured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/WaveMotion_featured.jpg -------------------------------------------------------------------------------- /src/img/glitchygrid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/glitchygrid.jpg -------------------------------------------------------------------------------- /src/img/mousefeatured.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/mousefeatured.jpg -------------------------------------------------------------------------------- /src/img/rapid_feat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/rapid_feat.jpg -------------------------------------------------------------------------------- /src/img/thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/codrops2020/a86b6a49f3a142d3549d68511f55390fbc9d4191/src/img/thumbnail.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 2020: A round-up of all Codrops resources 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 31 | 32 | 33 | 34 |
35 |
36 |
37 | 38 |
39 | Tw 40 | In 41 | Fb 42 |
43 |
44 |
45 |

2020

46 |

A roundup of selected Codrops publications from the past year

47 |
48 |
49 | 50 |
51 |
52 | 53 | BeesBombsANimation 54 |

Recreating a Dave Whyte Animation in React-Three-Fiber

55 |

Learn how to use instanced rendering and post-processing techniques to recreate a hypnotic looping animation with react-three-fiber.

56 | Article 57 | Demo 58 |
59 |
60 | 61 | HorizontalScroll_featured 62 |

Horizontal Smooth Scroll Layouts

63 |

Some ideas for horizontal smooth scrolling layouts powered by Locomotive Scroll.

64 | Article 65 | Demo 66 |
67 |
68 | 69 | ParallaxSliderHoverReveal_featured 70 |

Crafting a Scrollable and Draggable Parallax Slider

71 |

A tutorial on how to build a slider with an interesting parallax effect that you can either scroll or drag through.

72 | Article 73 | Demo 74 |
75 |
76 | 77 | IntroImageStackAnimation_featured 78 |

Image Stack Intro Animation

79 |

Two simple intro animations where an image stack moves to become a grid.

80 | Article 81 | Demo 82 |
83 |
84 | 85 | InlineMenuLayout_featured 86 |

Inline Menu Layout with Gallery Panel

87 |

An inline menu layout with a playful hover animation and a gallery content preview panel.

88 | Article 89 | Demo 90 |
91 |
92 | 93 | ScrollAnimationLocomotive 94 |

Scroll Animations for Image Grids

95 |

Some ideas for scroll animations for image grids powered by Locomotive Scroll.

96 | Article 97 | Demo 98 |
99 |
100 | 101 | VideoTransitions_featured 102 |

WebGL Video Transitions with Curtains.js

103 |

Some experimental video transitions using Curtains.js and shaders.

104 | Article 105 | Demo 106 |
107 |
108 | 109 | Mirrors_featured 110 |

Creating Mirrors in React-Three-Fiber and Three.js

111 |

A brief walk-through of how to create a mirror scene with react-three-fiber.

112 | Article 113 | Demo 114 |
115 |
116 | 117 | MenuToGrid_featured 118 |

Menu to Inner Page Animation with Image Grid Background

119 |

A layout with a menu and background image grid that animates to an inner content page.

120 | Article 121 | Demo 122 |
123 |
124 | 125 | DiagonalThumbnailsSlideshow_featured 126 |

Diagonal Thumbnail Slideshow Animation

127 |

A simple slideshow with tilted thumbnails and large titles that animate when navigating.

128 | Article 129 | Demo 130 |
131 |
132 | 133 | Triangles_Featured 134 |

Experimental Triangle Image Transitions with WebGL

135 |

Some experimental animations using triangles for image transitions with WebGL.

136 | Article 137 | Demo 138 |
139 |
140 | 141 | ThumbToFull_featured 142 |

Thumbnail to Full Width Image Animation

143 |

An experimental animation where an image goes from thumbnail to full width, allowing for a classy entry to an article view.

144 | Article 145 | Demo 146 |
147 |
148 | 149 | Buttons_featured 150 |

Magnetic Buttons

151 |

A small set of magnetic buttons with some fun hover animations.

152 | Article 153 | Demo 154 |
155 |
156 | 157 | MenuEffects_feat 158 |

Exploring Animations for Menu Hover Effects

159 |

A couple of ideas for creative menu hover animations with images.

160 | Article 161 | Demo 162 |
163 |
164 | 165 | rapid_feat 166 |

Creating a Menu Image Animation on Hover

167 |

A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.

168 | Article 169 | Demo 170 |
171 |
172 | 173 | glitchygrid 174 |

A Glitchy Grid Layout Slideshow

175 |

An experimental grid slideshow with a stack-like navigation and glitch effect.

176 | Article 177 | Demo 178 |
179 |
180 | 181 | TypographyMotion_featured 182 |

Making Stagger Reveal Animations for Text

183 |

A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js.

184 | Article 185 | Demo 186 |
187 |
188 | 189 | MotionGrid_featured 190 |

How to Create a Motion Hover Effect for a Background Image Grid

191 |

A short tutorial on how to achieve a motion hover effect on a background image grid.

192 | Article 193 | Demo 194 |
195 |
196 | 197 | thumbnail 198 |

Kinetic Typography with Three.js

199 |

Discover how to use Three.js to render kinetic 3D typography.

200 | Article 201 | Demo 202 |
203 |
204 | 205 | Infinite Scroll Menu 206 |

An Infinitely Scrollable Vertical Menu

207 |

A quick look at how an infinitely scrollable menu works based on a looping scroll illusion of cloned items.

208 | Article 209 | Demo 210 |
211 |
212 | 213 | GooeyMenu_featured 214 |

Morphing Gooey Text Hover Effect

215 |

Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.

216 | Article 217 | Demo 218 |
219 |
220 | 221 | mousefeatured 222 |

Interactive WebGL Hover Effects

223 |

A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.

224 | Article 225 | Demo 226 |
227 |
228 | 229 | RapidLayerAnimation_featured 230 |

Rapid Image Layers Animation

231 |

A rapid animation of multiple layers of images for intros or page transitions.

232 | Article 233 | Demo 234 |
235 |
236 | 237 | Marquee_featured 238 |

CSS-Only Marquee Effect

239 |

A simple CSS-only marquee effect for a menu based on Francesco Zagami's Dribbble shot.

240 | Article 241 | Demo 242 |
243 |
244 | 245 | AnimatedCursor_featured 246 |

Animated Custom Cursor Effects

247 |

Some ideas for interactive custom cursor animations using SVG filters.

248 | Article 249 | Demo 250 |
251 |
252 | 253 | LinkEffects_featured 254 |

Ideas for Distorted Link Effects on Menus

255 |

Some examples of how to use decorative distortion effects on big typography menu links.

256 | Article 257 | Demo 258 |
259 |
260 | 261 | WaveMotion_featured 262 |

Create a Wave Motion Effect on an Image with Three.js

263 |

Learn how to make a wave motion effect on an image with Three.js.

264 | Article 265 | Demo 266 |
267 |
268 | 269 | BackgroundScaleClip_featured 270 |

Background Scale Hover Effect with CSS Clip-path

271 |

A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path.

272 | Article 273 | Demo 274 |
275 |
276 | 277 | DistortedLink_featured 278 |

Distorted Link Effects with SVG Filters

279 |

A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.

280 | Article 281 | Demo 282 |
283 |
284 | 285 | TextPath_featured 286 |

Animating SVG Text on a Path

287 |

A demo that shows how to animate SVG text on a path on scroll using the Intersection Observer API and SVG filters.

288 | Article 289 | Demo 290 |
291 |
292 | 293 | Soundbasedimagedistortion_featured 294 |

Audio-based Image Distortion Effects with WebGL

295 |

Some experiments that show how to make audio-based distortion effects on images with p5.js and its sound library.

296 | Article 297 | Demo 298 |
299 |
300 | 301 | 3DCloth_featured 302 |

How to Create a Physics-based 3D Cloth with Cannon.js and Three.js

303 |

Learn how to create a physics-based 3D cloth with Cannon.js and Three.js and use simplex noise to create a wind effect.

304 | Article 305 | Demo 306 |
307 |
308 | 309 | Cutoutlayout_featured 310 |

Crafting a Cutout Collage Layout with CSS Grid and Clip-path

311 |

Learn how to code up an interesting design with a cutout image look using CSS Grid and clip-path.

312 | Article 313 | Demo 314 |
315 |
316 | 317 | ImageDragging_featured 318 |

Image Dragging Effects

319 |

A set of playful dragging effects for images using various techniques.

320 | Article 321 | Demo 322 |
323 |
324 | 325 | ProceduralClouds_featured 326 |

How to Create Procedural Clouds Using Three.js Sprites

327 |

Learn how to simulate a cloud on a Three.js Sprite using React-Three-Fiber.

328 | Article 329 | Demo 330 |
331 |
332 | 333 | Featured Image for How to Unroll Images with Three.js 334 |

How to Unroll Images with Three.js

335 |

Discover the basic concept behind an unrolling image effect using WebGL.

336 | Article 337 | Demo 338 |
339 |
340 | 341 | CaseStudy_Itsnotviolent_featured 342 |

Case Study: itsnotviolent.com

343 |

A case study that explores the motivation, design and implementation behind the itsnotviolent.com awareness campaign website made by Locomotive.

344 | Article 345 |
346 |
347 | 348 | FoldingDOM_featured 349 |

3D Folding Layout Technique for HTML Elements

350 |

A tutorial on an experimental 3D layout technique for HTML elements with endless possibilities.

351 | Article 352 | Demo 353 |
354 |
355 | 356 | Featured image for Playing with Texture Projection in Three.js 357 |

Playing with Texture Projection in Three.js

358 |

In this tutorial, you'll learn how to project a texture onto an object in Three.js with some interesting examples.

359 | Article 360 | Demo 361 |
362 |
363 |
364 |

Our Sponsors

365 |

366 | Thank you, BuySellAds, Syndicate Ads, ThoughtLeaders and Bawmedia for making Codrops possible.

367 |
368 |
369 |

Subscribe
to Codrops

370 |

371 | Receive the Collective (max. twice a week) and our official newsletter (once a month) right in your inbox. 372 |

373 | 389 |
390 |
Codrops 2020 391 |
392 | Tw 393 | In 394 | Fb 395 |
396 |
397 |
398 | 399 | 400 | 401 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import {preloadImages, preloadFonts} from './utils'; 2 | import LocomotiveScroll from 'locomotive-scroll'; 3 | 4 | // Initialize Locomotive Scroll 5 | const lscroll = new LocomotiveScroll({ 6 | el: document.querySelector('[data-scroll-container]'), 7 | smooth: true 8 | }); 9 | 10 | // Preload images and fonts 11 | Promise.all([preloadImages(), preloadFonts('qcf1haf')]).then(() => { 12 | // Remove loader (loading class) 13 | document.body.classList.remove('loading'); 14 | lscroll.update(); 15 | }); -------------------------------------------------------------------------------- /src/js/utils.js: -------------------------------------------------------------------------------- 1 | const imagesLoaded = require('imagesloaded'); 2 | 3 | // Preload images 4 | const preloadImages = (selector = 'img') => { 5 | return new Promise((resolve) => { 6 | imagesLoaded(document.querySelectorAll(selector), resolve); 7 | }); 8 | }; 9 | 10 | // Preload images 11 | const preloadFonts = (id) => { 12 | return new Promise((resolve) => { 13 | WebFont.load({ 14 | typekit: { 15 | id: id 16 | }, 17 | active: resolve 18 | }); 19 | }); 20 | }; 21 | 22 | export { 23 | preloadImages, 24 | preloadFonts 25 | }; --------------------------------------------------------------------------------