├── README.md ├── css ├── component.css ├── demo.css └── normalize.css ├── fonts └── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt ├── img ├── 1.png ├── 10.png ├── 11.png ├── 12.png ├── 13.png ├── 14.png ├── 15.png ├── 16.png ├── 17.png ├── 18.png ├── 19.png ├── 2.png ├── 20.png ├── 21.png ├── 22.png ├── 23.png ├── 24.png ├── 3.jpg ├── 4.jpg ├── 5.png ├── 6.png ├── 7.png ├── 8.png └── 9.png └── index.html /README.md: -------------------------------------------------------------------------------- 1 | Arrow Navigation Styles 2 | ========= 3 | 4 | Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects. 5 | 6 | [Article on Codrops](http://tympanus.net/codrops/?p=19164) 7 | 8 | [Demo](http://tympanus.net/Development/ArrowNavigationStyles/) 9 | 10 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 11 | 12 | Read more here: [License](http://tympanus.net/codrops/licensing/) 13 | 14 | 15 | [© Codrops 2014](http://www.codrops.com) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | nav a { 2 | position: absolute; 3 | top: 50%; 4 | display: block; 5 | outline: none; 6 | text-align: left; 7 | z-index: 1000; 8 | -webkit-transform: translateY(-50%); 9 | transform: translateY(-50%); 10 | } 11 | 12 | nav a.prev { 13 | left: 0; 14 | } 15 | 16 | nav a.next { 17 | right: 0; 18 | } 19 | 20 | nav a svg { 21 | display: block; 22 | margin: 0 auto; 23 | padding: 0; 24 | } 25 | 26 | /* Individual styles */ 27 | 28 | /*--------------------*/ 29 | /* Slide out */ 30 | /*--------------------*/ 31 | 32 | .color-1 { background: #bdc3c7; } 33 | 34 | .nav-slide .icon-wrap { 35 | position: relative; 36 | z-index: 100; 37 | display: block; 38 | padding: 20px; 39 | background-color: #fff; 40 | } 41 | 42 | .nav-slide svg.icon { 43 | fill: #34495e; 44 | } 45 | 46 | .nav-slide div { 47 | position: absolute; 48 | top: 50%; 49 | padding: 0 100px; 50 | background-color: #34495e; 51 | -webkit-transition: -webkit-transform 0.3s; 52 | transition: transform 0.3s; 53 | } 54 | 55 | .nav-slide a.prev div { 56 | left: 0; 57 | padding-right: 120px; 58 | -webkit-transform: translateY(-50%) translateX(-100%); 59 | transform: translateY(-50%) translateX(-100%); 60 | } 61 | 62 | .nav-slide a.next div { 63 | right: 0; 64 | padding-left: 120px; 65 | text-align: right; 66 | -webkit-transform: translateY(-50%) translateX(100%); 67 | transform: translateY(-50%) translateX(100%); 68 | } 69 | 70 | .nav-slide h3 { 71 | position: relative; 72 | margin: 0; 73 | padding: 20px 0; 74 | color: #fff; 75 | white-space: nowrap; 76 | font-weight: 300; 77 | font-size: 1.3em; 78 | line-height: 1.5; 79 | } 80 | 81 | .nav-slide div h3 span { 82 | display: block; 83 | color: #95a5a6; 84 | font-style: italic; 85 | font-size: 65%; 86 | font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; 87 | } 88 | 89 | .nav-slide img { 90 | position: absolute; 91 | top: 0; 92 | height: 100%; 93 | } 94 | 95 | .nav-slide a.prev img { 96 | right: 0; 97 | } 98 | 99 | .nav-slide a.next img { 100 | left: 0; 101 | } 102 | 103 | .nav-slide a:hover div { 104 | -webkit-transform: translateY(-50%) translateX(0); 105 | transform: translateY(-50%) translateX(0); 106 | } 107 | 108 | /*--------------------*/ 109 | /* Image bar */ 110 | /*--------------------*/ 111 | .color-2 { background: #34495e; } 112 | 113 | .nav-imgbar a { 114 | overflow: hidden; 115 | width: 100px; 116 | height: 90%; 117 | background-color: transparent; 118 | -webkit-transition: background-color 0.3s; 119 | transition: background-color 0.3s; 120 | } 121 | 122 | .nav-imgbar .icon-wrap { 123 | position: relative; 124 | top: 50%; 125 | z-index: 100; 126 | display: block; 127 | margin: 0 auto; 128 | padding: 30px; 129 | -webkit-transition: -webkit-transform 0.3s; 130 | transition: transform 0.3s; 131 | } 132 | 133 | .nav-imgbar a.prev .icon-wrap { 134 | -webkit-transform: translateY(-50%) translateX(10px); 135 | transform: translateY(-50%) translateX(10px); 136 | } 137 | 138 | .nav-imgbar a.next .icon-wrap { 139 | -webkit-transform: translateY(-50%) translateX(-10px); 140 | transform: translateY(-50%) translateX(-10px); 141 | } 142 | 143 | .nav-imgbar svg.icon { 144 | fill: #fff; 145 | } 146 | 147 | .nav-imgbar img { 148 | position: absolute; 149 | top: 0; 150 | min-width: 100%; 151 | min-height: 100%; 152 | opacity: 0; 153 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 154 | transition: opacity 0.3s, transform 0.3s; 155 | } 156 | 157 | .nav-imgbar a.prev img { 158 | left: 0; 159 | -webkit-transform: translateX(100%); 160 | transform: translateX(100%); 161 | } 162 | 163 | .nav-imgbar a.next img { 164 | right: 0; 165 | -webkit-transform: translateX(-100%); 166 | transform: translateX(-100%); 167 | } 168 | 169 | .nav-imgbar a:hover { 170 | background-color: rgba(255,255,255,0.7); 171 | } 172 | 173 | .nav-imgbar a:hover .icon-wrap { 174 | -webkit-transform: translateY(-50%) translateX(0); 175 | transform: translateY(-50%) translateX(0); 176 | } 177 | 178 | .nav-imgbar a:hover img { 179 | opacity: 0.6; 180 | -webkit-transform: translateX(0); 181 | transform: translateX(0); 182 | } 183 | 184 | /*--------------------*/ 185 | /* Circle pop */ 186 | /*--------------------*/ 187 | .color-3 { background: #cc6055; } 188 | 189 | .nav-circlepop a { 190 | margin: 0 30px; 191 | width: 50px; 192 | height: 50px; 193 | } 194 | 195 | .nav-circlepop a::before { 196 | position: absolute; 197 | top: 0; 198 | left: 0; 199 | width: 100%; 200 | height: 100%; 201 | border-radius: 50%; 202 | background: #fff; 203 | content: ''; 204 | opacity: 0; 205 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 206 | transition: transform 0.3s, opacity 0.3s; 207 | -webkit-transform: scale(0.9); 208 | transform: scale(0.9); 209 | } 210 | 211 | .nav-circlepop .icon-wrap { 212 | position: relative; 213 | display: block; 214 | margin: 10% 0 0 10%; 215 | width: 80%; 216 | height: 80%; 217 | } 218 | 219 | .nav-circlepop a.next .icon-wrap { 220 | -webkit-transform: rotate(180deg); 221 | transform: rotate(180deg); 222 | } 223 | 224 | .nav-circlepop .icon-wrap::before, 225 | .nav-circlepop .icon-wrap::after { 226 | position: absolute; 227 | left: 25%; 228 | width: 3px; 229 | height: 50%; 230 | background: #fff; 231 | content: ''; 232 | -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; 233 | transition: transform 0.3s, background-color 0.3s; 234 | -webkit-backface-visibility: hidden; 235 | backface-visibility: hidden; 236 | } 237 | 238 | .nav-circlepop .icon-wrap::before { 239 | -webkit-transform: translateX(-50%) rotate(30deg); 240 | transform: translateX(-50%) rotate(30deg); 241 | -webkit-transform-origin: 0 100%; 242 | transform-origin: 0 100%; 243 | } 244 | 245 | .nav-circlepop .icon-wrap::after { 246 | top: 50%; 247 | -webkit-transform: translateX(-50%) rotate(-30deg); 248 | transform: translateX(-50%) rotate(-30deg); 249 | -webkit-transform-origin: 0 0; 250 | transform-origin: 0 0; 251 | } 252 | 253 | .nav-circlepop a:hover::before { 254 | opacity: 1; 255 | -webkit-transform: scale(1); 256 | transform: scale(1); 257 | } 258 | 259 | .nav-circlepop a:hover .icon-wrap::before, 260 | .nav-circlepop a:hover .icon-wrap::after { 261 | background: #cc6055; 262 | } 263 | 264 | .nav-circlepop a:hover .icon-wrap::before { 265 | -webkit-transform: translateX(-50%) rotate(45deg); 266 | transform: translateX(-50%) rotate(45deg); 267 | } 268 | 269 | .nav-circlepop a:hover .icon-wrap::after { 270 | -webkit-transform: translateX(-50%) rotate(-45deg); 271 | transform: translateX(-50%) rotate(-45deg); 272 | } 273 | 274 | /*--------------------*/ 275 | /* Rounded slide */ 276 | /*--------------------*/ 277 | .color-4 { background-color: #566473; } 278 | 279 | .nav-roundslide a { 280 | margin: 0 20px; 281 | padding: 15px; 282 | width: 62px; 283 | height: 62px; 284 | border-radius: 40px; 285 | background: #34495e; 286 | -webkit-transition: width 0.3s, background-color 0.3s; 287 | transition: width 0.3s, background-color 0.3s; 288 | } 289 | 290 | .nav-roundslide .icon-wrap { 291 | position: absolute; 292 | width: 32px; 293 | } 294 | 295 | .nav-roundslide a.prev .icon-wrap { 296 | left: 15px; 297 | } 298 | 299 | .nav-roundslide a.next .icon-wrap { 300 | right: 15px; 301 | } 302 | 303 | .nav-roundslide svg.icon { 304 | fill: #566473; 305 | } 306 | 307 | .nav-roundslide h3 { 308 | position: absolute; 309 | top: 0; 310 | margin: 0; 311 | color: #566473; 312 | text-transform: uppercase; 313 | white-space: nowrap; 314 | letter-spacing: 1px; 315 | font-weight: 400; 316 | font-size: 0.85em; 317 | line-height: 4.45; 318 | opacity: 0; 319 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 320 | transition: opacity 0.3s, transform 0.3s; 321 | } 322 | 323 | .nav-roundslide a.prev h3 { 324 | right: 20px; 325 | -webkit-transform: translateX(100%); 326 | transform: translateX(100%); 327 | } 328 | 329 | .nav-roundslide a.next h3 { 330 | left: 20px; 331 | -webkit-transform: translateX(-100%); 332 | transform: translateX(-100%); 333 | } 334 | 335 | .nav-roundslide a:hover { 336 | width: 200px; 337 | background: #fff; 338 | } 339 | 340 | .nav-roundslide a:hover h3 { 341 | opacity: 1; 342 | -webkit-transition-delay: 0.1s; 343 | transition-delay: 0.1s; 344 | -webkit-transform: translateX(0); 345 | transform: translateX(0); 346 | } 347 | 348 | /*--------------------*/ 349 | /* Slit (inspired by Jam3) */ 350 | /*--------------------*/ 351 | .color-5 { background: #cdd2d5; } 352 | 353 | .nav-slit .icon-wrap { 354 | position: relative; 355 | display: block; 356 | padding: 45px 5px; 357 | background-color: #939a9f; 358 | } 359 | 360 | .nav-slit svg.icon { 361 | -webkit-transition: -webkit-transform 0.3s 0.3s; 362 | transition: transform 0.3s 0.3s; 363 | fill: #fff; 364 | } 365 | 366 | .nav-slit div { 367 | position: absolute; 368 | top: 0; 369 | width: 200px; 370 | height: 100%; 371 | background-color: #939a9f; 372 | -webkit-transition: -webkit-transform 0.3s 0.3s; 373 | transition: transform 0.3s 0.3s; 374 | -webkit-perspective: 1000px; 375 | perspective: 1000px; 376 | } 377 | 378 | .nav-slit a.prev div { 379 | left: 0; 380 | -webkit-transform: translateX(-100%); 381 | transform: translateX(-100%); 382 | } 383 | 384 | .nav-slit a.next div { 385 | right: 0; 386 | text-align: right; 387 | -webkit-transform: translateX(100%); 388 | transform: translateX(100%); 389 | } 390 | 391 | .nav-slit h3 { 392 | position: absolute; 393 | top: 100%; 394 | margin: 0; 395 | padding: 0 20px; 396 | width: 100%; 397 | height: 30%; 398 | background: #34495e; 399 | color: #fff; 400 | text-transform: uppercase; 401 | white-space: nowrap; 402 | letter-spacing: 1px; 403 | font-weight: 500; 404 | font-size: 0.75em; 405 | line-height: 2.75; 406 | -webkit-transition: -webkit-transform 0.3s; 407 | transition: transform 0.3s; 408 | -webkit-transform: rotateX(-90deg); 409 | transform: rotateX(-90deg); 410 | -webkit-transform-origin: 50% 0; 411 | transform-origin: 50% 0; 412 | -webki-backface-visibility: hidden; 413 | -webkit-backface-visibility: hidden; 414 | backface-visibility: hidden; 415 | } 416 | 417 | .nav-slit img { 418 | position: absolute; 419 | top: 0; 420 | left: 0; 421 | width: 100%; 422 | } 423 | 424 | .nav-slit a:hover svg.icon { 425 | -webkit-transition-delay: 0s; 426 | transition-delay: 0s; 427 | } 428 | 429 | .nav-slit a.prev:hover svg.icon { 430 | -webkit-transform: translateX(-100%); 431 | transform: translateX(-100%); 432 | } 433 | 434 | .nav-slit a.next:hover svg.icon { 435 | -webkit-transform: translateX(100%); 436 | transform: translateX(100%); 437 | } 438 | 439 | .nav-slit a:hover div { 440 | -webkit-transform: translateX(0); 441 | transform: translateX(0); 442 | } 443 | 444 | .nav-slit a:hover h3 { 445 | -webkit-transition-delay: 0.6s; 446 | transition-delay: 0.6s; 447 | -webkit-transform: rotateX(0deg); 448 | transform: rotateX(0deg); 449 | } 450 | 451 | /*--------------------*/ 452 | /* Reveal */ 453 | /*--------------------*/ 454 | .color-6 { background-color: #af7ac4; } 455 | 456 | .nav-reveal a { 457 | overflow: hidden; 458 | width: 40px; 459 | height: 120px; 460 | background-color: rgba(142,68,173,0.6); 461 | -webkit-transition: width 0.4s, background-color 0.4s; 462 | transition: width 0.4s, background-color 0.4s; 463 | -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); 464 | transition-timing-function: cubic-bezier(0.7,0,0.3,1); 465 | } 466 | 467 | .nav-reveal .icon-wrap { 468 | position: absolute; 469 | z-index: 100; 470 | padding: 44px 4px; 471 | width: 40px; 472 | } 473 | 474 | .nav-reveal a.prev .icon-wrap { 475 | left: 0; 476 | } 477 | 478 | .nav-reveal a.next .icon-wrap { 479 | right: 0; 480 | } 481 | 482 | .nav-reveal svg.icon { 483 | fill: #af7ac4; 484 | } 485 | 486 | .nav-reveal div { 487 | position: absolute; 488 | top: 0; 489 | padding: 0 50px; 490 | width: 400px; 491 | height: 100%; 492 | } 493 | 494 | .nav-reveal a.prev div { 495 | left: 0; 496 | padding-right: 130px; 497 | text-align: right; 498 | } 499 | 500 | .nav-reveal a.next div { 501 | right: 0; 502 | padding-left: 130px; 503 | } 504 | 505 | .nav-reveal h3 { 506 | position: relative; 507 | margin: 0; 508 | padding: 20px 0; 509 | color: #fff; 510 | font-weight: 300; 511 | font-size: 1.45em; 512 | line-height: 1.2; 513 | } 514 | 515 | .nav-reveal div h3 span { 516 | display: block; 517 | padding-top: 10px; 518 | color: #542568; 519 | text-transform: uppercase; 520 | letter-spacing: 1px; 521 | font-weight: 700; 522 | font-size: 50%; 523 | } 524 | 525 | .nav-reveal img { 526 | position: absolute; 527 | top: 10px; 528 | height: 100px; 529 | } 530 | 531 | .nav-reveal a.prev img { 532 | right: 10px; 533 | } 534 | 535 | .nav-reveal a.next img { 536 | left: 10px; 537 | } 538 | 539 | .nav-reveal a:hover { 540 | width: 400px; 541 | background-color: #8e44ad; 542 | } 543 | 544 | /*--------------------*/ 545 | /* Thumb flip */ 546 | /*--------------------*/ 547 | .color-7 { background-color: #c1b8ab; } 548 | 549 | .nav-thumbflip a { 550 | -webkit-perspective: 1000px; 551 | perspective: 1000px; 552 | } 553 | 554 | .nav-thumbflip a.prev { 555 | -webkit-perspective-origin: 100% 50%; 556 | perspective-origin: 100% 50%; 557 | } 558 | 559 | .nav-thumbflip a.next { 560 | -webkit-perspective-origin: 0% 50%; 561 | perspective-origin: 0% 50%; 562 | } 563 | 564 | .nav-thumbflip .icon-wrap { 565 | display: block; 566 | width: 100px; 567 | height: 100px; 568 | background-color: #b1a798; 569 | -webkit-transition: background-color 0.3s; 570 | transition: background-color 0.3s; 571 | } 572 | 573 | .nav-thumbflip svg.icon { 574 | position: relative; 575 | top: 50%; 576 | -webkit-transition: fill 0.3s; 577 | transition: fill 0.3s; 578 | -webkit-transform: translateY(-50%); 579 | transform: translateY(-50%); 580 | fill: #fff; 581 | } 582 | 583 | .nav-thumbflip img { 584 | position: absolute; 585 | top: 0; 586 | -webkit-transition: -webkit-transform 0.3s; 587 | transition: transform 0.3s; 588 | -webkit-backface-visibility: hidden; 589 | backface-visibility: hidden; 590 | } 591 | 592 | .nav-thumbflip a.prev img { 593 | left: 100%; 594 | -webkit-transform: rotateY(90deg); 595 | transform: rotateY(90deg); 596 | -webkit-transform-origin: 0% 50%; 597 | transform-origin: 0% 50%; 598 | } 599 | 600 | .nav-thumbflip a.next img { 601 | right: 100%; 602 | -webkit-transform: rotateY(-90deg); 603 | transform: rotateY(-90deg); 604 | -webkit-transform-origin: 100% 50%; 605 | transform-origin: 100% 50%; 606 | } 607 | 608 | .nav-thumbflip a:hover .icon-wrap { 609 | background-color: #fff; 610 | } 611 | 612 | .nav-thumbflip a:hover svg.icon { 613 | fill: #c1b8ab; 614 | } 615 | 616 | .nav-thumbflip a:hover img { 617 | -webkit-transform: rotateY(0deg); 618 | transform: rotateY(0deg); 619 | } 620 | 621 | /*--------------------*/ 622 | /* Double flip */ 623 | /*--------------------*/ 624 | .color-8 { background-color: #47c9af; } 625 | 626 | .nav-doubleflip a { 627 | -webkit-perspective: 1000px; 628 | perspective: 1000px; 629 | } 630 | 631 | .nav-doubleflip a.prev { 632 | -webkit-perspective-origin: 100% 50%; 633 | perspective-origin: 100% 50%; 634 | } 635 | 636 | .nav-doubleflip a.next { 637 | -webkit-perspective-origin: 0% 50%; 638 | perspective-origin: 0% 50%; 639 | } 640 | 641 | .nav-doubleflip .icon-wrap { 642 | position: relative; 643 | z-index: 100; 644 | display: block; 645 | width: 130px; 646 | height: 100px; 647 | background-color: #16a085; 648 | -webkit-transition: background-color 0.3s 0.3s; 649 | transition: background-color 0.3s 0.3s; 650 | } 651 | 652 | .nav-doubleflip svg.icon { 653 | position: relative; 654 | top: 50%; 655 | -webkit-transition: fill 0.3s 0.3s; 656 | transition: fill 0.3s 0.3s; 657 | -webkit-transform: translateY(-50%); 658 | transform: translateY(-50%); 659 | fill: #fff; 660 | } 661 | 662 | .nav-doubleflip div { 663 | position: absolute; 664 | top: 0; 665 | width: 100%; 666 | height: 100%; 667 | -webkit-transition: -webkit-transform 0.3s 0.3s; 668 | transition: transform 0.3s 0.3s; 669 | -webkit-transform-style: preserve-3d; 670 | transform-style: preserve-3d; 671 | } 672 | 673 | .nav-doubleflip a.prev div, 674 | .nav-doubleflip a.prev h3 { 675 | left: 100%; 676 | -webkit-transform: rotateY(90deg); 677 | transform: rotateY(90deg); 678 | -webkit-transform-origin: 0% 50%; 679 | transform-origin: 0% 50%; 680 | } 681 | 682 | .nav-doubleflip a.next div, 683 | .nav-doubleflip a.next h3 { 684 | right: 100%; 685 | -webkit-transform: rotateY(-90deg); 686 | transform: rotateY(-90deg); 687 | -webkit-transform-origin: 100% 50%; 688 | transform-origin: 100% 50%; 689 | } 690 | 691 | .nav-doubleflip img, 692 | .nav-doubleflip h3 { 693 | position: absolute; 694 | top: 0; 695 | width: 100%; 696 | height: 100%; 697 | -webkit-backface-visibility: hidden; 698 | backface-visibility: hidden; 699 | } 700 | 701 | .nav-doubleflip h3 { 702 | margin: 0; 703 | padding: 1.75em 1em 0; 704 | background-color: #16a085; 705 | color: #fff; 706 | text-align: center; 707 | text-transform: uppercase; 708 | letter-spacing: 1px; 709 | font-weight: 300; 710 | font-style: italic; 711 | font-size: 1.15em; 712 | line-height: 1; 713 | -webkit-transition: -webkit-transform 0.3s; 714 | transition: transform 0.3s; 715 | } 716 | 717 | .nav-doubleflip a:hover .icon-wrap { 718 | background-color: #fff; 719 | -webkit-transition-delay: 0s; 720 | transition-delay: 0s; 721 | } 722 | 723 | .nav-doubleflip a:hover svg.icon { 724 | fill: #47c9af; 725 | -webkit-transition-delay: 0s; 726 | transition-delay: 0s; 727 | } 728 | 729 | .nav-doubleflip a:hover div, 730 | .nav-doubleflip a:hover h3 { 731 | -webkit-transform: rotateY(0deg); 732 | transform: rotateY(0deg); 733 | } 734 | 735 | .nav-doubleflip a:hover div { 736 | -webkit-transition-delay: 0s; 737 | transition-delay: 0s; 738 | } 739 | 740 | .nav-doubleflip a:hover h3 { 741 | -webkit-transition-delay: 0.3s; 742 | transition-delay: 0.3s; 743 | } 744 | 745 | /*--------------------*/ 746 | /* Multi thumb */ 747 | /*--------------------*/ 748 | .color-9 { background-color: #e65b61; } 749 | 750 | .nav-multithumb a { 751 | width: 60px; 752 | height: 100px; 753 | } 754 | 755 | .nav-multithumb .icon-wrap { 756 | position: absolute; 757 | top: 50%; 758 | display: block; 759 | width: 32px; 760 | height: 32px; 761 | -webkit-transform: translateY(-50%); 762 | transform: translateY(-50%); 763 | } 764 | 765 | .nav-multithumb a.next .icon-wrap { 766 | right: 0; 767 | } 768 | 769 | .nav-multithumb .icon-wrap::after { 770 | position: absolute; 771 | top: 50%; 772 | width: 20px; 773 | height: 1px; 774 | background: #fff; 775 | content: ''; 776 | -webkit-transition: width 0.3s 0.2s; 777 | transition: width 0.3s 0.2s; 778 | -webkit-backface-visibility: hidden; /* needed because of Chrome bug with prefixed calc */ 779 | backface-visibility: hidden; 780 | } 781 | 782 | .nav-multithumb a.prev .icon-wrap::after { 783 | left: -webkit-calc(100% - 10px); 784 | left: calc(100% - 10px); 785 | } 786 | 787 | .nav-multithumb a.next .icon-wrap::after { 788 | right: -webkit-calc(100% - 10px); 789 | right: calc(100% - 10px); 790 | } 791 | 792 | .nav-multithumb svg.icon { 793 | fill: #fff; 794 | } 795 | 796 | .nav-multithumb div { 797 | position: absolute; 798 | top: -25%; 799 | display: -webkit-box; 800 | display: -webkit-flex; 801 | display: -ms-flexbox; 802 | display: flex; 803 | -ms-flex-align: end; 804 | width: 170px; 805 | pointer-events: none; 806 | -webkit-box-align: end; 807 | -webkit-align-items: flex-end; 808 | align-items: flex-end; 809 | } 810 | 811 | .nav-multithumb div::after { 812 | position: absolute; 813 | top: 100%; 814 | left: 0; 815 | margin: 20px 5px 0; 816 | width: 100%; 817 | color: #fff; 818 | text-transform: uppercase; 819 | letter-spacing: 10px; 820 | font-weight: 300; 821 | font-size: 0.7em; 822 | opacity: 0; 823 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 824 | transition: transform 0.3s, opacity 0.3s; 825 | -webkit-transform: translateY(-50%); 826 | transform: translateY(-50%); 827 | } 828 | 829 | .nav-multithumb a.prev div::after { 830 | content: 'Previous'; 831 | } 832 | 833 | .nav-multithumb a.next div::after { 834 | content: 'Next'; 835 | text-align: right; 836 | } 837 | 838 | .nav-multithumb a.prev div { 839 | left: 40px; 840 | } 841 | 842 | .nav-multithumb a.next div { 843 | right: 40px; 844 | } 845 | 846 | .nav-multithumb div img { 847 | margin: 0 5px; 848 | opacity: 0; 849 | box-shadow: 0 1px 0 #fff, 0 -1px 0 #fff; 850 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 851 | transition: transform 0.3s, opacity 0.3s; 852 | -webkit-transform: scale(0.3); 853 | transform: scale(0.3); 854 | } 855 | 856 | .nav-multithumb a.prev div img { 857 | float: left; 858 | } 859 | 860 | .nav-multithumb a.next div img { 861 | float: right; 862 | } 863 | 864 | .nav-multithumb a:hover { 865 | width: 200px; 866 | } 867 | 868 | .nav-multithumb a:hover .icon-wrap::after { 869 | width: 200px; 870 | -webkit-transition-delay: 0s; 871 | transition-delay: 0s; 872 | } 873 | 874 | .nav-multithumb a:hover div { 875 | pointer-events: auto; 876 | } 877 | 878 | .nav-multithumb a:hover div::after { 879 | opacity: 1; 880 | -webkit-transition-delay: 0.2s; 881 | transition-delay: 0.2s; 882 | -webkit-transform: translateY(0); 883 | transform: translateY(0); 884 | } 885 | 886 | .nav-multithumb a:hover img { 887 | opacity: 1; 888 | -webkit-transform: scale(1); 889 | transform: scale(1); 890 | } 891 | 892 | .nav-multithumb a:hover div img:first-child { 893 | -webkit-transition-delay: 0.3s; 894 | transition-delay: 0.3s; 895 | } 896 | 897 | .nav-multithumb a:hover div img:nth-child(2) { 898 | -webkit-transition-delay: 0.35s; 899 | transition-delay: 0.35s; 900 | } 901 | 902 | .nav-multithumb a:hover div img:nth-child(3) { 903 | -webkit-transition-delay: 0.4s; 904 | transition-delay: 0.4s; 905 | } 906 | 907 | /*--------------------*/ 908 | /* Fillpath (http://www.nizuka.fr/)*/ 909 | /*--------------------*/ 910 | .color-10 { background: #f3cf3f; } 911 | 912 | .nav-fillpath a { 913 | width: 100px; 914 | height: 100px; 915 | } 916 | 917 | .nav-fillpath .icon-wrap { 918 | position: relative; 919 | display: block; 920 | width: 100%; 921 | height: 100%; 922 | } 923 | 924 | .nav-fillpath a::before, 925 | .nav-fillpath a::after, 926 | .nav-fillpath .icon-wrap::before, 927 | .nav-fillpath .icon-wrap::after { 928 | position: absolute; 929 | left: 50%; 930 | width: 3px; 931 | height: 50%; 932 | background: #566475; 933 | content: ''; 934 | -webkit-transition: -webkit-transform 0.3s; 935 | transition: transform 0.3s; 936 | -webkit-backface-visibility: hidden; 937 | backface-visibility: hidden; 938 | outline: 1px solid transparent; /* for FF */ 939 | } 940 | 941 | .nav-fillpath .icon-wrap::before, 942 | .nav-fillpath .icon-wrap::after { 943 | z-index: 100; 944 | height: 0; 945 | background: #fff; 946 | -webkit-transition: height 0.3s, -webkit-transform 0.3s; 947 | transition: height 0.3s, transform 0.3s; 948 | } 949 | 950 | .nav-fillpath a::before, 951 | .nav-fillpath .icon-wrap::before { 952 | top: 50%; 953 | -webkit-transform: translateX(-50%) rotate(-135deg); 954 | transform: translateX(-50%) rotate(-135deg); 955 | -webkit-transform-origin: 50% 0%; 956 | transform-origin: 50% 0%; 957 | } 958 | 959 | .nav-fillpath a.next::before, 960 | .nav-fillpath a.next .icon-wrap::before { 961 | -webkit-transform: translateX(-50%) rotate(135deg); 962 | transform: translateX(-50%) rotate(135deg); 963 | -webkit-transform-origin: 50% 0%; 964 | transform-origin: 50% 0%; 965 | } 966 | 967 | .nav-fillpath a::after, 968 | .nav-fillpath .icon-wrap::after { 969 | top: 50%; 970 | -webkit-transform: translateX(-50%) rotate(-45deg); 971 | transform: translateX(-50%) rotate(-45deg); 972 | -webkit-transform-origin: 0 0; 973 | transform-origin: 0 0; 974 | } 975 | 976 | .nav-fillpath a.next::after, 977 | .nav-fillpath a.next .icon-wrap::after { 978 | -webkit-transform: translateX(-50%) rotate(45deg); 979 | transform: translateX(-50%) rotate(45deg); 980 | -webkit-transform-origin: 100% 0%; 981 | transform-origin: 100% 0%; 982 | } 983 | 984 | .nav-fillpath h3 { 985 | position: absolute; 986 | top: 50%; 987 | margin: 0; 988 | color: #fff; 989 | text-transform: uppercase; 990 | font-weight: 300; 991 | font-size: 0.85em; 992 | opacity: 0; 993 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 994 | transition: transform 0.3s, opacity 0.3s; 995 | } 996 | 997 | .nav-fillpath a.prev h3 { 998 | left: 100%; 999 | -webkit-transform: translateY(-50%) translateX(-50%); 1000 | transform: translateY(-50%) translateX(-50%); 1001 | } 1002 | 1003 | .nav-fillpath a.next h3 { 1004 | right: 100%; 1005 | text-align: right; 1006 | -webkit-transform: translateY(-50%) translateX(50%); 1007 | transform: translateY(-50%) translateX(50%); 1008 | } 1009 | 1010 | .nav-fillpath a:hover .icon-wrap::before, 1011 | .nav-fillpath a:hover .icon-wrap::after { 1012 | height: 50%; 1013 | } 1014 | 1015 | .nav-fillpath a:hover::before, 1016 | .nav-fillpath a:hover .icon-wrap::before { 1017 | -webkit-transform: translateX(-50%) rotate(-125deg); 1018 | transform: translateX(-50%) rotate(-125deg); 1019 | } 1020 | 1021 | .nav-fillpath a.next:hover::before, 1022 | .nav-fillpath a.next:hover .icon-wrap::before { 1023 | -webkit-transform: translateX(-50%) rotate(125deg); 1024 | transform: translateX(-50%) rotate(125deg); 1025 | } 1026 | 1027 | .nav-fillpath a:hover::after, 1028 | .nav-fillpath a:hover .icon-wrap::after { 1029 | -webkit-transform: translateX(-50%) rotate(-55deg); 1030 | transform: translateX(-50%) rotate(-55deg); 1031 | } 1032 | 1033 | .nav-fillpath a.next:hover::after, 1034 | .nav-fillpath a.next:hover .icon-wrap::after { 1035 | -webkit-transform: translateX(-50%) rotate(55deg); 1036 | transform: translateX(-50%) rotate(55deg); 1037 | } 1038 | 1039 | .nav-fillpath a:hover h3 { 1040 | opacity: 1; 1041 | -webkit-transform: translateY(-50%) translateX(0); 1042 | transform: translateY(-50%) translateX(0); 1043 | } 1044 | 1045 | /*--------------------*/ 1046 | /* Grow Pop */ 1047 | /*--------------------*/ 1048 | .nav-growpop .icon-wrap { 1049 | position: relative; 1050 | z-index: 100; 1051 | display: block; 1052 | padding: 20px 10px; 1053 | border: 0px solid #b24e44; 1054 | background: #b24e44; 1055 | -webkit-transition: border-width 0.3s 0.15s; 1056 | transition: border-width 0.3s 0.15s; 1057 | } 1058 | 1059 | .nav-growpop svg.icon { 1060 | fill: #fff; 1061 | } 1062 | 1063 | .nav-growpop div { 1064 | position: absolute; 1065 | top: 50%; 1066 | padding: 20px; 1067 | width: 440px; 1068 | height: 144px; 1069 | background: #fff; 1070 | opacity: 0; 1071 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 1072 | transition: transform 0.3s, opacity 0.3s; 1073 | } 1074 | 1075 | .nav-growpop a.prev div { 1076 | left: 0; 1077 | padding: 20px 140px 20px 70px; 1078 | text-align: right; 1079 | -webkit-transform: translateY(-50%) translateX(-100%) scale(0.75); 1080 | transform: translateY(-50%) translateX(-100%) scale(0.75); 1081 | } 1082 | 1083 | .nav-growpop a.next div { 1084 | right: 0; 1085 | padding: 20px 70px 20px 140px; 1086 | -webkit-transform: translateY(-50%) translateX(100%) scale(0.75); 1087 | transform: translateY(-50%) translateX(100%) scale(0.75); 1088 | } 1089 | 1090 | .nav-growpop span { 1091 | display: block; 1092 | padding-bottom: 5px; 1093 | border-bottom: 1px solid #ddd; 1094 | color: #cdcdcd; 1095 | text-transform: uppercase; 1096 | letter-spacing: 1px; 1097 | font-weight: 400; 1098 | font-size: 0.7em; 1099 | line-height: 1.2; 1100 | } 1101 | 1102 | .nav-growpop h3 { 1103 | margin: 0; 1104 | padding: 8px 0 10px; 1105 | color: #818181; 1106 | font-weight: 300; 1107 | font-size: 1.325em; 1108 | line-height: 1.2; 1109 | } 1110 | 1111 | .nav-growpop div p { 1112 | margin: 0; 1113 | color: #b24e44; 1114 | font-style: italic; 1115 | font-size: 75%; 1116 | font-family: "Lucida Bright", Georgia, serif; 1117 | } 1118 | 1119 | .nav-growpop img { 1120 | position: absolute; 1121 | top: 20px; 1122 | } 1123 | 1124 | .nav-growpop a.prev img { 1125 | right: 20px; 1126 | } 1127 | 1128 | .nav-growpop a.next img { 1129 | left: 20px; 1130 | } 1131 | 1132 | .nav-growpop a:hover .icon-wrap { 1133 | border-top-width: 40px; 1134 | border-bottom-width: 40px; 1135 | -webkit-transition-delay: 0s; 1136 | transition-delay: 0s; 1137 | } 1138 | 1139 | .nav-growpop a:hover div { 1140 | opacity: 1; 1141 | -webkit-transition-delay: 0.3s; 1142 | transition-delay: 0.3s; 1143 | -webkit-transform: translateY(-50%) translateX(0) scale(1); 1144 | transform: translateY(-50%) translateX(0) scale(1); 1145 | } 1146 | 1147 | /*--------------------*/ 1148 | /* Diamond */ 1149 | /*--------------------*/ 1150 | .nav-diamond a { 1151 | margin: 0 30px; 1152 | } 1153 | 1154 | .nav-diamond .icon-wrap { 1155 | position: absolute; 1156 | width: 100%; 1157 | height: 100%; 1158 | z-index: 100; 1159 | } 1160 | 1161 | .nav-diamond svg.icon { 1162 | fill: #fff; 1163 | position: relative; 1164 | stroke-width: 2; 1165 | stroke: #fff; 1166 | top: 50%; 1167 | -webkit-transform: translateY(-50%); 1168 | transform: translateY(-50%); 1169 | } 1170 | 1171 | .nav-diamond div { 1172 | position: relative; 1173 | overflow: hidden; 1174 | width: 70px; 1175 | height: 70px; 1176 | background: #34495e; 1177 | -webkit-backface-visibility: hidden; 1178 | backface-visibility: hidden; 1179 | -webkit-transform: scale(0.6); 1180 | transform: scale(0.6); 1181 | -webkit-transition: -webkit-transform 0.3s; 1182 | transition: transform 0.3s; 1183 | -webkit-backface-visibility: hidden; 1184 | backface-visibility: hidden; 1185 | } 1186 | 1187 | .nav-diamond img { 1188 | position: absolute; 1189 | top: 50%; 1190 | left: 50%; 1191 | opacity: 0; 1192 | -webkit-backface-visibility: hidden; 1193 | backface-visibility: hidden; 1194 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 1195 | transition: opacity 0.3s, transform 0.3s; 1196 | } 1197 | 1198 | .nav-diamond a.prev img { 1199 | -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(2); 1200 | transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(2); 1201 | } 1202 | 1203 | .nav-diamond a.next img { 1204 | -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(2); 1205 | transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(2); 1206 | } 1207 | 1208 | .nav-diamond a:hover div { 1209 | -webkit-transform: scale(1) rotate(-45deg); 1210 | transform: scale(1) rotate(-45deg); 1211 | } 1212 | 1213 | .nav-diamond a.next:hover div { 1214 | -webkit-transform: scale(1) rotate(45deg); 1215 | transform: scale(1) rotate(45deg); 1216 | } 1217 | 1218 | .nav-diamond a:hover img { 1219 | opacity: 0.8; 1220 | } 1221 | 1222 | .nav-diamond a.prev:hover img { 1223 | -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1); 1224 | transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1); 1225 | } 1226 | 1227 | .nav-diamond a.next:hover img { 1228 | -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(1); 1229 | transform: translateX(-50%) translateY(-50%) rotate(-45deg) scale(1); 1230 | } 1231 | 1232 | /*--------------------*/ 1233 | /* Fill Slide */ 1234 | /*--------------------*/ 1235 | .color-10 { background-color: #dcc6e0; } 1236 | 1237 | .nav-fillslide .icon-wrap { 1238 | position: relative; 1239 | z-index: 100; 1240 | display: block; 1241 | padding: 65px 10px; 1242 | background: #b68dbe; 1243 | overflow: hidden; 1244 | -webkit-backface-visibility: hidden; 1245 | backface-visibility: hidden; 1246 | } 1247 | 1248 | .nav-fillslide .icon-wrap::before { 1249 | content: ''; 1250 | position: absolute; 1251 | width: 100%; 1252 | height: 110%; 1253 | background: #fff; 1254 | top: 0; 1255 | left: 0; 1256 | -webkit-backface-visibility: hidden; 1257 | backface-visibility: hidden; 1258 | -webkit-transition: -webkit-transform 0.3s 0.3s; 1259 | transition: transform 0.3s 0.3s; 1260 | } 1261 | 1262 | .nav-fillslide a.prev .icon-wrap::before { 1263 | -webkit-transform: translateX(-100%); 1264 | transform: translateX(-100%); 1265 | } 1266 | 1267 | .nav-fillslide a.next .icon-wrap::before { 1268 | -webkit-transform: translateX(100%); 1269 | transform: translateX(100%); 1270 | } 1271 | 1272 | .nav-fillslide svg.icon { 1273 | fill: #736176; 1274 | position: relative; 1275 | z-index: 100; 1276 | } 1277 | 1278 | .nav-fillslide div { 1279 | position: absolute; 1280 | padding: 20px; 1281 | top: 0; 1282 | width: 440px; 1283 | height: 154px; 1284 | background: #fff; 1285 | -webkit-transition: -webkit-transform 0.3s; 1286 | transition: transform 0.3s; 1287 | } 1288 | 1289 | .nav-fillslide a.prev div { 1290 | left: 0; 1291 | padding: 20px 150px 20px 70px; 1292 | text-align: right; 1293 | border-radius: 0 6px 6px 0; 1294 | -webkit-transform: translateX(-100%); 1295 | transform: translateX(-100%); 1296 | } 1297 | 1298 | .nav-fillslide a.next div { 1299 | right: 0; 1300 | padding: 20px 70px 20px 150px; 1301 | border-radius: 6px 0 0 6px; 1302 | -webkit-transform: translateX(100%); 1303 | transform: translateX(100%); 1304 | } 1305 | 1306 | .nav-fillslide div span { 1307 | display: inline-block; 1308 | padding: 5px; 1309 | color: #d0c2d3; 1310 | border-top: 1px solid #d8cfda; 1311 | text-transform: uppercase; 1312 | letter-spacing: 1px; 1313 | font-weight: 400; 1314 | font-size: 0.7em; 1315 | line-height: 1.2; 1316 | } 1317 | 1318 | .nav-fillslide h3 { 1319 | margin: 0; 1320 | padding: 8px 0 10px; 1321 | color: #736176; 1322 | font-weight: 400; 1323 | font-size: 1.35em; 1324 | line-height: 1.2; 1325 | font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; 1326 | } 1327 | 1328 | .nav-fillslide img { 1329 | position: absolute; 1330 | top: 20px; 1331 | border: 5px solid #736176; 1332 | } 1333 | 1334 | .nav-fillslide a.prev img { 1335 | right: 20px; 1336 | } 1337 | 1338 | .nav-fillslide a.next img { 1339 | left: 20px; 1340 | } 1341 | 1342 | .nav-fillslide a:hover .icon-wrap::before { 1343 | -webkit-transform: translateX(0); 1344 | transform: translateX(0); 1345 | -webkit-transition-delay: 0s; 1346 | transition-delay: 0s; 1347 | } 1348 | 1349 | .nav-fillslide a:hover div { 1350 | -webkit-transition-delay: 0.3s; 1351 | transition-delay: 0.3s; 1352 | -webkit-transform: translateX(0); 1353 | transform: translateX(0); 1354 | } 1355 | 1356 | /*--------------------*/ 1357 | /* Circle slide */ 1358 | /*--------------------*/ 1359 | 1360 | .nav-circleslide a { 1361 | margin: 0 20px; 1362 | } 1363 | 1364 | .nav-circleslide .icon-wrap { 1365 | position: relative; 1366 | z-index: 100; 1367 | display: block; 1368 | padding: 19px; 1369 | } 1370 | 1371 | .nav-circleslide svg.icon { 1372 | fill: #fff; 1373 | -webkit-transition: fill 0.3s; 1374 | transition: fill 0.3s; 1375 | } 1376 | 1377 | .nav-circleslide div { 1378 | position: absolute; 1379 | width: 100%; 1380 | height: 100%; 1381 | top: 0; 1382 | left: 0; 1383 | overflow: hidden; 1384 | background-color: #566473; 1385 | border-radius: 50%; 1386 | -webkit-transform: scale(0.7); 1387 | transform: scale(0.7); 1388 | opacity: 0; 1389 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.1s 0s; 1390 | transition: transform 0.3s, opacity 0.3s, background-color 0.1s 0s; 1391 | } 1392 | 1393 | .nav-circleslide img { 1394 | display: block; 1395 | border-radius: 50%; 1396 | -webkit-transition: -webkit-transform 0.3s; 1397 | transition: transform 0.3s; 1398 | } 1399 | 1400 | .nav-circleslide a.prev img { 1401 | -webkit-transform: translateX(-100%); 1402 | transform: translateX(-100%); 1403 | } 1404 | 1405 | .nav-circleslide a.next img { 1406 | -webkit-transform: translateX(100%); 1407 | transform: translateX(100%); 1408 | } 1409 | 1410 | .nav-circleslide a:hover div { 1411 | opacity: 1; 1412 | background-color: transparent; /* Trick to hide the visible border of image */ 1413 | -webkit-transform: scale(1); 1414 | transform: scale(1); 1415 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.1s 0.2s; 1416 | transition: transform 0.3s, opacity 0.3s, background-color 0.1s 0.2s; 1417 | } 1418 | 1419 | .nav-circleslide a:hover img { 1420 | -webkit-transform: translateX(0); 1421 | transform: translateX(0); 1422 | } 1423 | 1424 | @media screen and (max-width: 520px) { 1425 | .nav-slide a.prev, 1426 | .nav-reveal a.prev, 1427 | .nav-doubleflip a.prev, 1428 | .nav-fillslide a.prev, 1429 | .nav-growpop a.prev { 1430 | -webkit-transform-origin: 0% 50%; 1431 | transform-origin: 0% 50%; 1432 | } 1433 | 1434 | .nav-slide a.next, 1435 | .nav-reveal a.next, 1436 | .nav-doubleflip a.next, 1437 | .nav-fillslide a.next, 1438 | .nav-growpop a.next { 1439 | -webkit-transform-origin: 100% 50%; 1440 | transform-origin: 100% 50%; 1441 | } 1442 | 1443 | .nav-slide a, 1444 | .nav-reveal a, 1445 | .nav-doubleflip a, 1446 | .nav-fillslide a { 1447 | -webkit-transform: scale(0.6); 1448 | transform: scale(0.6); 1449 | } 1450 | 1451 | .nav-growpop a { 1452 | -webkit-transform: translateY(-50%) scale(0.6); 1453 | transform: translateY(-50%) scale(0.6); 1454 | } 1455 | } -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 2 | @font-face { 3 | font-weight: normal; 4 | font-style: normal; 5 | font-family: 'codropsicons'; 6 | src:url('../fonts/codropsicons/codropsicons.eot'); 7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 11 | } 12 | 13 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 14 | .clearfix:before, .clearfix:after { content: ''; display: table; } 15 | .clearfix:after { clear: both; } 16 | 17 | html, body, section, .container, .codrops-header { 18 | height: 100%; 19 | } 20 | 21 | body { 22 | background: #fff; 23 | color: #566473; 24 | font-size: 100%; 25 | line-height: 1.25; 26 | font-family: 'Lato', sans-serif; 27 | font-weight: 300; 28 | } 29 | 30 | a { 31 | color: #34495e; 32 | text-decoration: none; 33 | outline: none; 34 | } 35 | 36 | a:hover, a:focus { 37 | color: #566473; 38 | } 39 | 40 | .codrops-header { 41 | margin: 0 auto; 42 | padding: 2em; 43 | text-align: center; 44 | position: relative; 45 | margin: 0 40px 40px; 46 | background: #f7f7f7; 47 | height: calc(100% - 80px); 48 | } 49 | 50 | .codrops-header h1 { 51 | margin: 0; 52 | font-size: 3em; 53 | font-weight: 300; 54 | position: relative; 55 | top: 50%; 56 | -webkit-transform: translateY(-50%); 57 | transform: translateY(-50%); 58 | } 59 | 60 | .codrops-header h1 span { 61 | display: block; 62 | padding: 0.2em 0 0.6em 0.1em; 63 | font-size: 0.6em; 64 | font-weight: 300; 65 | color: #92a1a4; 66 | } 67 | 68 | .codrops-header h1 span.info { 69 | text-transform: uppercase; 70 | font-size: 0.35em; 71 | font-weight: 400; 72 | letter-spacing: 1px; 73 | color: #566473; 74 | padding-top: 20px; 75 | } 76 | 77 | .codrops-header h1 span.info::after, 78 | .codrops-header h1 span.info::before { 79 | content: '\2193'; 80 | padding: 0 20px; 81 | } 82 | 83 | /* Top Navigation Style */ 84 | .codrops-top { 85 | text-transform: uppercase; 86 | font-weight: 700; 87 | font-style: normal; 88 | font-size: 0.69em; 89 | line-height: 3.5; 90 | padding: 0 30px; 91 | } 92 | 93 | .codrops-top a { 94 | display: inline-block; 95 | padding: 0 10px; 96 | text-decoration: none; 97 | letter-spacing: 1px; 98 | } 99 | 100 | .codrops-top span.right { 101 | float: right; 102 | } 103 | 104 | .codrops-top span.right a { 105 | display: block; 106 | float: left; 107 | } 108 | 109 | .codrops-icon:before { 110 | margin: 0 4px; 111 | text-transform: none; 112 | font-weight: normal; 113 | font-style: normal; 114 | font-variant: normal; 115 | font-family: 'codropsicons'; 116 | line-height: 1; 117 | speak: none; 118 | -webkit-font-smoothing: antialiased; 119 | } 120 | 121 | .codrops-icon-drop:before { 122 | content: "\e001"; 123 | } 124 | 125 | .codrops-icon-prev:before { 126 | content: "\e004"; 127 | } 128 | 129 | section { 130 | padding: 1em; 131 | text-align: center; 132 | position: relative; 133 | margin: 40px; 134 | height: calc(100% - 80px); 135 | overflow: hidden; 136 | } 137 | 138 | section h2 { 139 | font-weight: 300; 140 | color: rgba(255,255,255,0.3); 141 | font-size: 3.5em; 142 | } 143 | 144 | section:not(.related)::before, 145 | section:not(.related)::after { 146 | content: ''; 147 | position: absolute; 148 | width: 50%; 149 | height: 1px; 150 | background: rgba(255,255,255,0.4); 151 | left: 25%; 152 | top: 50%; 153 | } 154 | 155 | section:not(.related)::before { 156 | -webkit-transform: rotate(-45deg); 157 | transform: rotate(-45deg); 158 | } 159 | 160 | section:not(.related)::after { 161 | -webkit-transform: rotate(45deg); 162 | transform: rotate(45deg); 163 | } 164 | 165 | /* Related demos */ 166 | .related { 167 | padding: 5em 0; 168 | clear: both; 169 | background: #fff; 170 | height: auto; 171 | } 172 | 173 | .related p { 174 | font-size: 1.5em; 175 | } 176 | 177 | .related > a { 178 | border: 1px solid #34495e; 179 | display: inline-block; 180 | text-align: center; 181 | margin: 20px 10px; 182 | padding: 25px; 183 | } 184 | 185 | .related a:hover { 186 | border-color: #566473; 187 | color: #566473; 188 | } 189 | 190 | .related a img { 191 | max-width: 100%; 192 | opacity: 0.8; 193 | } 194 | 195 | .related a:hover img, 196 | .related a:active img { 197 | opacity: 1; 198 | } 199 | 200 | .related a h3 { 201 | margin: 0; 202 | padding: 0.5em 0 0.3em; 203 | max-width: 300px; 204 | text-align: left; 205 | } 206 | 207 | /* SVG wrap */ 208 | .svg-wrap { 209 | position: absolute; 210 | width: 0px; 211 | height: 0px; 212 | overflow: hidden; 213 | } 214 | 215 | @media screen and (max-width: 25em) { 216 | .codrops-header { font-size: 75%; } 217 | .codrops-icon span { 218 | display: none; 219 | } 220 | 221 | } -------------------------------------------------------------------------------- /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;} -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/1.png -------------------------------------------------------------------------------- /img/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/10.png -------------------------------------------------------------------------------- /img/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/11.png -------------------------------------------------------------------------------- /img/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/12.png -------------------------------------------------------------------------------- /img/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/13.png -------------------------------------------------------------------------------- /img/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/14.png -------------------------------------------------------------------------------- /img/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/15.png -------------------------------------------------------------------------------- /img/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/16.png -------------------------------------------------------------------------------- /img/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/17.png -------------------------------------------------------------------------------- /img/18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/18.png -------------------------------------------------------------------------------- /img/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/19.png -------------------------------------------------------------------------------- /img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/2.png -------------------------------------------------------------------------------- /img/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/20.png -------------------------------------------------------------------------------- /img/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/21.png -------------------------------------------------------------------------------- /img/22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/22.png -------------------------------------------------------------------------------- /img/23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/23.png -------------------------------------------------------------------------------- /img/24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/24.png -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/4.jpg -------------------------------------------------------------------------------- /img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/5.png -------------------------------------------------------------------------------- /img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/6.png -------------------------------------------------------------------------------- /img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/7.png -------------------------------------------------------------------------------- /img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/8.png -------------------------------------------------------------------------------- /img/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ArrowNavigationStyles/2e7c8868f44814bb80ce74e1b669984c417345bd/img/9.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arrow Navigation Styles 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 |
53 | 54 |
55 | Previous Demo 56 | Back to the Codrops Article 57 |
58 |
59 |

Arrow Navigation Styles Ideas for arrow navigation effects and stylesScroll down

60 |
61 |
62 |

Slide

63 | 79 |
80 |
81 |

Image Bar

82 | 92 |
93 |
94 |

Circle Pop

95 | 103 |
104 |
105 |

Round Slide

106 | 116 |
117 |
118 |

Split

119 | 135 |
136 |
137 |

Reveal

138 | 154 |
155 |
156 |

Thumb Flip

157 | 167 |
168 |
169 |

Double Flip

170 | 186 |
187 |
188 |

Multi Thumb

189 | 207 |
208 |
209 |

Circle Slide

210 | 220 |
221 |
222 |

Grow Pop

223 | 243 |
244 |
245 |

Diamond

246 | 256 |
257 |
258 |

Fill Slide

259 | 277 |
278 |
279 |

Fill Path

280 | 290 |
291 |
292 |

If you enjoyed this demo you might also like:

293 | 294 | 295 |

Dot Navigation Styles

296 | 297 | 298 | 299 |

Creative Link Effects

300 | 301 |
302 |
303 | 309 | 310 | --------------------------------------------------------------------------------