This post contains a total of 10+ Hand-Picked JavaScript Slideshow Examples with Source Code. All these Slideshows are made using JavaScript & Styled using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
JavaScript Slideshow Examples
1. By Mikael Ainalem
Made by Mikael Ainalem. Geometrical Birds Slideshow. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inconsolata'>
<style>
body {
font-family: Inconsolata, sans-serif;
font-size: 18px;
margin: 0;
}
.header {
margin: 30px;
}
.header__title {
display: inline-block;
font-weight: bold;
margin-right: 20px;
}
.header__tagline {
display: inline-block;
}
.keys {
bottom: 20px;
position: absolute;
right: 20px;
}
@media all and (max-width: 768px) {
.keys {
display: none;
}
}
.container {
align-items: center;
display: flex;
margin: 0 auto;
max-width: 960px;
width: 100%;
}
@media all and (max-width: 768px) {
.container {
flex-direction: column;
}
}
.birds {
flex-shrink: 1;
height: auto;
max-width: 600px;
width: 100%;
}
.birds circle {
fill: #e0e0e0;
pointer-events: none;
}
.birds path {
pointer-events: none;
}
.bird-text {
box-sizing: border-box;
flex-shrink: 0;
line-height: 1.44;
padding: 0 20px;
width: 320px;
}
@media all and (max-width: 768px) {
.bird-text {
max-width: 600px;
width: 100%;
padding: 20px;
}
}
.bird-text__title {
font-size: 50px;
font-weight: bold;
margin-bottom: 20px;
}
@media all and (max-width: 768px) {
.bird-text__title {
font-size: 32px;
}
}
.box {
fill: #fff;
cursor: pointer;
}
.box:hover {
fill: #f2f2f2;
}
</style>
</head>
<body>
<div class="header">
<div class="header__title">Geometrical Birds</div>
<div class="header__tagline">Slideshow</div>
</div>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="500" viewBox="0 0 600 500" preserveAspectRatio="xMinYMin" class="birds">
<rect onclick="goTo(0)" class="box" x="45" y="15" width="30" height="30"></rect>
<circle cx="60" cy="30" r="5"></circle>
<rect onclick="goTo(1)" class="box" x="75" y="15" width="30" height="30"></rect>
<circle cx="90" cy="30" r="5"></circle>
<rect onclick="goTo(2)" class="box" x="105" y="15" width="30" height="30"></rect>
<circle cx="120" cy="30" r="5"></circle>
<rect onclick="goTo(3)" class="box" x="135" y="15" width="30" height="30"></rect>
<circle cx="150" cy="30" r="5"></circle>
<rect onclick="goTo(4)" class="box" x="165" y="15" width="30" height="30"></rect>
<circle cx="180" cy="30" r="5"></circle>
</svg>
<div class="bird-text">
<div class="bird-text__title"></div>
<div class="bird-text__body"></div>
</div>
</div>
<svg class="keys" width="182" height="35" viewBox="0 0 104 20">
<path d="M3.5.5h13c1.662 0 3 1.338 3 3v13c0 1.662-1.338 3-3 3h-13c-1.662 0-3-1.338-3-3v-13c0-1.662 1.338-3 3-3z" fill="none" stroke="#364e59"/>
<path fill="#364e59" stroke="#364e59" stroke-width=".2" d="M9.82 7.61v.695h.695V7.61H9.82zm.645-2.392V3.843H9.87v1.375l.157 1.943h.28l.158-1.942zM10.656 16.118v-4.432h-.407q-.044.25-.163.413-.12.16-.294.255-.17.094-.38.13-.214.033-.44.033v.425h1.15v3.175h.533z"/>
<path d="M39.5.5h13c1.662 0 3 1.338 3 3v13c0 1.662-1.338 3-3 3h-13c-1.662 0-3-1.338-3-3v-13c0-1.662 1.338-3 3-3z" fill="none" stroke="#364e59" stroke-linecap="round" stroke-linejoin="round"/>
<path fill="#364e59" stroke="#364e59" stroke-width=".2" d="M44.09 5.13q0-.144.018-.3.018-.162.075-.294.062-.137.168-.225.108-.092.283-.092.18 0 .28.093.107.09.163.226.057.132.07.294.018.156.018.294 0 .144-.02.306-.018.163-.08.3-.056.13-.163.22-.105.086-.286.086-.175 0-.28-.087-.1-.095-.158-.226-.056-.138-.075-.294-.01-.162-.01-.3zm-.47.013q0 .256.05.48.056.226.175.395.12.168.313.268.193.094.475.094.275 0 .462-.106.188-.106.306-.275.126-.176.176-.4.057-.232.057-.476 0-.256-.05-.48-.044-.233-.163-.4-.112-.17-.306-.27-.188-.1-.48-.1-.29 0-.483.106-.192.1-.31.275-.12.175-.17.406-.05.226-.05.483zm3.556 1.987q0-.144.02-.3.018-.162.074-.294.063-.137.17-.225.105-.092.28-.092.18 0 .28.093.108.09.164.226.056.132.07.294.017.156.017.294 0 .144-.017.306-.02.163-.082.3-.055.13-.16.22-.107.086-.29.086-.174 0-.28-.087-.1-.095-.156-.226-.056-.138-.075-.294-.014-.162-.014-.3zm-.468.013q0 .256.05.48.056.226.175.395.118.162.312.262.194.094.475.094.275 0 .463-.1.187-.106.306-.275.124-.176.174-.4.056-.232.056-.476 0-.256-.05-.48-.044-.233-.162-.4-.113-.17-.307-.27-.186-.1-.48-.1-.287 0-.48.106-.195.1-.314.275-.118.175-.168.406-.05.226-.05.483zm.875-3.35L44.22 8.436h.538l3.356-4.643h-.53zM47.368 12.23v-.47H45.18l-.412 2.3.456.026q.157-.187.357-.3.207-.118.47-.118.224 0 .406.075.187.075.318.212.132.13.2.32.075.18.075.4 0 .26-.076.46-.075.195-.206.326-.125.133-.3.2-.17.064-.356.064-.2 0-.37-.056-.16-.063-.286-.17-.12-.112-.194-.255-.07-.15-.08-.32h-.533q.006.3.118.538.113.24.306.4.194.158.444.245.256.08.544.08.387 0 .675-.117.294-.125.487-.332.194-.206.288-.468.1-.27.1-.55 0-.382-.113-.663-.113-.287-.307-.475-.194-.194-.456-.287-.263-.094-.556-.094-.224 0-.456.08-.225.075-.368.238l-.013-.013.238-1.275h1.788z"/>
<path fill="#364e59" d="M24 12.666V14h1.334v-1.334H24zM27.333 12.666V14h1.334v-1.334h-1.334zM30.666 12.666V14H32v-1.334h-1.334z"/>
<path d="M63.5.5h13c1.662 0 3 1.338 3 3v13c0 1.662-1.338 3-3 3h-13c-1.662 0-3-1.338-3-3v-13c0-1.662 1.338-3 3-3z" fill="none" stroke="#364e59" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M72.5 10v4l-5-2z" fill="#364e59" fill-rule="evenodd"/>
<path d="M100.5.5h-13c-1.662 0-3 1.338-3 3v13c0 1.662 1.338 3 3 3h13c1.662 0 3-1.338 3-3v-13c0-1.662-1.338-3-3-3z" fill="none" stroke="#364e59" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M91.5 10v4l5-2z" fill="#364e59" fill-rule="evenodd"/>
</svg>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>
<script>
var birds = [
[
{ id: 'path14437', d: 'm 495.67653,93.719633 7.65012,-19.67631 31.441,11.23795 z', fill: '#413b3d' },
{ id: 'path14439', d: 'm 495.62423,93.867573 7.70242,-19.82425 -9.59645,-19.31917 z', fill: '#060606' },
{ id: 'path4158', d: 'm 496.00304,93.993843 -2.26694,-39.3102 -22.76178,20.4497 z', fill: '#3e3c3d' },
{ id: 'path4160', d: 'm 452.43161,51.136693 41.43076,3.79949 -22.13044,20.70223 z', fill: '#050507' },
{ id: 'path4166', d: 'm 451.92654,51.389233 42.44091,3.54695 -29.95913,-18.18864 z', fill: '#4d4b4c' },
{ id: 'path4168', d: 'm 452.68415,50.884153 -33.69934,-13.12056 46.18112,-1.26859 z', fill: '#3c3a3b' },
{ id: 'path4174', d: 'm 452.43161,51.136693 -33.57306,14.15356 52.87338,10.34816 z', fill: '#c0c0b4' },
{ id: 'path4176', d: 'm 484.35602,121.61278 -66.02049,-56.827607 53.3964,10.34817 z', fill: '#a3a494' },
{ id: 'path4178', d: 'm 483.99888,119.82707 12.13633,-25.494927 -25.16089,-19.1988 z', fill: '#b2b0b7' },
{ id: 'path4213', d: 'm 464.88829,67.565263 6.26487,3.42068 -6.62908,4.43955 z', fill: '#151515' },
{ id: 'path4215', d: 'm 471.95935,76.025293 -0.80619,-5.03935 -7.00789,4.18701 z', fill: '#151515' },
{ id: 'path4217', d: 'm 471.95935,76.025293 -1.43754,4.93591 -7.13415,-6.4196 z', fill: '#151515' },
{ id: 'path4219', d: 'm 465.6459,82.970083 4.74964,-2.26142 -6.25027,-5.53571 z', fill: '#151515' },
{ id: 'path4221', d: 'm 465.6459,82.970083 -5.35188,-1.75635 4.4826,-6.67213 z', fill: '#151515' },
{ id: 'path4223', d: 'm 456.80707,76.530363 3.73949,4.80964 4.23006,-6.7984 z', fill: '#151515' },
{ id: 'path4225', d: 'm 456.80707,76.530363 2.22426,-6.0495 6.75544,4.94463 z', fill: '#151515' },
{ id: 'path4227', d: 'm 464.88829,67.565253 -5.85696,2.91561 5.74529,5.0709 z', fill: '#151515' },
{ id: 'path4229', d: 'm 452.68415,50.884153 -32.60252,-12.84636 -1.65809,28.18301 z', fill: '#060608' },
{ id: 'path4231', d: 'm 374.82701,64.812723 45.7993,-27.80675 -0.26912,29.68029 z', fill: '#3e3c3d' },
{ id: 'path4233', d: 'm 374.82701,64.812723 75.7993,64.336107 -31.53181,-63.725257 z', fill: '#060606' },
{ id: 'path4235', d: 'm 484.82701,120.88416 -34.2007,8.26467 -32.7945,-64.735407 z', fill: '#3e3c3d' },
{ id: 'path4237', d: 'm 484.82701,120.88416 -35.46339,7.50706 43.30231,38.10379 z', fill: '#060606' },
{ id: 'path4387', d: 'm 374.82701,64.812723 75.7993,64.336107 -93.65619,-17.25823 z', fill: '#ebc26b' },
{ id: 'path4389', d: 'm 388.46407,148.65539 62.16224,-19.50656 -93.65619,-17.25823 z', fill: '#f2d392' },
{ id: 'path4391', d: 'm 391.24199,149.413 -74.4609,-1.07127 40.18903,-36.45113 z', fill: '#cbcbcb' },
{ id: 'path4399', d: 'm 442.85003,197.52194 40.81199,24.66261 9.00391,-55.68954 z', fill: '#dda95d' },
{ id: 'path4401', d: 'm 444.11272,198.02702 4.37073,-71.02104 44.18248,39.48903 z', fill: '#eec16e' },
{ id: 'path4403', d: 'm 444.11272,198.02702 4.37073,-71.02104 -51.40925,60.9176 z', fill: '#e6b767' },
{ id: 'path4405', d: 'm 389.827,148.74131 58.65645,-21.73533 -51.40925,60.9176 z', fill: '#ecc171' },
{ id: 'path4407', d: 'm 389.827,148.74131 58.65645,-21.73533 -92.96036,-15.51097 z', fill: '#f2d392' },
{ id: 'path4409', d: 'm 389.827,148.74131 -72.05784,-1.73533 81.2387,42.85125 z', fill: '#bfbfbf' },
{ id: 'path4514', d: 'm 295.88281,209.35046 21.88635,-62.34448 -70.78926,73.6609 z', fill: '#b2b1b7' },
{ id: 'path4516', d: 'm 295.88281,209.35046 21.88635,-62.34448 34.26661,56.48831 z', fill: '#bfbfbf' },
{ id: 'path4518', d: 'm 397.90822,188.13726 -80.13906,-41.13128 34.26661,56.48831 z', fill: '#b2b1b7' },
{ id: 'path4520', d: 'm 397.90822,188.13726 -28.74384,48.18057 -17.12861,-32.82354 z', fill: '#6c677a' },
{ id: 'path4522', d: 'm 398.4133,187.12711 -30.67749,49.905 76.22385,-39.59873 z', fill: '#ddaa5e' },
{ id: 'path4524', d: 'm 413.06051,230.56367 -41.75327,4.32559 72.90495,-37.70842 z', fill: '#d19858' },
{ id: 'path4526', d: 'm 413.06051,230.56367 70.87874,-8.30132 -40.48467,-25.33405 z', fill: '#dea44a' },
{ id: 'path4528', d: 'm 411.81051,230.3851 72.12874,-8.12275 -51.59635,22.14312 z', fill: '#e1b156' },
{ id: 'path4548', d: 'm 443.36509,267.93931 40.57416,-45.67696 -51.59635,22.14312 z', fill: '#efc472' },
{ id: 'path4550', d: 'm 443.36509,267.93931 -66.32869,-1.94453 55.3065,-21.58931 z', fill: '#deaa5e' },
{ id: 'path4490', d: 'm 195.48234,305.86569 -24.85604,5.426 54.92503,-53.48195 z', fill: '#a4a1a4' },
{ id: 'path4701', d: 'm 223.33949,260.50855 -52.71319,50.78314 76.3536,-90.62481 z', fill: '#cccbcc' },
{ id: 'path4488', d: 'm 194.45424,306.13617 69.74348,-39.84448 -41.14639,-5.62481 z', fill: '#c3c3c6' },
{ id: 'path4703', d: 'm 221.95424,261.49332 42.24348,4.79837 -17.21782,-45.62481 z', fill: '#b2b1b7' },
{ id: 'path4705', d: 'm 295.88281,208.81474 -33.20032,57.72949 -15.70259,-45.87735 z', fill: '#cbcbcb' },
{ id: 'path4707', d: 'm 295.88281,208.63617 -33.76668,58.97948 49.86377,-34.80592 z', fill: '#adaea3' },
{ id: 'path4718', d: 'm 295.52567,208.63617 58.3149,-5.20163 -43.28924,30.80376 z', fill: '#a3a590' },
{ id: 'path4720', d: 'm 369.45424,234.35045 -16.6851,-30.20162 -44.00353,30.44661 z', fill: '#8a8893' },
{ id: 'path4722', d: 'm 369.45424,234.35045 -107.57796,33.01267 48.67505,-34.37482 z', fill: '#95939d' },
{ id: 'path4724', d: 'm 369.45424,234.35045 -107.9351,32.8341 47.42504,0.62519 z', fill: '#a1a0a4' },
{ id: 'path4726', d: 'm 369.45424,234.35045 -25.97082,33.72695 -35.96781,-0.62479 z', fill: '#ddba65' },
{ id: 'path4728', d: 'm 369.45424,234.35045 -25.61367,33.19124 35.46075,0.62521 z', fill: '#dbaa60' },
{ id: 'path4730', d: 'm 369.27567,234.17188 44.29441,-3.59448 -35.8759,35.0895 z', fill: '#deba66' },
{ id: 'path4732', d: 'm 433.02567,244.35045 -20.97082,-13.77305 -34.36067,35.0895 z', fill: '#eec16e' },
{ id: 'path4791', d: 'm 38.508233,405.87079 132.118067,-94.5791 -132.242894,85.64681 z', fill: '#a8a1b4' },
{ id: 'path4793', d: 'm 38.508233,405.87079 132.118067,-94.5791 25.59344,-6.27707 z', fill: '#b1b0b5' },
{ id: 'path4795', d: 'm 38.508233,405.87079 107.874407,-57.20345 50.84725,-44.66287 z', fill: '#8e8d93' },
{ id: 'path4806', d: 'm 225.38644,305.36061 -79.0038,43.30673 49.58456,-43.65272 z', fill: '#746f81' },
{ id: 'path4808', d: 'm 225.38644,305.36061 37.16374,-38.51563 -68.09821,38.16964 z', fill: '#bbbcae' },
{ id: 'path4810', d: 'm 225.38644,305.36061 37.16374,-38.51563 -6.22637,32.10873 z', fill: '#8a898f' },
{ id: 'path5485', d: 'm 277.47927,304.1001 -15.28623,-37.79083 -6.62684,32.64444 z', fill: '#999687' },
{ id: 'path4812', d: 'm 305.69356,311.42153 -43.50052,-45.11226 14.9803,37.64444 z', fill: '#a7a598' },
{ id: 'path4492', d: 'm 305.69356,311.42153 -2.2322,-24.37349 -42.03294,-21.22015 z', fill: '#cab653' },
{ id: 'path4814', d: 'm 305.69356,311.42153 -4.75758,-26.3938 51.57949,30.05779 z', fill: '#b0a25f' },
{ id: 'path4816', d: 'm 310.87957,264.9672 -48.32939,1.87778 40.55447,22.03784 z', fill: '#d19858' },
{ id: 'path4836', d: 'm 309.97402,265.2937 40.9645,50.0386 -49.63228,-27.59487 z', fill: '#ddba63' },
{ id: 'path4838', d: 'm 310.15259,266.05132 40.78593,49.28098 -6.44826,-48.37697 z', fill: '#e1a95e' },
{ id: 'path4840', d: 'm 379.73056,266.02067 -28.79204,49.31163 -6.98397,-48.1984 z', fill: '#e5b767' },
{ id: 'path4851', d: 'm 379.73056,265.66353 -28.79204,49.66877 27.86629,-8.29737 z', fill: '#aba067' },
{ id: 'path4853', d: 'm 378.65914,266.02067 27.83777,31.12889 -27.6921,9.88537 z', fill: '#cbb96e' },
{ id: 'path4855', d: 'm 377.23056,265.30639 29.26635,31.84317 37.67195,-29.7198 z', fill: '#edc269' },
{ id: 'path4895', d: 'm 365.83262,315.17767 -14.8941,0.15463 56.15056,-18.3989 z', fill: '#8a8894' },
{ id: 'path4897', d: 'm 365.83262,314.82053 -15.90425,-1.00346 49.91325,60.04998 z', fill: '#8a8894' },
{ id: 'path4921', d: 'm 365.83262,315.17767 39.21304,48.01177 -5.20404,10.67761 z', fill: '#b2b1b9' },
{ id: 'path4923', d: 'm 452.26119,375.17767 -48.28696,-12.88109 -4.13261,11.57047 z', fill: '#6d6776' },
{ id: 'path4925', d: 'm 373.68976,378.7491 18.32018,-13.95251 7.83168,9.07046 z', fill: '#6d6776' },
{ id: 'path4927', d: 'm 309.40405,317.32053 42.03955,-2.99838 -42.49484,-2.59796 z', fill: '#8a8894' },
{ id: 'path4929', d: 'm 309.22548,316.60624 15.17987,-0.78151 1.15055,50.00664 z', fill: '#8a8894' },
{ id: 'path4931', d: 'm 309.40405,317.32053 3.32019,58.54749 12.83166,-10.03669 z', fill: '#b2b1b7' },
{ id: 'path4933', d: 'm 367.97548,376.60624 -55.25124,-0.73822 12.83166,-10.03669 z', fill: '#6f6679' },
{ id: 'path4935', d: 'm 289.22548,379.9991 23.49876,-4.13108 -0.5612,-12.00098 z', fill: '#6f6679' },
{ id: 'path4604', d: 'm 52.987578,37.012422 0,-14.012422 14.012422,14.012422 z', fill: '#eec16e' },
{ id: 'path5200', d: 'm 67,23 0,14.1 -14.1,-14.1 z', fill: '#eec16e' }],
[
{ id: '#path14437', d: 'm 439.66868,103.73835 37.57052,-12.003657 -25.65263,-23.5609 z', fill: '#393939' },
{ id: '#path14439', d: 'm 440.74012,104.09548 -30.64378,-29.860787 41.6688,-6.06091 z', fill: '#464b5e' },
{ id: '#path4158', d: 'm 410.75154,74.322373 23.00942,-28.19338 18.46594,22.17106 z', fill: '#5b6073' },
{ id: '#path4160', d: 'm 434.69933,46.490883 -31.71738,-5.68686 7.89251,33.83614 z', fill: '#777b87' },
{ id: '#path4166', d: 'm 403.3846,40.682503 -41.8189,5.42482 49.5613,28.78538 z', fill: '#595f6f' },
{ id: '#path4168', d: 'm 336.90579,72.058503 74.15738,1.82801 -49.68618,-28.54077 z', fill: '#686c77' },
{ id: '#path4174', d: 'm 337.08436,71.701363 73.97881,2.18515 -37.05927,13.88564 z', fill: '#343a48' },
{ id: '#path4176', d: 'm 406.31045,97.564853 4.75272,-23.67834 -39.21482,14.27342 z', fill: '#464d5a' },
{ id: '#path4178', d: 'm 405.65744,96.955173 5.40573,-23.06866 30.66428,29.395067 z', fill: '#5b6073' },
{ id: '#path4213', d: 'm 409.44552,65.936313 -7.34745,3.40452 9.02893,5.55187 z', fill: '#151515' },
{ id: '#path4215', d: 'm 400.60668,73.765003 1.74393,-4.67671 8.77639,5.80441 z', fill: '#151515' },
{ id: '#path4217', d: 'm 400.60668,73.259923 0.9863,7.19258 9.53402,-5.5598 z', fill: '#151515' },
{ id: '#path4219', d: 'm 408.56163,84.624143 -7.09491,-4.29791 9.66028,-5.5598 z', fill: '#151515' },
{ id: '#path4221', d: 'm 408.30909,84.497873 8.30992,-2.40387 -5.61828,-7.58011 z', fill: '#151515' },
{ id: '#path4223', d: 'm 409.44552,65.936313 7.42603,2.64691 -6.12336,6.94083 z', fill: '#151515' },
{ id: '#path4225', d: 'm 418.78943,74.648883 -1.91788,-6.06566 -5.74455,6.30948 z', fill: '#151515' },
{ id: '#path4227', d: 'm 418.78943,74.648883 -2.29669,7.69767 -5.36574,-7.45385 z', fill: '#151515' },
{ id: '#path4229', d: 'm 337.97722,70.987073 -33.34262,40.756577 29.01216,1.0285 z', fill: '#a22920' },
{ id: '#path4231', d: 'm 337.97722,70.987073 34.33596,46.649427 -40.80927,-4.50721 z', fill: '#d8503a' },
{ id: '#path4233', d: 'm 337.97722,71.344213 45.19509,19.57556 -11.18192,26.500227 z', fill: '#c63f2b' },
{ id: '#path4235', d: 'm 371.42599,117.52459 10.37005,-27.214497 59.26353,13.094037 z', fill: '#eb654a' },
{ id: '#path4237', d: 'm 369.93243,117.27206 71.57094,-13.91293 10.71481,46.55588 z', fill: '#d8503a' },
{ id: '#path4387', d: 'm 296.25549,143.7592 9.27197,-32.37269 -26.60841,30.81312 z', fill: '#6c6876' },
{ id: '#path4389', d: 'm 296.07692,143.7592 9.09339,-32.55126 26.60588,1.34884 z', fill: '#b2b1b9' },
{ id: '#path4391', d: 'm 295.00549,144.29491 76.23626,-27.55126 -39.64413,-4.0083 z', fill: '#8a8991' },
{ id: '#path4399', d: 'm 296.25549,143.7592 -59.29945,47.62731 41.96301,-49.18688 z', fill: '#b2b1b7' },
{ id: '#path4401', d: 'm 296.25549,143.7592 -59.29945,47.62731 35.53444,4.38454 z', fill: '#8a8895' },
{ id: '#path4403', d: 'm 296.25549,143.7592 76.77198,-28.08698 -100.53699,80.09883 z', fill: '#b2b1b7' },
{ id: '#path4405', d: 'm 351.96978,174.47348 19.98626,-58.44412 -99.46556,79.74169 z', fill: '#8a8895' },
{ id: '#path4407', d: 'm 351.96978,174.47348 19.27198,-58.44412 31.963,53.31311 z', fill: '#a22920' },
{ id: '#path4409', d: 'm 402.86264,169.65205 -31.97803,-53.26555 81.24872,33.31311 z', fill: '#c63f2b' },
{ id: '#path4514', d: 'm 402.86264,169.65205 48.89545,-21.4432 0.37524,50.06219 z', fill: '#d8503a' },
{ id: '#path4516', d: 'm 452.14835,197.86634 -49.31883,-29.30035 38.54928,74.84321 z', fill: '#c63f2b' },
{ id: '#path4518', d: 'm 388.93407,205.36634 13.55678,-37.79563 38.53081,74.05278 z', fill: '#d8503a' },
{ id: '#path4520', d: 'm 403.93407,168.22348 -16.08608,40.41866 -38.01055,-34.96936 z', fill: '#b23227' },
{ id: '#path4522', d: 'm 348.3144,223.69521 40.24788,-17.91021 -36.93912,-32.46936 z', fill: '#a82822' },
{ id: '#path4524', d: 'm 259.38583,267.26664 89.53361,-42.91022 3.41801,-51.39792 z', fill: '#3e3c3e' },
{ id: '#path4526', d: 'm 260.10012,266.55235 3.68444,-37.26591 89.26717,-56.68508 z', fill: '#1c202c' },
{ id: '#path4528', d: 'm 352.95726,172.98092 -81.53783,22.80408 -8.79843,35.55239 z', fill: '#b2b1b7' },
{ id: '#path4548', d: 'm 264.31638,230.30707 7.10305,-34.52207 -51.22484,61.81636 z', fill: '#9d9ca3' },
{ id: '#path4550', d: 'm 272.60012,195.48092 -93.41021,73.8755 41.34015,-11.69007 z', fill: '#8a8991' },
{ id: '#path4490', d: 'm 272.60012,195.48092 -35.46641,-4.33878 -57.90966,78.162 z', fill: '#6c6877' },
{ id: '#path4701', d: 'm 417.21834,273.55164 24.66845,-31.73472 -53.39306,-37.064 z', fill: '#c3402b' },
{ id: '#path4488', d: 'm 417.72342,273.80417 -41.24401,-7.23852 12.26685,-61.30765 z', fill: '#b23227' },
{ id: '#path4703', d: 'm 348.02289,223.04401 28.70906,43.52165 12.51939,-62.06528 z', fill: '#c63f2b' },
{ id: '#path4705', d: 'm 348.27543,223.04401 28.91827,42.91197 -36.17715,22.89214 z', fill: '#a22920' },
{ id: '#path4707', d: 'm 341.4569,289.209 6.99078,-66.0799 -60.96921,59.91065 z', fill: '#9e989a' },
{ id: '#path4718', d: 'm 259.12947,266.98564 89.31821,-43.85654 -60.96921,59.91065 z', fill: '#1c202c' },
{ id: '#path4720', d: 'm 260.16261,266.06345 -27.73454,27.27126 55.6754,-10.47353 z', fill: '#423c3e' },
{ id: '#path4722', d: 'm 260.24422,266.11576 -25.76258,27.04038 -90.44483,28.77449 z', fill: '#1d1f2e' },
{ id: '#path4724', d: 'm 260.23656,266.34663 -103.21279,33.55408 -12.67446,22.38706 z', fill: '#3e3c3d' },
{ id: '#path4726', d: 'm 260.19192,266.37596 -103.39136,33.74796 28.6525,-17.08417 z', fill: '#1b1e2e' },
{ id: '#path4728', d: 'm 260.68934,266.3683 -80.93714,2.72275 5.70086,13.9487 z', fill: '#3e3c3d' },
{ id: '#path4730', d: 'm 260.71866,266.59151 -81.72407,2.87835 41.81381,-12.44154 z', fill: '#2d2f2d' },
{ id: '#path4732', d: 'm 260.6052,267.5625 4.69459,-38.27606 -45.08312,27.9152 z', fill: '#3c3c3c' },
{ id: '#path4791', d: 'm 417.72342,273.80417 -41.9583,-9.02423 17.26685,36.19235 z', fill: '#a22920' },
{ id: '#path4793', d: 'm 376.71454,265.64861 16.43239,35.00969 -40.73028,16.58103 z', fill: '#b03327' },
{ id: '#path4795', d: 'm 353.2285,316.91385 23.50345,-51.10581 -35.12855,22.51631 z', fill: '#b93c38' },
{ id: '#path4806', d: 'm 352.97596,316.91385 -30.78227,6.08037 19.66225,-34.9224 z', fill: '#bfbfbf' },
{ id: '#path4808', d: 'm 275.38021,325.70935 48.07617,-2.46259 18.39956,-35.17494 z', fill: '#acaaab' },
{ id: '#path4810', d: 'm 278.05879,324.99507 9.53717,-42.15441 54.25998,5.23116 z', fill: '#918b8d' },
{ id: '#path5485', d: 'm 259.53685,324.48999 28.81672,-42.40694 -10.09392,43.82617 z', fill: '#867d7e' },
{ id: '#path4812', d: 'm 259.71542,324.66856 29.39577,-42.33298 -55.31582,10.7165 z', fill: '#918b8d' },
{ id: '#path4492', d: 'm 263.64399,325.73999 -35.33374,3.35066 5.48512,-36.03857 z', fill: '#9a9a9a' },
{ id: '#path4814', d: 'm 228.64399,328.23999 -31.40517,4.06495 36.55655,-39.25286 z', fill: '#bfbfbf' },
{ id: '#path4816', d: 'm 190.07256,307.34713 7.16626,24.95781 36.55655,-39.25286 z', fill: '#867d7f' },
{ id: '#path4836', d: 'm 190.07256,307.34713 7.16626,24.95781 -119.514876,94.49714 z', fill: '#1c202c' },
{ id: '#path4838', d: 'm 100.9266,430.08066 96.31222,-97.77572 -119.514876,94.49714 z', fill: '#3e3c3d' },
{ id: '#path4840', d: 'm 100.9266,430.08066 96.31222,-97.77572 -89.46285,114.44765 z', fill: '#21202f' },
{ id: '#path4851', d: 'm 201.43678,345.22784 -4.19796,-12.9229 -89.46285,114.44765 z', fill: '#bcbbb9' },
{ id: '#path4853', d: 'm 201.43678,345.22784 -4.19796,-12.9229 32.08721,-4.09733 z', fill: '#acaaab' },
{ id: '#path4855', d: 'm 201.43678,345.22784 26.35915,-16.45843 34.86513,-5.10749 z', fill: '#868385' },
{ id: '#path4895', d: 'm 277.70164,325.35221 43.25474,-1.92688 3.93528,7.6822 z', fill: '#3e3c3d' },
{ id: '#path4897', d: 'm 323.95164,329.81649 -16.92383,-1.7483 33.39956,50.18219 z', fill: '#3e3c3d' },
{ id: '#path4921', d: 'm 340.38021,378.38792 6.6476,-14.2483 -23.74329,-35.17495 z', fill: '#4e4a4b' },
{ id: '#path4923', d: 'm 339.48735,378.38792 55.04046,5.03741 -47.85044,-19.99637 z', fill: '#4e4a4b' },
{ id: '#path4925', d: 'm 341.0945,378.38792 -20.67383,6.28741 13.7567,-16.96066 z', fill: '#3e3c3d' },
{ id: '#path4927', d: 'm 239.8445,330.88792 20.57617,-6.39116 23.93528,1.4322 z', fill: '#191e31' },
{ id: '#path4929', d: 'm 261.0945,327.13792 30.57617,39.68027 -7.67186,-41.24637 z', fill: '#191e31' },
{ id: '#path4931', d: 'm 299.30879,358.03078 -7.81669,8.43027 -7.49329,-40.88923 z', fill: '#4c4845' },
{ id: '#path4933', d: 'm 299.30879,358.03078 -8.70955,8.43027 35.721,1.61077 z', fill: '#4c4845' },
{ id: '#path4935', d: 'm 286.0945,358.92364 5.3976,7.53741 -31.60043,5.71791 z', fill: '#191e31' },
{ id: '#path4604', d: 'm 82.987578,22.987654 0,14.024692 14.012422,-14.024692 z', fill: '#c63f2b' },
{ id: '#path5200', d: 'm 82.9,37.012346 14.1,0.08765 0,-14.2 z', fill: '#c63f2b' }],
[
{ id: '#path14437', d: 'm 537.04092,136.75167 -0.0694,-35.03304 37.21961,17.59542 z', fill: '#1f1e2c' },
{ id: '#path14439', d: 'm 537.74432,137.10337 1.68907,-35.38474 -53.4163,5.88627 z', fill: '#554c4d' },
{ id: '#path4158', d: 'm 540.64327,102.67931 -12.48931,-17.885005 -43.13163,23.059285 z', fill: '#6c6877' },
{ id: '#path4160', d: 'm 488.15445,74.852251 41.07961,10.336422 -43.21697,22.913597 z', fill: '#8a8895' },
{ id: '#path4166', d: 'm 488.75119,74.830921 -49.20095,14.226464 47.21293,19.790965 z', fill: '#b5afb6' },
{ id: '#path4168', d: 'm 470.21769,133.23465 -29.424,-44.134605 46.96424,18.504855 z', fill: '#774220' },
{ id: '#path4174', d: 'm 468.81089,133.93805 48.50799,23.74375 -30.05834,-50.82298 z', fill: '#8d5429' },
{ id: '#path4176', d: 'm 538.09604,137.10336 -21.43789,19.87502 -30.39237,-49.62217 z', fill: '#6c6877' },
{ id: '#path4178', d: 'm 538.09604,137.10336 -22.22663,19.48066 16.11753,22.51924 z', fill: '#1f1e2c' },
{ id: '#path4213', d: 'm 509.08275,108.9392 6.60071,2.41618 -7.1599,6.9432 z', fill: '#020202' },
{ id: '#path4215', d: 'm 518.7195,117.64336 -3.03604,-6.35016 -7.1599,7.00538 z', fill: '#020202' },
{ id: '#path4217', d: 'm 518.7195,117.58118 -2.04128,7.51433 -8.15466,-6.79693 z', fill: '#020202' },
{ id: '#path4219', d: 'm 508.77189,129.02094 8.03068,-3.92543 -8.27901,-6.79693 z', fill: '#020202' },
{ id: '#path4221', d: 'm 508.77189,129.02094 -6.7664,-3.3037 6.51807,-7.41866 z', fill: '#020202' },
{ id: '#path4223', d: 'm 498.82427,119.07332 3.18122,6.64392 6.51807,-7.41866 z', fill: '#020202' },
{ id: '#path4225', d: 'm 498.82427,119.07332 3.42992,-7.53142 6.26937,6.75668 z', fill: '#020202' },
{ id: '#path4227', d: 'm 509.14492,108.87702 -6.89073,2.66488 6.26937,6.75668 z', fill: '#020202' },
{ id: '#path4229', d: 'm 518.20082,225.13974 -2.33141,-69.96252 16.11753,23.92604 z', fill: '#444140' },
{ id: '#path4231', d: 'm 518.44951,224.14498 -1.8767,-70.02287 -41.53595,117.74265 z', fill: '#1c202c' },
{ id: '#path4233', d: 'm 474.9287,224.14498 40.94071,-67.56096 -41.08124,116.27549 z', fill: '#4f4d5b' },
{ id: '#path4235', d: 'm 475.17739,225.63713 40.69202,-69.05311 -37.59957,11.07949 z', fill: '#6c6877' },
{ id: '#path4237', d: 'm 478.65907,168.18966 37.21034,-11.60564 -47.04981,-23.48848 z', fill: '#8a8895' },
{ id: '#path4387', d: 'm 412.45389,125.16142 28.35746,-36.310047 30.82186,45.299277 z', fill: '#6b3c1e' },
{ id: '#path4389', d: 'm 430.12429,182.96111 -18.71016,-59.7887 58.81228,9.21973 z', fill: '#8e5327' },
{ id: '#path4391', d: 'm 429.77259,183.31281 49.27118,-13.92185 -8.81736,-36.99882 z', fill: '#b2b1b7' },
{ id: '#path4399', d: 'm 430.82769,182.60941 -16.95166,-59.7887 -20.67219,43.68645 z', fill: '#9b5c30' },
{ id: '#path4401', d: 'm 386.44819,128.53579 27.42784,-5.71508 -19.41106,44.49285 z', fill: '#af6630' },
{ id: '#path4403', d: 'm 340.44047,137.23995 46.32832,-8.69936 8.19356,39.02166 z', fill: '#8e5327' },
{ id: '#path4405', d: 'm 429.77259,183.31281 49.41687,-15.32865 -3.33583,59.0156 z', fill: '#8a8895' },
{ id: '#path4407', d: 'm 428.48647,182.11202 2.62293,47.62588 45.32695,-3.64756 z', fill: '#c6c5cd' },
{ id: '#path4409', d: 'm 404.55918,279.16515 26.55022,-49.42725 44.82956,-5.1397 z', fill: '#898890' },
{ id: '#path4514', d: 'm 404.3105,278.91645 71.06578,-53.90366 -0.32907,47.13274 z', fill: '#6c6877' },
{ id: '#path4516', d: 'm 475.43592,271.70443 -44.24118,29.7275 -27.02428,-22.82045 z', fill: '#8a8991' },
{ id: '#path4518', d: 'm 341.14388,137.23995 -32.42651,8.08963 91.16879,22.58438 z', fill: '#a6602f' },
{ id: '#path4520', d: 'm 331.99964,183.66451 65.14043,-16.77815 -88.69623,-22.18468 z', fill: '#8e5327' },
{ id: '#path4522', d: 'm 347.18919,199.30146 -17.01804,-16.33985 65.4946,-16.45445 z', fill: '#a6602f' },
{ id: '#path4524', d: 'm 368.57656,225.16526 -23.48399,-25.79008 50.57318,-32.86802 z', fill: '#8a5027' },
{ id: '#path4526', d: 'm 367.87316,223.75845 64.29136,-41.85194 -37.20218,-15.75105 z', fill: '#6b3c1e' },
{ id: '#path4528', d: 'm 367.87316,223.75845 63.23626,-42.20364 -53.02874,58.80961 z', fill: '#924f24' },
{ id: '#path4548', d: 'm 431.88279,229.03397 -1.3311,-48.20756 -53.35027,60.06557 z', fill: '#b2b1b7' },
{ id: '#path4550', d: 'm 431.88279,229.03397 -27.50267,50.99719 -26.29944,-39.31503 z', fill: '#c6c5cd' },
{ id: '#path4490', d: 'm 368.22486,321.1797 37.91376,-42.90705 26.45575,22.58439 z', fill: '#6c6877' },
{ id: '#path4701', d: 'm 347.12279,284.95446 57.25733,-4.9233 -35.44368,41.57626 z', fill: '#b2b1b7' },
{ id: '#path4488', d: 'm 348.17789,286.71297 -7.4557,-26.37708 64.08779,19.77079 z', fill: '#c4c3c9' },
{ id: '#path4703', d: 'm 377.01739,238.88161 -35.2401,22.50938 63.38439,19.06739 z', fill: '#b2b1b7' },
{ id: '#path4705', d: 'm 348.88129,285.65787 -33.48158,21.80598 53.53673,14.14357 z', fill: '#8a8991' },
{ id: '#path4707', d: 'm 348.88129,285.65787 -31.72308,21.80598 -12.23139,-46.34904 z', fill: '#b2b1b7' },
{ id: '#path4718', d: 'm 348.88129,285.65787 -6.7523,-24.61858 -39.68908,-1.27094 z', fill: '#8a8895' },
{ id: '#path4720', d: 'm 379.4793,238.88159 -37.35031,22.5094 -37.20217,-0.62788 z', fill: '#706671' },
{ id: '#path4722', d: 'm 378.07248,239.93669 -51.29772,-2.04934 -21.84805,22.87571 z', fill: '#8e5226' },
{ id: '#path4724', d: 'm 380.18271,241.3435 -54.90002,-2.17002 43.65375,-15.339 z', fill: '#b3afb7' },
{ id: '#path4726', d: 'm 348.23734,199.42982 -20.8798,40.50741 41.5789,-16.10275 z', fill: '#7c7a89' },
{ id: '#path4728', d: 'm 330.59282,181.20259 -3.23528,58.73464 21.1863,-40.47441 z', fill: '#8a8895' },
{ id: '#path4730', d: 'm 331.64792,181.90598 -4.29038,57.8554 -26.65114,-56.02084 z', fill: '#b2b0b7' },
{ id: '#path4732', d: 'm 331.64792,181.90599 -22.22714,-36.92808 -8.71438,38.76263 z', fill: '#8a8895' },
{ id: '#path4791', d: 'm 269.7485,156.23179 39.67228,-11.25388 -7.65927,38.76263 z', fill: '#b2b1b7' },
{ id: '#path4793', d: 'm 305.62204,260.68708 -12.02781,37.63254 23.99383,9.57145 z', fill: '#c3c2ca' },
{ id: '#path4795', d: 'm 305.97374,259.98368 -44.56928,22.95589 32.97131,16.15897 z', fill: '#8a8895' },
{ id: '#path4806', d: 'm 307.46588,259.98368 -76.47448,9.84814 30.80594,13.35054 z', fill: '#757381' },
{ id: '#path4808', d: 'm 306.47112,259.98368 -75.47972,10.19984 -24.18924,-38.96332 z', fill: '#b2b1b7' },
{ id: '#path4810', d: 'm 305.97374,259.98368 -58.80407,-30.2458 -40.36751,1.83402 z', fill: '#693d1f' },
{ id: '#path5485', d: 'm 305.97374,259.98368 -60.21088,-29.8941 16.2564,-38.61163 z', fill: '#8e5327' },
{ id: '#path4812', d: 'm 305.97374,260.72974 -4.64207,-77.06473 -40.36751,7.81294 z', fill: '#a6602f' },
{ id: '#path4492', d: 'm 305.47636,261.08146 -4.14469,-77.41645 26.45573,55.64432 z', fill: '#6d3c1c' },
{ id: '#path4814', d: 'm 270.45191,156.23181 31.23147,27.4332 -40.36752,9.21975 z', fill: '#8b5528' },
{ id: '#path4816', d: 'm 270.45191,156.23181 -24.68903,7.38622 15.55298,29.26673 z', fill: '#6b3c1e' },
{ id: '#path4836', d: 'm 175.84427,179.0924 70.27031,-14.77096 15.20128,28.56332 z', fill: '#a6602f' },
{ id: '#path4838', d: 'm 175.84427,179.0924 70.27031,52.75568 15.55298,-38.96332 z', fill: '#6b3c1e' },
{ id: '#path4840', d: 'm 175.84427,179.0924 70.62201,51.34887 -38.96071,1.13063 z', fill: '#a75f2c' },
{ id: '#path4851', d: 'm 175.84427,179.0924 -113.420747,11.46095 145.785457,41.72196 z', fill: '#6a3b1d' },
{ id: '#path4853', d: 'm 178.33118,179.0924 -154.140081,0.35219 40.77225,11.89982 z', fill: '#512d16' },
{ id: '#path4855', d: 'm 175.84427,179.0924 -141.453836,-15.82606 -9.769501,16.60549 z', fill: '#9e5c2a' },
{ id: '#path4895', d: 'm 372.79697,332.08244 -57.39726,-24.61859 53.18503,13.44016 z', fill: '#8a8991' },
{ id: '#path4897', d: 'm 372.26942,330.32393 21.96135,49.21797 -44.28619,-57.93448 z', fill: '#8a8991' },
{ id: '#path4921', d: 'm 395.6015,379.74313 -14.94564,2.78305 -30.71124,-60.91876 z', fill: '#a4a3a8' },
{ id: '#path4923', d: 'm 394.95843,379.74314 -9.08012,-14.87396 55.30258,23.91318 z', fill: '#88878d' },
{ id: '#path4925', d: 'm 369.27996,387.29953 8.72257,-10.55054 3.94686,5.55706 z', fill: '#a4a3a8' },
{ id: '#path4927', d: 'm 317.38848,316.9791 -44.36878,-28.50712 43.93994,19.03203 z', fill: '#514f5d' },
{ id: '#path4929', d: 'm 317.53417,313.75862 -21.81081,-11.53583 15.20737,78.89356 z', fill: '#514f5d' },
{ id: '#path4931', d: 'm 317.03679,313.50992 8.52942,55.59808 -14.63548,12.00835 z', fill: '#898794' },
{ id: '#path4933', d: 'm 364.28795,389.85786 -38.72174,-20.74986 -15.13286,11.51097 z', fill: '#898794' },
{ id: '#path4935', d: 'm 288.6861,383.39191 19.47178,-16.77082 3.76761,13.99788 z', fill: '#504c5d' },
{ id: '#path4604', d: 'm 112.98758,37.012422 0,-14.012422 14.01242,14.012422 z', fill: '#8d5429' },
{ id: '#path5200', d: 'm 127,23 0,14.1 -14.1,-14.1 z', fill: '#8d5429' }],
[
{ id: '#path14437', d: 'm 509.45378,78.954395 -25.43143,-0.601737 6.27334,-22.048228 z', fill: '#6b7681' },
{ id: '#path14439', d: 'm 488.04051,76.862306 -10.19802,-18.476833 -0.0711,36.25707 z', fill: '#a8b4c0' },
{ id: '#path4158', d: 'm 487.8033,77.50262 -9.96081,-19.117147 14.02508,-19.911 z', fill: '#dbe0f6' },
{ id: '#path4160', d: 'm 463.05801,22.600693 14.78448,35.78478 14.82865,-19.55386 z', fill: '#8192ac' },
{ id: '#path4166', d: 'm 463.59372,22.600693 14.24877,35.78478 -62.31421,-28.48243 z', fill: '#99aac6' },
{ id: '#path4168', d: 'm 420.66224,57.450953 57.18025,0.93452 -61.68286,-28.73497 z', fill: '#8192ae' },
{ id: '#path4174', d: 'm 420.66224,57.450953 -4.81786,-27.72856 -42.23743,56.87546 z', fill: '#a7b9cf' },
{ id: '#path4176', d: 'm 420.66224,57.450953 57.55906,0.55571 -38.7019,29.60134 z', fill: '#a7b9cf' },
{ id: '#path4178', d: 'm 478.11467,94.574063 0.10663,-36.5674 -38.7019,29.60134 z', fill: '#8498b3' },
{ id: '#path4213', d: 'm 483.54424,53.789153 -6.08055,4.47005 0.82031,-7.26923 z', fill: '#151515' },
{ id: '#path4215', d: 'm 483.47793,53.678203 -6.72853,4.581 7.59552,-0.57697 z', fill: '#151515' },
{ id: '#path4217', d: 'm 483.32103,63.014453 -6.48234,-5.11239 7.59552,-0.3984 z', fill: '#151515' },
{ id: '#path4219', d: 'm 483.54424,62.880523 -6.08055,-4.62132 0.0955,7.14624 z', fill: '#151515' },
{ id: '#path4221', d: 'm 471.75853,62.612673 5.70516,-4.35347 0.45266,7.14624 z', fill: '#151515' },
{ id: '#path4223', d: 'm 471.80317,63.014453 5.66052,-4.75525 -7.67234,-0.44304 z', fill: '#151515' },
{ id: '#path4225', d: 'm 473.23174,52.300173 4.85695,6.22689 -8.2527,-0.66626 z', fill: '#151515' },
{ id: '#path4227', d: 'm 473.00853,52.344813 4.45516,5.91439 0.94373,-7.31804 z', fill: '#151515' },
{ id: '#path4229', d: 'm 420.66224,57.450953 18.66819,30.60775 -65.72348,-1.46085 z', fill: '#7f92b0' },
{ id: '#path4231', d: 'm 360.05309,144.07153 79.52988,-57.022977 -65.47094,-1.20831 z', fill: '#59908d' },
{ id: '#path4233', d: 'm 475.71556,123.36341 -37.90036,-36.188587 40.59508,6.99918 z', fill: '#78849b' },
{ id: '#path4235', d: 'm 359.29548,143.81899 80.16122,-57.149247 -18.87765,57.019677 z', fill: '#7e9c9d' },
{ id: '#path4237', d: 'm 475.71556,123.36341 -37.26902,-36.567397 45.26704,75.563287 z', fill: '#548481' },
{ id: '#path4387', d: 'm 419.39956,143.06139 19.67833,-56.391647 44.63569,75.689557 z', fill: '#668f91' },
{ id: '#path4389', d: 'm 419.39956,143.06139 77.61841,82.53692 -13.30439,-63.23901 z', fill: '#615770' },
{ id: '#path4391', d: 'm 419.39956,143.06139 77.53547,81.46549 -56.79288,-13.59616 z', fill: '#766983' },
{ id: '#path4399', d: 'm 419.39956,143.06139 -10.67882,45.39406 32.84998,22.47527 z', fill: '#8291ae' },
{ id: '#path4401', d: 'm 419.39956,142.3471 -10.67882,46.86596 -67.15002,-10.42519 z', fill: '#a7b9cf' },
{ id: '#path4403', d: 'm 419.39956,142.3471 -59.60739,0.75121 -18.22145,35.68956 z', fill: '#8291ae' },
{ id: '#path4405', d: 'm 309.04242,193.41853 50.74975,-50.32022 -15.72145,34.97527 z', fill: '#726d84' },
{ id: '#path4407', d: 'm 374.39956,232.3471 34.32118,-43.89165 -67.15002,-9.66758 z', fill: '#99abc3' },
{ id: '#path4409', d: 'm 375.47099,233.06139 -67.82168,-39.24879 33.92141,-15.02473 z', fill: '#bdd0df' },
{ id: '#path4514', d: 'm 373.68527,231.98996 35.03547,-43.53451 -1.43574,54.61813 z', fill: '#a7b9cf' },
{ id: '#path4516', d: 'm 450.11384,275.20425 -41.3931,-86.7488 -1.79288,54.26099 z', fill: '#8192ae' },
{ id: '#path4518', d: 'm 448.68527,275.20425 -39.96453,-86.7488 32.84997,21.76099 z', fill: '#a7b8cf' },
{ id: '#path4520', d: 'm 447.97098,274.84711 45.74976,0.0369 -52.15003,-64.66758 z', fill: '#847a93' },
{ id: '#path4522', d: 'm 496.89955,223.77568 -3.17881,52.17976 -52.15003,-65.73901 z', fill: '#615770' },
{ id: '#path4524', d: 'm 407.61385,243.41853 -34.6074,-13.17736 -5.72145,63.18956 z', fill: '#98a9c5' },
{ id: '#path4526', d: 'm 407.971,241.27567 -9.60741,57.53692 -32.15002,-5.739 z', fill: '#8192ae' },
{ id: '#path4528', d: 'm 407.61386,241.27567 -11.03598,57.53692 52.84998,-24.66757 z', fill: '#a7b9cf' },
{ id: '#path4548', d: 'm 398.13688,396.21439 -1.559,-97.4018 52.49284,-26.81043 z', fill: '#8a9ebc' },
{ id: '#path4550', d: 'm 397.6318,396.71947 70.37466,-73.62116 -19.65003,-49.66758 z', fill: '#847a93' },
{ id: '#path4490', d: 'm 493.68528,274.1328 -25.67882,48.96551 -20.36431,-50.38186 z', fill: '#766983' },
{ id: '#path4701', d: 'm 344.7567,275.56139 29.46912,-45.11101 -7.04542,63.27621 z', fill: '#dee1f0' },
{ id: '#path4488', d: 'm 344.7567,276.27568 28.96404,-45.32022 -83.57859,39.97527 z', fill: '#f2f3f8' },
{ id: '#path4703', d: 'm 268.32813,245.56139 105.39261,-14.60593 -83.93573,40.33241 z', fill: '#a7b9cf' },
{ id: '#path4705', d: 'm 268.68527,246.27568 105.74976,-14.60593 -65.00717,-38.95331 z', fill: '#dee1f0' },
{ id: '#path4707', d: 'm 268.68527,245.20425 -63.66594,56.80469 86.19425,-31.07821 z', fill: '#dee1f0' },
{ id: '#path4718', d: 'm 248.68527,314.48997 -42.40325,-12.94278 85.2887,-30.97361 z', fill: '#bdd0df' },
{ id: '#path4720', d: 'm 248.68527,314.48997 42.17833,8.60834 0.70712,-52.52473 z', fill: '#a7b9cf' },
{ id: '#path4722', d: 'm 346.54241,275.91854 -56.3931,47.17977 1.77855,-53.9533 z', fill: '#dee1f0' },
{ id: '#path4724', d: 'm 346.54241,275.5614 -56.3931,47.89405 40.70713,30.68956 z', fill: '#a8b9cd' },
{ id: '#path4726', d: 'm 345.82812,276.27569 21.10691,17.5369 -36.43573,61.40385 z', fill: '#bdd0df' },
{ id: '#path4728', d: 'm 366.18527,366.27569 1.46405,-74.9631 -37.15002,63.90385 z', fill: '#eff4f8' },
{ id: '#path4730', d: 'm 365.11384,365.91855 1.82119,-74.24882 31.77856,104.97528 z', fill: '#847a93' },
{ id: '#path4732', d: 'm 397.97098,297.70427 -31.03595,-6.39168 31.42142,104.97528 z', fill: '#a7b9cf' },
{ id: '#path4791', d: 'm 365.82813,365.20426 -9.60738,45.0369 42.49284,-13.59615 z', fill: '#8291ae' },
{ id: '#path4793', d: 'm 366.18527,364.13284 -9.96452,46.10832 -52.8643,2.47528 z', fill: '#99abc3' },
{ id: '#path4795', d: 'm 366.18527,365.91855 -34.25023,-12.82025 -29.29288,60.33243 z', fill: '#8093ab' },
{ id: '#path4806', d: 'm 258.68527,407.34712 73.96405,-54.60596 -30.00716,60.68957 z', fill: '#847a93' },
{ id: '#path4808', d: 'm 258.32813,408.77569 73.96405,-54.9631 -120.36431,11.40385 z', fill: '#8291ae' },
{ id: '#path4810', d: 'm 259.7567,407.70426 -44.96452,10.0369 -3.36939,-53.1344 z', fill: '#605770' },
{ id: '#path5485', d: 'm 289.39956,322.70426 42.17833,31.46547 -119.65002,12.11814 z', fill: '#dee1f0' },
{ id: '#path4812', d: 'm 289.39956,322.70426 -42.10739,-8.53453 -35.3643,52.11814 z', fill: '#bdd0df' },
{ id: '#path4492', d: 'm 152.61385,346.63283 95.39261,-32.82024 -35.72145,52.47528 z', fill: '#f2f3f8' },
{ id: '#path4814', d: 'm 152.61385,346.98997 96.46404,-33.17738 -42.50717,-13.59615 z', fill: '#dee1f0' },
{ id: '#path4816', d: 'm 152.61385,346.63283 -86.541036,74.80974 146.212196,-55.1547 z', fill: '#dde1f0' },
{ id: '#path4836', d: 'm 61.246555,437.24995 -2.882951,-13.08022 154.531086,-58.80535 z', fill: '#becfe1' },
{ id: '#path4838', d: 'm 45.470994,461.27569 167.892606,-96.03453 -157.532545,72.60527 z', fill: '#4b5c6c' },
{ id: '#path4840', d: 'm 55.828137,484.13284 131.106893,-69.24882 25.3933,-48.89201 z', fill: '#4a5c72' },
{ id: '#path4851', d: 'm 216.18527,416.98998 -32.10738,-0.32025 27.49283,-49.66757 z', fill: '#687a92' },
{ id: '#path4853', d: 'm 45.828137,460.5614 167.535463,-95.32024 -157.150021,120.33243 z', fill: '#687a92' },
{ id: '#path4855', d: 'm 380.47098,432.34711 -24.25023,-22.10595 42.1357,-14.31044 z', fill: '#847a92' },
{ id: '#path4895', d: 'm 374.75669,427.70425 34.85692,33.96549 -25.00717,-38.41759 z', fill: '#b68892' },
{ id: '#path4897', d: 'm 375.47098,427.34711 33.40668,33.53437 -20.34265,-5.12932 z', fill: '#a75c68' },
{ id: '#path4921', d: 'm 408.81153,460.8229 31.15922,-17.54602 -41.61431,2.47528 z', fill: '#b68892' },
{ id: '#path4923', d: 'm 408.25415,460.86623 26.7166,7.41065 -18.93574,-11.63186 z', fill: '#a75c68' },
{ id: '#path4925', d: 'm 384.93526,447.52567 -17.28594,11.4655 21.24283,-3.23901 z', fill: '#a75c68' },
{ id: '#path4927', d: 'm 326.18527,411.27568 -7.64309,34.5012 -16.25717,-32.70329 z', fill: '#a75c68' },
{ id: '#path4929', d: 'm 301.36384,441.81139 17.35692,3.96549 -16.07861,-32.88186 z', fill: '#b58892' },
{ id: '#path4931', d: 'm 357.61384,432.70425 -38.1788,5.39406 1.95711,-6.45329 z', fill: '#a75c68' },
{ id: '#path4933', d: 'm 346.0067,456.45425 -27.91094,-10.85594 1.51068,-8.41757 z', fill: '#a75c68' },
{ id: '#path4935', d: 'm 303.14955,441.98996 -1.39308,-9.78451 -22.68575,7.65385 z', fill: '#b58892' },
{ id: '#path4604', d: 'm 142.98758,37.012346 14.01242,-14.024692 -14.01242,0 z', fill: '#59908d' },
{ id: '#path5200', d: 'm 142.9,37.012346 14.1,-14.112346 0,14.2 z', fill: '#59908d' }],
[
{ id: '#path14437', d: 'm 518.19146,91.33282 -9.72168,-7.142449 -39.94487,4.695503 z', fill: '#040404' },
{ id: '#path14439', d: 'm 469.05399,88.753606 49.2036,2.513085 -49.95183,27.213119 z', fill: '#040404' },
{ id: '#path4158', d: 'm 469.80221,88.940659 -37.77691,6.441237 37.02869,24.033184 z', fill: '#484f61' },
{ id: '#path4160', d: 'm 469.05399,89.127712 -37.21575,6.815344 15.14327,-18.989419 z', fill: '#606873' },
{ id: '#path4166', d: 'm 432.76534,74.350371 -0.55298,21.405632 15.14326,-18.802366 z', fill: '#717e87' },
{ id: '#path4168', d: 'm 432.76534,74.163318 0.38229,21.031525 -32.18161,-9.075519 z', fill: '#82909a' },
{ id: '#path4174', d: 'm 396.74125,119.36641 38.08987,4.82193 -33.64596,-37.991531 z', fill: '#808e99' },
{ id: '#path4176', d: 'm 432.76535,95.113462 2.62693,29.823098 -34.61332,-39.191353 z', fill: '#606873' },
{ id: '#path4178', d: 'm 432.39124,94.926408 2.43988,29.636052 33.66171,-5.33443 z', fill: '#808e99' },
{ id: '#path4213', d: 'm 438.00289,95.394047 -5.50996,-4.501463 4.94878,-2.154502 z', fill: '#151515' },
{ id: '#path4215', d: 'm 438.00289,95.394047 -5.22938,-4.688516 -1.59812,5.04711 z', fill: '#151515' },
{ id: '#path4217', d: 'm 438.56405,95.206994 -5.04231,6.534766 -2.15931,-6.456758 z', fill: '#151515' },
{ id: '#path4219', d: 'm 438.00289,95.394047 -4.66821,6.347713 5.04231,0.46426 z', fill: '#151515' },
{ id: '#path4221', d: 'm 438.00289,95.394047 5.2457,5.880073 -5.43276,0.9319 z', fill: '#151515' },
{ id: '#path4223', d: 'm 437.62878,95.01994 5.33923,6.34771 2.33002,-5.427956 z', fill: '#151515' },
{ id: '#path4225', d: 'm 438.00289,95.394047 4.77807,-5.062623 2.33002,5.795324 z', fill: '#151515' },
{ id: '#path4227', d: 'm 437.81583,95.861685 4.96513,-5.530261 -5.52628,-1.873928 z', fill: '#151515' },
{ id: '#path4229', d: 'm 397.27032,120.16002 -26.19227,8.52542 30.10712,-42.488631 z', fill: '#606873' },
{ id: '#path4231', d: 'm 460.16748,156.03411 -24.80729,-32.00073 33.6617,-5.06989 z', fill: '#606873' },
{ id: '#path4233', d: 'm 460.43202,155.76957 -25.6009,-33.05886 -9.19305,27.99704 z', fill: '#808e99' },
{ id: '#path4235', d: 'm 395.88536,118.99914 40.0039,4.24064 -9.98665,27.46797 z', fill: '#90a1a9' },
{ id: '#path4237', d: 'm 396.41443,118.47006 -10.78691,37.83667 41.8623,-5.33444 z', fill: '#808e99' },
{ id: '#path4387', d: 'm 397.73711,118.47006 -12.10959,37.83667 -15.01283,-27.81997 z', fill: '#6f7782' },
{ id: '#path4389', d: 'm 362.02482,164.49924 24.92537,-8.19251 -16.07096,-27.81997 z', fill: '#5f6973' },
{ id: '#path4391', d: 'm 459.90294,154.97597 7.73059,33.07501 -41.99546,-38.40137 z', fill: '#5f6772' },
{ id: '#path4399', d: 'm 410.96388,169.78996 57.19872,18.52555 -42.25999,-38.40136 z', fill: '#808e99' },
{ id: '#path4401', d: 'm 411.22842,170.31903 -25.86543,-14.27684 41.8623,-6.92165 z', fill: '#616b77' },
{ id: '#path4403', d: 'm 410.69934,168.99636 56.93419,19.05462 -25.32973,21.64819 z', fill: '#606873' },
{ id: '#path4405', d: 'm 410.69934,168.73182 5.87883,54.50238 25.99017,-14.06411 z', fill: '#828d96' },
{ id: '#path4407', d: 'm 410.96388,168.46729 5.87882,54.76691 -35.6466,3.39526 z', fill: '#060606' },
{ id: '#path4409', d: 'm 411.22842,168.99636 -25.86544,-13.74778 -4.16688,71.38088 z', fill: '#7e8f99' },
{ id: '#path4514', d: 'm 355.67596,215.55461 30.2161,-61.09964 -4.43142,72.70356 z', fill: '#606873' },
{ id: '#path4516', d: 'm 356.20503,215.55461 29.68703,-61.09964 -44.90535,42.28198 z', fill: '#808e99' },
{ id: '#path4518', d: 'm 362.02482,164.23472 22.8091,-8.98615 -44.11175,42.01744 z', fill: '#485162' },
{ id: '#path4520', d: 'm 362.81842,163.70564 -43.32478,25.40347 22.81575,7.3633 z', fill: '#606873' },
{ id: '#path4522', d: 'm 472.33611,209.47029 -4.43805,-21.41931 -26.65239,21.64819 z', fill: '#808e99' },
{ id: '#path4524', d: 'm 472.33611,208.94121 -10.52237,26.99069 -20.039,-27.55541 z', fill: '#707e87' },
{ id: '#path4526', d: 'm 417.31273,222.69707 45.03008,13.23483 -20.039,-27.29087 z', fill: '#606873' },
{ id: '#path4528', d: 'm 416.51913,222.16799 46.08821,12.97031 -11.83839,22.70633 z', fill: '#8fa3aa' },
{ id: '#path4548', d: 'm 417.0482,222.16799 -10.52239,35.72036 44.77221,0.22082 z', fill: '#c0cfd6' },
{ id: '#path4550', d: 'm 417.31274,221.37439 -9.99333,36.51396 -36.17565,-6.39257 z', fill: '#a4b7ba' },
{ id: '#path4490', d: 'm 417.57727,221.63893 -36.97595,4.7697 -9.45756,25.61623 z', fill: '#342e2f' },
{ id: '#path4701', d: 'm 311.49853,268.19718 69.36732,-41.25948 -9.72209,25.08716 z', fill: '#070707' },
{ id: '#path4488', d: 'm 312.82122,267.13904 69.10277,-40.73041 -77.70772,20.32553 z', fill: '#f3f7f7' },
{ id: '#path4703', d: 'm 355.94051,214.76101 26.24802,12.17669 -77.70772,20.59006 z', fill: '#484f61' },
{ id: '#path4705', d: 'm 356.46958,215.29008 -14.22592,-18.24489 -38.82099,51.01164 z', fill: '#606873' },
{ id: '#path4707', d: 'm 319.17006,188.83652 23.86721,7.41506 -39.35006,51.54072 z', fill: '#484f61' },
{ id: '#path4718', d: 'm 319.43461,188.57199 -27.18816,48.15352 11.7053,11.33132 z', fill: '#606773' },
{ id: '#path4720', d: 'm 319.69915,188.57199 -27.18816,48.94712 -26.1233,-6.39255 z', fill: '#808e99' },
{ id: '#path4722', d: 'm 431.59765,284.86291 -24.8073,-27.76816 43.9786,-0.0437 z', fill: '#a4b7bd' },
{ id: '#path4724', d: 'm 432.12673,283.54024 -25.60092,-26.44549 -5.22501,51.54076 z', fill: '#c0cfd6' },
{ id: '#path4726', d: 'm 371.01902,251.79597 36.03587,5.03424 -5.48955,52.33437 z', fill: '#cfdce4' },
{ id: '#path4728', d: 'm 371.5481,251.26689 -4.96714,34.39769 35.77798,22.7064 z', fill: '#c0cfd6' },
{ id: '#path4730', d: 'm 372.07717,251.00236 -4.43808,35.9849 -39.87916,-1.89541 z', fill: '#a7b6bd' },
{ id: '#path4732', d: 'm 372.60625,250.73782 -60.25509,17.20289 15.93785,17.68022 z', fill: '#352f2f' },
{ id: '#path4791', d: 'm 369.96089,322.69148 -3.37993,-37.0269 36.04252,21.9128 z', fill: '#a4b7bd' },
{ id: '#path4793', d: 'm 369.96089,322.69148 -2.3218,-36.76237 -38.82102,-1.10179 z', fill: '#c0cfd6' },
{ id: '#path4795', d: 'm 371.01902,322.42694 -46.49921,3.71158 4.03373,-41.3112 z', fill: '#8fa2a9' },
{ id: '#path4806', d: 'm 295.6264,313.43273 29.95155,12.70579 3.76919,-41.84028 z', fill: '#a4b6bd' },
{ id: '#path4808', d: 'm 296.15548,314.22633 -16.34218,-16.92219 49.53384,-13.0059 z', fill: '#8fa0a7' },
{ id: '#path4810', d: 'm 250.65536,304.43852 -7.34795,-10.3088 86.03973,-9.83148 z', fill: '#060606' },
{ id: '#path5485', d: 'm 226.58264,280.36579 16.72477,14.293 86.03973,-10.36055 z', fill: '#322c2e' },
{ id: '#path4812', d: 'm 225.87981,281.04981 87.26497,-13.10911 16.4669,16.88662 z', fill: '#060702' },
{ id: '#path4492', d: 'm 227.11171,280.89486 84.64621,-12.36091 -7.54166,-21.27067 z', fill: '#cfdce3' },
{ id: '#path4814', d: 'm 226.84717,281.15939 65.92838,-44.4339 12.49885,10.53779 z', fill: '#4a5162' },
{ id: '#path4816', d: 'm 226.84717,281.15939 67.05071,-44.05978 -28.03928,-5.973 z', fill: '#606873' },
{ id: '#path4836', d: 'm 227.11171,281.15939 -14.97412,-4.75357 55.30823,-45.80829 z', fill: '#808e99' },
{ id: '#path4838', d: 'm 161.37743,289.35409 52.45696,-13.6323 -6.05908,-12.95081 z', fill: '#484f5f' },
{ id: '#path4840', d: 'm 98.417973,322.68557 4.853707,10.21081 111.23761,-57.59273 z', fill: '#606875' },
{ id: '#path4851', d: 'm 227.48583,280.41116 -119.72484,61.08974 105.81302,-65.63609 z', fill: '#4e5465' },
{ id: '#path4853', d: 'm 266.5482,231.29323 -53.47533,45.11259 -5.29756,-13.63484 z', fill: '#5f687d' },
{ id: '#path4855', d: 'm 163.49372,288.29595 51.39881,-13.10324 -116.63492,48.42144 z', fill: '#808e99' },
{ id: '#path4895', d: 'm 109.26715,341.39105 -6.74369,-9.617 111.98583,-56.4704 z', fill: '#555c67' },
{ id: '#path4897', d: 'm 355.74471,323.81381 38.14626,23.95298 -16.70695,-29.34024 z', fill: '#060606' },
{ id: '#path4921', d: 'm 441.41583,348.50505 -47.52486,-0.73826 -9.97299,-14.74996 z', fill: '#060606' },
{ id: '#path4923', d: 'm 370.7091,356.36136 23.18187,-8.59457 -13.33997,-10.63476 z', fill: '#060606' },
{ id: '#path4925', d: 'm 324.3195,326.80668 14.57734,26.57175 5.73963,-29.34024 z', fill: '#060606' },
{ id: '#path4927', d: 'm 325.06773,326.43258 15.32555,28.06819 -15.95874,-10.63476 z', fill: '#060606' },
{ id: '#path4929', d: 'm 394.27802,392.65 -52.3883,-49.74664 -17.45518,0.96265 z', fill: '#060606' },
{ id: '#path4931', d: 'm 393.15569,392.65 -51.26597,-49.74664 64.10074,43.98526 z', fill: '#060606' },
{ id: '#path4933', d: 'm 392.03336,390.77945 50.86597,3.00283 -48.88038,-13.25352 z', fill: '#060606' },
{ id: '#path4935', d: 'm 396.14856,391.15357 -29.5676,12.35556 17.33702,-18.86516 z', fill: '#060606' },
{ id: '#path4604', d: 'm 186.99999,23.000015 0,14.099975 -14.09998,-14.099975 z', fill: '#606873' },
{ id: '#path5200', d: 'm 186.99999,37.012412 -14.0124,0 0,-14.012397 z', fill: '#606873' }],
[
{ id: '#path14437', d: 'm 495.67653,93.719633 7.65012,-19.67631 31.441,11.23795 z', fill: '#413b3d' },
{ id: '#path14439', d: 'm 495.62423,93.867573 7.70242,-19.82425 -9.59645,-19.31917 z', fill: '#060606' },
{ id: '#path4158', d: 'm 496.00304,93.993843 -2.26694,-39.3102 -22.76178,20.4497 z', fill: '#3e3c3d' },
{ id: '#path4160', d: 'm 452.43161,51.136693 41.43076,3.79949 -22.13044,20.70223 z', fill: '#050507' },
{ id: '#path4166', d: 'm 451.92654,51.389233 42.44091,3.54695 -29.95913,-18.18864 z', fill: '#4d4b4c' },
{ id: '#path4168', d: 'm 452.68415,50.884153 -33.69934,-13.12056 46.18112,-1.26859 z', fill: '#3c3a3b' },
{ id: '#path4174', d: 'm 452.43161,51.136693 -33.57306,14.15356 52.87338,10.34816 z', fill: '#c0c0b4' },
{ id: '#path4176', d: 'm 484.35602,121.61278 -66.02049,-56.827607 53.3964,10.34817 z', fill: '#a3a494' },
{ id: '#path4178', d: 'm 483.99888,119.82707 12.13633,-25.494927 -25.16089,-19.1988 z', fill: '#b2b0b7' },
{ id: '#path4213', d: 'm 464.88829,67.565263 6.26487,3.42068 -6.62908,4.43955 z', fill: '#151515' },
{ id: '#path4215', d: 'm 471.95935,76.025293 -0.80619,-5.03935 -7.00789,4.18701 z', fill: '#151515' },
{ id: '#path4217', d: 'm 471.95935,76.025293 -1.43754,4.93591 -7.13415,-6.4196 z', fill: '#151515' },
{ id: '#path4219', d: 'm 465.6459,82.970083 4.74964,-2.26142 -6.25027,-5.53571 z', fill: '#151515' },
{ id: '#path4221', d: 'm 465.6459,82.970083 -5.35188,-1.75635 4.4826,-6.67213 z', fill: '#151515' },
{ id: '#path4223', d: 'm 456.80707,76.530363 3.73949,4.80964 4.23006,-6.7984 z', fill: '#151515' },
{ id: '#path4225', d: 'm 456.80707,76.530363 2.22426,-6.0495 6.75544,4.94463 z', fill: '#151515' },
{ id: '#path4227', d: 'm 464.88829,67.565253 -5.85696,2.91561 5.74529,5.0709 z', fill: '#151515' },
{ id: '#path4229', d: 'm 452.68415,50.884153 -32.60252,-12.84636 -1.65809,28.18301 z', fill: '#060608' },
{ id: '#path4231', d: 'm 374.82701,64.812723 45.7993,-27.80675 -0.26912,29.68029 z', fill: '#3e3c3d' },
{ id: '#path4233', d: 'm 374.82701,64.812723 75.7993,64.336107 -31.53181,-63.725257 z', fill: '#060606' },
{ id: '#path4235', d: 'm 484.82701,120.88416 -34.2007,8.26467 -32.7945,-64.735407 z', fill: '#3e3c3d' },
{ id: '#path4237', d: 'm 484.82701,120.88416 -35.46339,7.50706 43.30231,38.10379 z', fill: '#060606' },
{ id: '#path4387', d: 'm 374.82701,64.812723 75.7993,64.336107 -93.65619,-17.25823 z', fill: '#ebc26b' },
{ id: '#path4389', d: 'm 388.46407,148.65539 62.16224,-19.50656 -93.65619,-17.25823 z', fill: '#f2d392' },
{ id: '#path4391', d: 'm 391.24199,149.413 -74.4609,-1.07127 40.18903,-36.45113 z', fill: '#cbcbcb' },
{ id: '#path4399', d: 'm 442.85003,197.52194 40.81199,24.66261 9.00391,-55.68954 z', fill: '#dda95d' },
{ id: '#path4401', d: 'm 444.11272,198.02702 4.37073,-71.02104 44.18248,39.48903 z', fill: '#eec16e' },
{ id: '#path4403', d: 'm 444.11272,198.02702 4.37073,-71.02104 -51.40925,60.9176 z', fill: '#e6b767' },
{ id: '#path4405', d: 'm 389.827,148.74131 58.65645,-21.73533 -51.40925,60.9176 z', fill: '#ecc171' },
{ id: '#path4407', d: 'm 389.827,148.74131 58.65645,-21.73533 -92.96036,-15.51097 z', fill: '#f2d392' },
{ id: '#path4409', d: 'm 389.827,148.74131 -72.05784,-1.73533 81.2387,42.85125 z', fill: '#bfbfbf' },
{ id: '#path4514', d: 'm 295.88281,209.35046 21.88635,-62.34448 -70.78926,73.6609 z', fill: '#b2b1b7' },
{ id: '#path4516', d: 'm 295.88281,209.35046 21.88635,-62.34448 34.26661,56.48831 z', fill: '#bfbfbf' },
{ id: '#path4518', d: 'm 397.90822,188.13726 -80.13906,-41.13128 34.26661,56.48831 z', fill: '#b2b1b7' },
{ id: '#path4520', d: 'm 397.90822,188.13726 -28.74384,48.18057 -17.12861,-32.82354 z', fill: '#6c677a' },
{ id: '#path4522', d: 'm 398.4133,187.12711 -30.67749,49.905 76.22385,-39.59873 z', fill: '#ddaa5e' },
{ id: '#path4524', d: 'm 413.06051,230.56367 -41.75327,4.32559 72.90495,-37.70842 z', fill: '#d19858' },
{ id: '#path4526', d: 'm 413.06051,230.56367 70.87874,-8.30132 -40.48467,-25.33405 z', fill: '#dea44a' },
{ id: '#path4528', d: 'm 411.81051,230.3851 72.12874,-8.12275 -51.59635,22.14312 z', fill: '#e1b156' },
{ id: '#path4548', d: 'm 443.36509,267.93931 40.57416,-45.67696 -51.59635,22.14312 z', fill: '#efc472' },
{ id: '#path4550', d: 'm 443.36509,267.93931 -66.32869,-1.94453 55.3065,-21.58931 z', fill: '#deaa5e' },
{ id: '#path4490', d: 'm 195.48234,305.86569 -24.85604,5.426 54.92503,-53.48195 z', fill: '#a4a1a4' },
{ id: '#path4701', d: 'm 223.33949,260.50855 -52.71319,50.78314 76.3536,-90.62481 z', fill: '#cccbcc' },
{ id: '#path4488', d: 'm 194.45424,306.13617 69.74348,-39.84448 -41.14639,-5.62481 z', fill: '#c3c3c6' },
{ id: '#path4703', d: 'm 221.95424,261.49332 42.24348,4.79837 -17.21782,-45.62481 z', fill: '#b2b1b7' },
{ id: '#path4705', d: 'm 295.88281,208.81474 -33.20032,57.72949 -15.70259,-45.87735 z', fill: '#cbcbcb' },
{ id: '#path4707', d: 'm 295.88281,208.63617 -33.76668,58.97948 49.86377,-34.80592 z', fill: '#adaea3' },
{ id: '#path4718', d: 'm 295.52567,208.63617 58.3149,-5.20163 -43.28924,30.80376 z', fill: '#a3a590' },
{ id: '#path4720', d: 'm 369.45424,234.35045 -16.6851,-30.20162 -44.00353,30.44661 z', fill: '#8a8893' },
{ id: '#path4722', d: 'm 369.45424,234.35045 -107.57796,33.01267 48.67505,-34.37482 z', fill: '#95939d' },
{ id: '#path4724', d: 'm 369.45424,234.35045 -107.9351,32.8341 47.42504,0.62519 z', fill: '#a1a0a4' },
{ id: '#path4726', d: 'm 369.45424,234.35045 -25.97082,33.72695 -35.96781,-0.62479 z', fill: '#ddba65' },
{ id: '#path4728', d: 'm 369.45424,234.35045 -25.61367,33.19124 35.46075,0.62521 z', fill: '#dbaa60' },
{ id: '#path4730', d: 'm 369.27567,234.17188 44.29441,-3.59448 -35.8759,35.0895 z', fill: '#deba66' },
{ id: '#path4732', d: 'm 433.02567,244.35045 -20.97082,-13.77305 -34.36067,35.0895 z', fill: '#eec16e' },
{ id: '#path4791', d: 'm 38.508233,405.87079 132.118067,-94.5791 -132.242894,85.64681 z', fill: '#a8a1b4' },
{ id: '#path4793', d: 'm 38.508233,405.87079 132.118067,-94.5791 25.59344,-6.27707 z', fill: '#b1b0b5' },
{ id: '#path4795', d: 'm 38.508233,405.87079 107.874407,-57.20345 50.84725,-44.66287 z', fill: '#8e8d93' },
{ id: '#path4806', d: 'm 225.38644,305.36061 -79.0038,43.30673 49.58456,-43.65272 z', fill: '#746f81' },
{ id: '#path4808', d: 'm 225.38644,305.36061 37.16374,-38.51563 -68.09821,38.16964 z', fill: '#bbbcae' },
{ id: '#path4810', d: 'm 225.38644,305.36061 37.16374,-38.51563 -6.22637,32.10873 z', fill: '#8a898f' },
{ id: '#path5485', d: 'm 277.47927,304.1001 -15.28623,-37.79083 -6.62684,32.64444 z', fill: '#999687' },
{ id: '#path4812', d: 'm 305.69356,311.42153 -43.50052,-45.11226 14.9803,37.64444 z', fill: '#a7a598' },
{ id: '#path4492', d: 'm 305.69356,311.42153 -2.2322,-24.37349 -42.03294,-21.22015 z', fill: '#cab653' },
{ id: '#path4814', d: 'm 305.69356,311.42153 -4.75758,-26.3938 51.57949,30.05779 z', fill: '#b0a25f' },
{ id: '#path4816', d: 'm 310.87957,264.9672 -48.32939,1.87778 40.55447,22.03784 z', fill: '#d19858' },
{ id: '#path4836', d: 'm 309.97402,265.2937 40.9645,50.0386 -49.63228,-27.59487 z', fill: '#ddba63' },
{ id: '#path4838', d: 'm 310.15259,266.05132 40.78593,49.28098 -6.44826,-48.37697 z', fill: '#e1a95e' },
{ id: '#path4840', d: 'm 379.73056,266.02067 -28.79204,49.31163 -6.98397,-48.1984 z', fill: '#e5b767' },
{ id: '#path4851', d: 'm 379.73056,265.66353 -28.79204,49.66877 27.86629,-8.29737 z', fill: '#aba067' },
{ id: '#path4853', d: 'm 378.65914,266.02067 27.83777,31.12889 -27.6921,9.88537 z', fill: '#cbb96e' },
{ id: '#path4855', d: 'm 377.23056,265.30639 29.26635,31.84317 37.67195,-29.7198 z', fill: '#edc269' },
{ id: '#path4895', d: 'm 365.83262,315.17767 -14.8941,0.15463 56.15056,-18.3989 z', fill: '#8a8894' },
{ id: '#path4897', d: 'm 365.83262,314.82053 -15.90425,-1.00346 49.91325,60.04998 z', fill: '#8a8894' },
{ id: '#path4921', d: 'm 365.83262,315.17767 39.21304,48.01177 -5.20404,10.67761 z', fill: '#b2b1b9' },
{ id: '#path4923', d: 'm 452.26119,375.17767 -48.28696,-12.88109 -4.13261,11.57047 z', fill: '#6d6776' },
{ id: '#path4925', d: 'm 373.68976,378.7491 18.32018,-13.95251 7.83168,9.07046 z', fill: '#6d6776' },
{ id: '#path4927', d: 'm 309.40405,317.32053 42.03955,-2.99838 -42.49484,-2.59796 z', fill: '#8a8894' },
{ id: '#path4929', d: 'm 309.22548,316.60624 15.17987,-0.78151 1.15055,50.00664 z', fill: '#8a8894' },
{ id: '#path4931', d: 'm 309.40405,317.32053 3.32019,58.54749 12.83166,-10.03669 z', fill: '#b2b1b7' },
{ id: '#path4933', d: 'm 367.97548,376.60624 -55.25124,-0.73822 12.83166,-10.03669 z', fill: '#6f6679' },
{ id: '#path4935', d: 'm 289.22548,379.9991 23.49876,-4.13108 -0.5612,-12.00098 z', fill: '#6f6679' },
{ id: '#path4604', d: 'm 52.987578,37.012422 0,-14.012422 14.012422,14.012422 z', fill: '#eec16e' },
{ id: '#path5200', d: 'm 67,23 0,14.1 -14.1,-14.1 z', fill: '#eec16e' }]];
var ts = [];
var curIndex = 0;
var timeId = null;
var slideTimeout = 7000;
var birdTexts = [
"The <b>great tit</b> (<i>Parus major</i>) is a passerine bird in the tit family Paridae.",
"The <b>Eurasian bullfinch</b> (<i>Pyrrhula pyrrhula</i>) is a small passerine bird in the finch family Fringillidae.",
"The <b>dunnock</b> (<i>Prunella modularis</i>) is a small passerine, or perching bird in the Prunellidae family.",
"The <b>rock dove</b> or <b>rock pigeon</b> (<i>Columba livia</i>) is a member of the birdfamily Columbidae.",
"The <b>northern mockingbird</b> (<i>Mimus polyglottos</i>) a bird in the family Mimidae."];
var birdTitles = ["Great tit", "Bullfinch", "Dunnock", "Dove", "Mockingbird"];
function showText(index) {
var slashText = birdTexts[index].replace(/[a-zA-Z0-9]/g, "/");
var element = document.querySelector(".bird-text__body");
element.innerHTML = birdTexts[index];
document.querySelector(".bird-text__title").textContent = birdTitles[index];
}
function show(index, withDelay) {
ts[index].length = 0;
birds[(index + 4) % 5 + 1].forEach(function (path, i) {
var delay = withDelay ? 10 * i : 0;
ts[index].push(
new anime({
targets: path.id,
d: {
value: path.d,
duration: 1000,
easing: "easeInOutQuad" },
fill: {
value: path.fill,
duration: 1000,
easing: "easeInOutQuad" },
delay: delay }));
});
showText(index);
}
function play(index) {
ts[index].forEach(function (a) {
a.play();
});
}
var svg = document.querySelector(".birds");
var count = birds[0].length;
birds[0].forEach(function (path, index) {
var newPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
svg.append(newPath);
newPath.setAttribute("id", path.id);
newPath.setAttribute("d", path.d);
newPath.setAttribute("style", "fill:" + path.fill);
});
ts.push([]);
ts.push([]);
ts.push([]);
ts.push([]);
ts.push([]);
setTimeout(() => {
document.querySelector(".bird-text__body").innerHTML = birdTexts[0];
document.querySelector(".bird-text__title").textContent = birdTitles[0];
}, 200);
function prev() {
curIndex--;
if (curIndex < 0) curIndex = 4;
}
function next() {
curIndex++;
curIndex %= 5;
}
function resetAnimations(index) {
ts.forEach(function (t) {
if (t)
t.forEach(function (a) {
a.pause();
});
});
show(index, false);
play(index);
curIndex = index;
clearTimeout(timeId);
timeId = setTimeout(slideshow, slideTimeout);
}
function restartAnimation(index) {
resetAnimations(index);
}
function restartAnimationPrev() {
prev();
resetAnimations(curIndex);
}
function restartAnimationNext() {
next();
resetAnimations(curIndex);
}
document.addEventListener(
"keydown",
function (event) {
if (event.keyCode >= 49 && event.keyCode <= 53) {
restartAnimation(event.keyCode - 49);
} else if (event.keyCode === 37) {
// left
restartAnimationPrev();
} else if (event.keyCode === 39) {
// right
restartAnimationNext();
}
},
false);
function advance() {
next();
show(curIndex, true);
play(curIndex);
}
function goTo(index) {
restartAnimation(index);
}
function slideshow() {
advance();
timeId = setTimeout(slideshow, slideTimeout);
}
timeId = setTimeout(slideshow, slideTimeout);
</script>
</body>
</html>
2. By Manu K
Made by Manu K. Cool JavaScript Slideshow Animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
.pagination {
position: absolute !important;
width: 100%;
text-align: center;
right: 0;
padding: 0 !important;
bottom: 30px;
z-index: 999;
}
.pagination__item {
cursor: pointer;
display: inline-block;
white-space: nowrap;
font-size: 0;
width: 10px;
height: 10px;
border: 1px solid #fff;
margin: 0 5px;
transition: 0.2s ease-in-out;
}
.pagination__item.is-current, .pagination__item:hover {
background-color: #fff;
}
.container {
position: relative;
margin: 0 auto;
}
@media (max-width: 699px) {
.container {
padding-right: 40px;
padding-left: 40px;
}
}
@media (min-width: 700px) and (max-width: 1599px) {
.container {
padding-right: 7.5rem;
padding-left: 7.5rem;
max-width: 140rem;
}
}
@media (min-width: 1600px) {
.container {
padding-right: 9.5625rem;
padding-left: 9.5625rem;
max-width: 144.125rem;
}
}
.background-absolute {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: center;
background-size: cover;
}
.slideshow {
position: relative;
color: #fff;
overflow: hidden;
min-height: 600px;
height: 100vh;
}
.slideshow h3,
.slideshow h1,
.slideshow h2 {
/*font-family: 'Montserrat', sans-serif;*/
font-family: "Lato", sans-serif;
text-transform: uppercase;
letter-spacing: 0.5em;
line-height: 2em;
}
.slideshow h1 {
font-size: 44px;
font-weight: 800;
}
.slideshow__slide {
visibility: hidden;
transition: visibility 0s 1.7s;
}
.slideshow__slide.is-current {
visibility: visible;
transition-delay: 0s;
}
@media (max-width: 699px) {
.slideshow .slideshow__slide {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@media (min-width: 700px) {
.slideshow .slideshow__slide {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
.slideshow__slide-background-load-wrap {
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transform: translate3d(0, 100%, 0);
overflow: hidden;
}
.is-animated .slideshow__slide-background-load-wrap {
transform: translate3d(0, 0, 0);
transition-delay: 0s;
}
.slideshow__slide.is-prev .slideshow__slide-background-parallax, .slideshow__slide.is-next .slideshow__slide-background-parallax, .slideshow__slide.is-prev-section .slideshow__slide-background-parallax, .slideshow__slide.is-next-section .slideshow__slide-background-parallax {
transform: none !important;
}
.slideshow__slide-background-load {
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
transform: translate3d(0, -50%, 0);
}
.is-animated .slideshow__slide-background-load {
transform: translate3d(0, 0, 0);
}
.slideshow__slide-background-wrap {
transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
transform: translate3d(0, 0, 0);
}
.slideshow__slide.is-prev .slideshow__slide-background-wrap {
transform: translate3d(0, -100%, 0);
}
.slideshow__slide.is-next .slideshow__slide-background-wrap {
transform: translate3d(0, 100%, 0);
}
.slideshow__slide.is-prev-section .slideshow__slide-background-wrap {
transform: translate3d(0, -100%, 0);
transition: none;
}
.slideshow__slide.is-next-section .slideshow__slide-background-wrap {
transform: translate3d(0, 100%, 0);
transition: none;
}
.slideshow__slide-background {
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s;
transform: scale(1);
overflow: hidden;
}
.slideshow__slide.is-prev .slideshow__slide-background, .slideshow__slide.is-next .slideshow__slide-background {
transform: scale(0.5);
transition-delay: 0s;
}
.slideshow__slide.is-prev-section .slideshow__slide-background, .slideshow__slide.is-next-section .slideshow__slide-background {
transform: scale(0.5);
transition-delay: 0s;
transition: none;
}
.slideshow__slide-image-wrap {
transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
transform: translate3d(0, 0, 0);
}
.slideshow__slide.is-prev .slideshow__slide-image-wrap {
transform: translate3d(0, 50%, 0);
}
.slideshow__slide-image {
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.5s;
transform: scale(1);
}
.slideshow__slide.is-prev .slideshow__slide-image, .slideshow__slide.is-next .slideshow__slide-image {
transform: scale(1.25);
transition-delay: 0s;
}
.slideshow__slide.is-prev-section .slideshow__slide-image, .slideshow__slide.is-next-section .slideshow__slide-image {
transform: scale(1.25);
transition-delay: 0s;
transition: none;
}
.slideshow__slide-image::before, .slideshow__slide-image::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.35;
}
.slideshow__slide-image::before {
background-color: rgba(255, 255, 255, 0.26);
}
.slideshow__slide-image::after {
background: linear-gradient(to top, transparent 0%, #fff 20%);
}
.slideshow__slide.is-prev .slideshow_container, .slideshow__slide.is-next .slideshow_container, .slideshow__slide.is-prev-section .slideshow_container, .slideshow__slide.is-next-section .slideshow_container {
transform: none !important;
}
.slideshow__slide-caption-text {
position: relative;
height: 100%;
padding-top: 10%;
transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
transform: translate3d(0, 0, 0);
}
.slideshow__slide.is-prev .slideshow__slide-caption-text {
transform: translate3d(-100%, -50%, 0);
}
.slideshow__slide.is-next .slideshow__slide-caption-text {
transform: translate3d(-100%, 10%, 0);
}
.slideshow__slide.is-prev-section .slideshow__slide-caption-text {
transform: translate3d(-100%, -50%, 0);
transition: none;
}
.slideshow__slide.is-next-section .slideshow__slide-caption-text {
transform: translate3d(-100%, 10%, 0);
transition: none;
}
.slideshow__slide-caption {
position: relative;
height: 100%;
transform: translate3d(-100%, 10%, 0);
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.is-animated .slideshow__slide-caption {
transform: translate3d(0, 0, 0);
}
.slideshow__slide-caption-title {
line-height: 1;
}
.slideshow__slide-caption-title.-full {
width: 100%;
}
@media (max-height: 500px) {
.slideshow__slide-caption-title {
margin-bottom: 0 !important;
}
}
@media (max-width: 699px) {
.slideshow__slide-caption-title {
font-size: 40px;
margin-bottom: 150px;
}
.slideshow.-full .slideshow__slide-caption-title {
margin-bottom: 30px;
}
}
@media (min-width: 700px) {
.slideshow__slide-caption-title {
font-size: 5.625rem;
margin-bottom: 1.25rem;
}
}
@media (min-width: 700px) and (max-width: 749px) {
.slideshow__slide-caption-title {
font-size: 4.375rem;
}
}
@media (min-width: 1600px) {
.slideshow__slide-caption-title {
font-size: 6.25rem;
}
}
.slideshow__slide-caption-subtitle {
display: inline-block;
padding: 1.875rem 0;
}
.slideshow__slide-caption-subtitle.-load {
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
transform: translate3d(0, 3.75rem, 0);
}
.is-animated .slideshow__slide-caption-subtitle.-load {
transform: translate3d(0, 0, 0);
}
body[data-route-option=prev-section] .slideshow__slide-caption-subtitle.-load, body[data-route-option=next-section] .slideshow__slide-caption-subtitle.-load {
transform: translate3d(0, 0, 0);
}
.slideshow__slide-caption-subtitle-label {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateZ(0);
display: inline-block;
}
.o-hsub.-link:hover .slideshow__slide-caption-subtitle-label,
.o-hsub-wrap:hover .slideshow__slide-caption-subtitle-label {
transform: translateX(20px);
}
/* OLD */
.c-header-home_heading {
line-height: 1;
}
.c-header-home_heading.-full {
width: 100%;
}
@media (max-height: 500px) {
.c-header-home_heading {
margin-bottom: 0 !important;
}
}
@media (max-width: 699px) {
.c-header-home_heading {
font-size: 40px;
margin-bottom: 150px;
}
.c-header-home.-full .c-header-home_heading {
margin-bottom: 30px;
}
}
@media (min-width: 700px) {
.c-header-home_heading {
font-size: 5.625rem;
margin-bottom: 1.25rem;
}
}
@media (min-width: 700px) and (max-width: 749px) {
.c-header-home_heading {
font-size: 4.375rem;
}
}
@media (min-width: 1600px) {
.c-header-home_heading {
font-size: 6.25rem;
}
}
.c-header-home_subheading {
display: inline-block;
padding: 1.875rem 0;
}
.c-header-home_subheading.-load {
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
transform: translate3d(0, 3.75rem, 0);
}
.is-loaded .c-header-home_subheading.-load {
transform: translate3d(0, 0, 0);
}
body[data-route-option=prev-section] .c-header-home_subheading.-load, body[data-route-option=next-section] .c-header-home_subheading.-load {
transform: translate3d(0, 0, 0);
}
.c-header-home_footer {
z-index: 3;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
.c-header-home_controls,
.c-header-home_buttons {
margin-left: 0;
letter-spacing: normal;
font-size: 0;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: translate3d(0, 100%, 0);
}
@media (max-width: 699px) {
.c-header-home_controls,
.c-header-home_buttons {
padding-bottom: 40px;
}
}
@media (min-width: 700px) {
.c-header-home_controls,
.c-header-home_buttons {
padding-bottom: 5.625rem;
}
}
@media (min-width: 700px) and (max-width: 749px) {
.c-header-home_controls,
.c-header-home_buttons {
padding-bottom: 3.75rem;
}
}
.is-loaded .c-header-home_controls,
.is-loaded .c-header-home_buttons {
transform: translate3d(0, 0, 0);
}
body[data-route-option=prev-section] .c-header-home_controls,
body[data-route-option=prev-section] .c-header-home_buttons {
transform: translate3d(0, 0, 0);
}
body[data-route-option=next-section] .c-header-home_controls,
body[data-route-option=next-section] .c-header-home_buttons {
transform: translate3d(0, 0, 0);
}
.c-header-home_controls {
transition-delay: 0.65s;
}
@media (min-width: 700px) {
.c-header-home_controls {
float: left;
}
}
.c-header-home_buttons {
transition-delay: 0.75s;
}
@media (max-width: 699px) {
.c-header-home_buttons {
margin-left: -20px;
margin-right: -20px;
}
}
@media (min-width: 1000px) {
.c-header-home_buttons {
float: right;
}
}
@media (max-width: 699px) {
.c-header-home_button {
width: 50% !important;
}
}
@media (min-width: 700px) {
.c-header-home_button {
width: 15.625rem;
}
}
button,
.c-header-filters_button,
.o-button {
display: inline-block;
overflow: visible;
margin: 0;
padding: 0;
outline: 0;
border: 0;
background: none;
color: inherit;
vertical-align: middle;
text-align: center;
text-decoration: none;
text-transform: none;
font: inherit;
line-height: normal;
cursor: pointer;
user-select: none;
}
button:hover,
.c-header-filters_button:hover,
.o-button:hover {
text-decoration: none;
}
@media (min-width: 1200px) {
body {
height: 100%;
}
}
@media (min-width: 1200px) {
.o-scroll {
height: 100%;
}
}
::-moz-selection {
background: #0084c0;
color: #fff;
}
img,
svg {
max-width: 100%;
}
a,
.o-link {
color: #1a0dab;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover,
.o-link:hover {
color: #13097c;
}
a.-normal,
.o-link.-normal {
color: currentColor;
text-decoration: none;
}
a.-normal:hover,
.o-link.-normal:hover {
text-decoration: underline;
}
a.-blue:hover,
.o-link.-blue:hover {
text-decoration: none;
color: #0084c0;
}
a.-hover,
.o-link.-hover {
position: relative;
text-decoration: none;
color: #fff;
}
a.-hover::after,
.o-link.-hover::after {
content: "";
position: absolute;
bottom: -1px;
right: 0;
left: 0;
border-bottom: 1px solid;
transform: scaleX(0);
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center left;
}
a.-hover:hover::after,
.o-link.-hover:hover::after {
transform: scaleX(1);
}
p {
margin: 0;
}
.o-wrap {
overflow: hidden;
}
.o-page.-anim {
transform: translate3d(0, 9.375rem, 0);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.is-loaded .o-page.-anim {
transform: translate3d(0, 0, 0);
}
.o-barba,
.o-barba_container {
height: 100%;
}
strong {
font-weight: 700;
}
.js-parallax {
transform: translateZ(0);
will-change: transform;
}
.scroll-content {
overflow: hidden;
}
.o-blockquote.-nomargin {
margin: 0;
}
.o-action-link {
display: block;
padding-top: 12.8125rem;
padding-bottom: 7.5rem;
text-align: center;
text-decoration: none;
font-weight: 700;
}
.o-action-link:hover {
color: #fff;
}
@media (max-width: 699px) {
.o-action-link {
font-size: 40px;
padding-top: 120px;
}
}
@media (max-width: 1199px) {
.o-action-link {
color: #1e1e22;
}
}
@media (min-width: 700px) {
.o-action-link {
font-size: 5.625rem;
}
}
@media (min-width: 1200px) {
.o-action-link {
color: #fff;
}
}
.o-action-link_label {
display: inline-block;
position: relative;
}
.o-action-link_label::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
border-bottom: 0.1875rem solid;
transform: scaleX(0);
transform-origin: center left;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.o-action-link:hover .o-action-link_label::after {
transform: scaleX(1);
}
.o-h,
h1,
.o-h1,
h2,
.o-h2,
h3,
.o-h3,
h4,
.o-h4,
h5,
.o-h5,
h6,
.o-h6 {
font-weight: 700;
margin-top: 0;
line-height: 1.1;
}
@media (max-width: 699px) {
h1,
.o-h1 {
font-size: 26px;
}
}
@media (min-width: 700px) {
h1,
.o-h1 {
font-size: 60px;
}
}
@media (min-width: 1600px) {
h1,
.o-h1 {
font-size: 4.375rem;
}
}
@media (max-width: 1599px) {
h2,
.o-h2 {
font-size: 1.5625rem;
}
}
@media (min-width: 1600px) {
h2,
.o-h2 {
font-size: 2.25rem;
}
}
h3,
.o-h3 {
font-size: 1.5625rem;
}
h4,
.o-h4 {
font-size: 1rem;
}
h5,
.o-h5 {
font-size: 0.8125rem;
}
h6,
.o-h6 {
font-size: 0.6875rem;
}
.o-hsub {
font-size: 0.75rem;
padding: 1.25rem 0;
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
}
.o-hsub::before {
content: "";
display: inline-block;
vertical-align: middle;
border-bottom: 1px solid;
width: 1.5rem;
background-color: #1e1e22;
margin-right: 1.125rem;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center left;
}
.o-hsub.-link {
color: #fff;
text-decoration: none;
}
.o-hsub.-link:hover::before {
transform: scaleX(1.5);
}
.o-hsub-wrap:hover .o-hsub.-link::before {
transform: scaleX(1.5);
}
.o-hsub.-link.-dark {
color: #1e1e22;
}
.o-hsub.-link.-dark:hover {
color: #1e1e22;
}
.o-hsub.-h {
vertical-align: middle;
}
@media (max-width: 699px) {
.o-hsub.-h {
display: block;
margin-top: 20px;
}
}
@media (min-width: 700px) {
.o-hsub.-h {
margin-left: 2.5rem;
}
}
.o-hsub_label {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateZ(0);
display: inline-block;
}
.o-hsub.-link:hover .o-hsub_label,
.o-hsub-wrap:hover .o-hsub_label {
transform: translateX(20px);
}
.is-loaded .o-loader {
visibility: hidden;
transition-delay: 0.6s;
}
.o-container {
position: relative;
margin: 0 auto;
}
@media (max-width: 699px) {
.o-container {
padding-right: 40px;
padding-left: 40px;
}
.o-container.-small {
padding-right: 20px;
padding-left: 20px;
}
}
@media (min-width: 700px) and (max-width: 1599px) {
.o-container {
padding-right: 7.5rem;
padding-left: 7.5rem;
max-width: 140rem;
}
}
@media (min-width: 1600px) {
.o-container {
padding-right: 9.5625rem;
padding-left: 9.5625rem;
max-width: 144.125rem;
}
}
.o-section {
position: relative;
}
.o-section.-offset {
margin-top: -9.375rem;
background-color: #f6f6f6;
}
.o-section.-padding {
padding-top: 7.5rem;
padding-bottom: 7.5rem;
}
.o-section.-padding-top {
padding-top: 7.5rem;
}
.o-section.-left {
margin-right: 15rem;
}
.o-section.-right {
margin-left: 15rem;
}
.o-section.-left-large {
margin-right: 22.5rem;
}
.o-section.-right.-padding {
padding-left: 9.5625rem;
}
@media (max-width: 699px) {
.o-section.-bottom {
padding-bottom: 60px;
}
}
@media (min-width: 700px) {
.o-section.-bottom {
padding-bottom: 7.5rem;
}
}
.o-section_image {
position: relative;
overflow: hidden;
}
.o-section_image.-small {
padding-bottom: 57.144%;
}
.o-section_image.-large {
padding-bottom: 55%;
}
.o-section_image.-padding-left {
margin-left: 7.5rem;
}
.o-section_image.-left {
margin-right: 15rem;
}
.o-section_image.-right {
margin-left: 15rem;
}
.o-section_image img {
width: 100%;
}
@media (max-width: 1599px) {
.o-section_image.-left {
margin-left: -7.5rem;
}
}
@media (min-width: 1600px) {
.o-section_image.-left {
margin-left: -9.5625rem;
}
}
@media (max-width: 1599px) {
.o-section_image.-right {
margin-right: -7.5rem;
}
}
@media (min-width: 1600px) {
.o-section_image.-right {
margin-right: -9.5625rem;
}
}
.o-grid {
margin-left: 0;
letter-spacing: normal;
font-size: 0;
}
.o-grid.-margin {
margin-left: -3.75rem;
}
.o-grid_item {
display: inline-block;
padding-left: 0;
width: 100%;
vertical-align: top;
font-size: 1rem;
}
@media (max-width: 699px) {
.o-grid_item.-button {
width: 100%;
}
}
@media (min-width: 700px) and (max-width: 999px) {
.o-grid_item.-button {
margin-bottom: 60px;
}
}
@media (min-width: 1000px) {
.o-grid_item.-button {
width: 18.75rem;
}
}
@media (max-width: 699px) {
.o-grid_item.-button-content {
margin-bottom: 30px;
}
}
@media (min-width: 700px) and (max-width: 999px) {
.o-grid_item.-button-content {
margin-bottom: 60px;
}
}
@media (min-width: 1000px) {
.o-grid_item.-button-content {
width: calc(100% - 18.75rem);
}
}
.o-grid.-margin .o-grid_item {
padding-left: 3.75rem;
}
@media (min-width: 700px) {
.o-grid_item.-half {
width: 50%;
}
}
@media (min-width: 700px) and (max-width: 1199px) {
.o-grid_item.-half.-large {
width: 100%;
}
}
@media (min-width: 700px) and (max-width: 999px) {
.o-grid_item.-half.-medium {
width: 100%;
}
}
@media (min-width: 700px) and (max-width: 1199px) {
.o-grid_item.-third {
width: 50%;
}
}
@media (min-width: 1200px) {
.o-grid_item.-third {
width: 33.3333333333%;
}
}
.o-form {
padding-bottom: 11.25rem;
}
@media (max-width: 699px) {
.o-form_item {
margin-bottom: 35px;
}
}
@media (min-width: 700px) {
.o-form_item {
margin-bottom: 2.9375rem;
}
}
.o-form_fieldset {
padding: 0;
margin: 0;
border: 0;
}
@media (max-width: 699px) {
.o-form_fieldset {
margin-bottom: 20px;
}
}
@media (min-width: 700px) {
.o-form_fieldset {
margin-bottom: 3.75rem;
}
}
.o-form_button {
text-align: right;
}
.o-label {
display: block;
height: 100%;
color: #b3b3b3;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.875rem;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 699px) {
.o-label {
font-size: 9px;
}
}
@media (min-width: 700px) {
.o-label {
font-size: 0.5625rem;
}
}
.o-input-wrap .o-label {
position: absolute;
bottom: 0;
left: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.o-input:focus ~ .o-label,
.o-select:focus ~ .o-label,
.o-textarea:focus ~ .o-label,
.o-label.is-active {
transform: translateY(-1.875rem);
}
.o-input.has-error ~ .o-label {
color: #cc3d3d;
}
.has-error.o-select ~ .o-label, .has-error.o-textarea ~ .o-label {
color: #cc3d3d;
}
.o-input-wrap {
position: relative;
}
.o-input,
.o-select,
.o-textarea {
padding: 0.875rem;
background-color: transparent;
border-bottom: 1px solid #b3b3b3;
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 699px) {
.o-input,
.o-select,
.o-textarea {
font-size: 14px;
}
}
@media (min-width: 700px) {
.o-input,
.o-select,
.o-textarea {
font-size: 0.875rem;
}
}
.o-input::-webkit-input-placeholder,
.o-select::-webkit-input-placeholder,
.o-textarea::-webkit-input-placeholder,
.o-input:-ms-input-placeholder,
.o-select:-ms-input-placeholder,
.o-textarea:-ms-input-placeholder,
.o-input::-ms-input-placeholder,
.o-select::-ms-input-placeholder,
.o-textarea::-ms-input-placeholder,
.o-input::placeholder,
.o-select::placeholder,
.o-textarea::placeholder {
color: #b3b3b3;
}
.o-input.-search {
background-color: transparent;
color: #fff;
font-weight: 700;
border-bottom: none;
}
.-search.o-select, .-search.o-textarea {
background-color: transparent;
color: #fff;
font-weight: 700;
border-bottom: none;
}
@media (max-width: 699px) {
.o-input.-search {
font-size: 26px;
}
.-search.o-select, .-search.o-textarea {
font-size: 26px;
}
}
@media (min-width: 700px) {
.o-input.-search {
font-size: 3.75rem;
}
.-search.o-select, .-search.o-textarea {
font-size: 3.75rem;
}
}
.o-input.-search::-webkit-input-placeholder {
color: #000;
}
.-search.o-select::-webkit-input-placeholder, .-search.o-textarea::-webkit-input-placeholder {
color: #000;
}
.o-input.-search:-ms-input-placeholder {
color: #000;
}
.-search.o-select:-ms-input-placeholder, .-search.o-textarea:-ms-input-placeholder {
color: #000;
}
.o-input.-search::-ms-input-placeholder {
color: #000;
}
.-search.o-select::-ms-input-placeholder, .-search.o-textarea::-ms-input-placeholder {
color: #000;
}
.o-input.-search::placeholder {
color: #000;
}
.-search.o-select::placeholder, .-search.o-textarea::placeholder {
color: #000;
}
.-mobile .o-input.-search {
font-size: 26px;
padding: 0;
}
.-mobile .-search.o-select, .-mobile .-search.o-textarea {
font-size: 26px;
padding: 0;
}
.o-input.-search.-light {
color: #1e1e22;
}
.-search.-light.o-select, .-search.-light.o-textarea {
color: #1e1e22;
}
.o-input.-search.-light::-webkit-input-placeholder {
color: #b3b3b3;
}
.-search.-light.o-select::-webkit-input-placeholder, .-search.-light.o-textarea::-webkit-input-placeholder {
color: #b3b3b3;
}
.o-input.-search.-light:-ms-input-placeholder {
color: #b3b3b3;
}
.-search.-light.o-select:-ms-input-placeholder, .-search.-light.o-textarea:-ms-input-placeholder {
color: #b3b3b3;
}
.o-input.-search.-light::-ms-input-placeholder {
color: #b3b3b3;
}
.-search.-light.o-select::-ms-input-placeholder, .-search.-light.o-textarea::-ms-input-placeholder {
color: #b3b3b3;
}
.o-input.-search.-light::placeholder {
color: #b3b3b3;
}
.-search.-light.o-select::placeholder, .-search.-light.o-textarea::placeholder {
color: #b3b3b3;
}
.o-input.has-error {
border-color: #cc3d3d;
}
.has-error.o-select, .has-error.o-textarea {
border-color: #cc3d3d;
}
.o-input:focus,
.o-select:focus,
.o-textarea:focus {
outline: none;
}
.o-input-line {
display: block;
position: absolute;
right: 0;
bottom: 0;
left: 0;
border-bottom: 1px solid #1e1e22;
transform: scaleX(0);
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center left;
}
.o-input:focus ~ .o-input-line,
.o-select:focus ~ .o-input-line,
.o-textarea:focus ~ .o-input-line {
transform: scaleX(1);
}
.o-input-lines::before, .o-input-lines::after {
content: "";
position: absolute;
bottom: 0;
border-right: 1px solid #b3b3b3;
height: 0.375rem;
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.o-input.has-error ~ .o-input-lines::before {
border-color: #cc3d3d;
}
.has-error.o-select ~ .o-input-lines::before, .has-error.o-textarea ~ .o-input-lines::before {
border-color: #cc3d3d;
}
.o-input.has-error ~ .o-input-lines::after {
border-color: #cc3d3d;
}
.has-error.o-select ~ .o-input-lines::after, .has-error.o-textarea ~ .o-input-lines::after {
border-color: #cc3d3d;
}
.o-input-lines::before {
left: 0;
transition-delay: 0.3s;
}
.o-input-lines::after {
right: 0;
}
.o-input:focus ~ .o-input-lines::before,
.o-select:focus ~ .o-input-lines::before,
.o-textarea:focus ~ .o-input-lines::before,
.o-input:focus ~ .o-input-lines::after,
.o-select:focus ~ .o-input-lines::after,
.o-textarea:focus ~ .o-input-lines::after {
border-color: #1e1e22;
}
.o-input:focus ~ .o-input-lines::before,
.o-select:focus ~ .o-input-lines::before,
.o-textarea:focus ~ .o-input-lines::before {
transition-delay: 0s;
}
.o-input:focus ~ .o-input-lines::after,
.o-select:focus ~ .o-input-lines::after,
.o-textarea:focus ~ .o-input-lines::after {
transition-delay: 0.3s;
}
.o-checkbox,
.o-radio {
position: absolute;
width: 0;
opacity: 0;
}
.o-checkbox:checked + .o-checkbox-label::after,
.o-radio:checked + .o-checkbox-label::after,
.o-checkbox:checked + .o-radio-label::after,
.o-radio:checked + .o-radio-label::after {
transform: scale(1);
}
.o-checkbox-label,
.o-radio-label {
position: relative;
display: inline-block;
margin-right: 0.5em;
line-height: 1.4;
margin-right: 4.0625rem;
cursor: pointer;
padding-top: 0.125rem;
}
@media (max-width: 699px) {
.o-checkbox-label,
.o-radio-label {
font-size: 12px;
padding-left: 27px;
}
}
@media (min-width: 700px) {
.o-checkbox-label,
.o-radio-label {
font-size: 0.875rem;
padding-left: 1.1875rem;
}
}
.o-checkbox-label.-uppsercase,
.-uppsercase.o-radio-label {
text-transform: uppercase;
}
.o-checkbox-label::before,
.o-radio-label::before,
.o-checkbox-label::after,
.o-radio-label::after {
position: absolute;
top: 50%;
left: 0;
display: inline-block;
padding: 0;
content: "";
border: 1px solid;
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 699px) {
.o-checkbox-label::before,
.o-radio-label::before,
.o-checkbox-label::after,
.o-radio-label::after {
width: 12px;
height: 12px;
margin-top: -6px;
}
}
@media (min-width: 700px) {
.o-checkbox-label::before,
.o-radio-label::before,
.o-checkbox-label::after,
.o-radio-label::after {
margin-top: -0.28125rem;
width: 0.5625rem;
height: 0.5625rem;
}
}
.o-checkbox-label::after,
.o-radio-label::after {
width: 0;
height: 0;
border-style: solid;
border-color: #1e1e22 transparent transparent transparent;
transform: scale(0);
transform-origin: top left;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 699px) {
.o-checkbox-label::after,
.o-radio-label::after {
border-width: 12px 12px 0 0;
}
}
@media (min-width: 700px) {
.o-checkbox-label::after,
.o-radio-label::after {
border-width: 0.5625rem 0.5625rem 0 0;
}
}
.o-checkbox-label.has-error::before,
.has-error.o-radio-label::before {
border-color: #cc3d3d;
}
.o-checkbox-label_text {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateZ(0);
}
.o-checkbox-label:hover .o-checkbox-label_text {
transform: translateX(0.3125rem);
}
.o-radio-label:hover .o-checkbox-label_text {
transform: translateX(0.3125rem);
}
.o-radio-label::before {
border-radius: 50%;
width: 12px;
height: 12px;
}
.o-radio-label::after {
border-radius: 50%;
width: 12px;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23424242%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
background-size: 6px;
background-position: center;
background-repeat: no-repeat;
transform: scale(0);
transform-origin: center;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
}
.o-radio:checked + .o-radio-label::after {
transform: scale(1);
}
.o-select {
position: relative;
z-index: 1;
padding-right: 2.5rem;
}
.o-select:focus {
border-bottom-color: #1e1e22;
}
.o-select-wrap {
position: relative;
}
.o-select-wrap::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
width: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23b3b3b3%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-size: 10px;
background-repeat: no-repeat;
content: "";
pointer-events: none;
}
.o-textarea-wrap {
position: relative;
}
.o-textarea {
min-height: 9.375rem;
}
.o-button {
position: relative;
display: inline-block;
text-align: center;
border: 1px solid #1e1e22;
white-space: nowrap;
font-size: 0;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.075s;
}
.o-button:before {
display: inline-block;
height: 100%;
content: "";
vertical-align: middle;
}
.o-button > * {
display: inline-block;
vertical-align: middle;
white-space: normal;
font-size: 1rem;
}
.o-button::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #1e1e22;
transform: scaleX(0);
transform-origin: center left;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.075s;
}
.o-button:hover {
color: #fff;
transition-delay: 0s;
}
.o-button:hover::after {
transform: scaleX(1);
transition-delay: 0s;
}
.o-button.-left::after {
transform-origin: center right;
}
.o-button.-white {
border-color: #fff;
}
.o-button.-white::after {
background-color: #fff;
}
.o-button.-white:hover {
color: #000;
}
.o-button.-form {
width: 11.25rem;
}
.o-button.-form:focus {
color: #fff;
transition-delay: 0s;
}
.o-button.-form:focus::after {
transform: scaleX(1);
transition-delay: 0s;
}
.o-button.-square {
padding: 0;
}
@media (max-width: 699px) {
.o-button {
height: 60px;
padding: 0 20px;
}
}
@media (min-width: 700px) {
.o-button {
height: 3.75rem;
padding: 0 1.875rem;
}
}
@media (min-width: 1200px) {
.o-button.-anim {
border-color: transparent;
}
}
@media (max-width: 699px) {
.o-button.-width {
width: 100%;
}
}
@media (min-width: 700px) {
.o-button.-width {
width: 15rem;
}
}
@media (max-width: 699px) {
.o-button.-square {
width: 60px;
}
}
@media (min-width: 700px) {
.o-button.-square {
width: 3.75rem;
}
}
.o-button-group .o-button + .o-button {
border-left: none;
}
@media (max-width: 699px) {
.o-button.-padding {
padding: 1.25rem;
}
}
@media (min-width: 700px) {
.o-button.-padding {
padding: 1.25rem 2.5rem;
}
}
.o-button_label {
display: inline-block;
position: relative;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(0);
line-height: 1.4;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
font-size: 0.75rem;
}
.o-button:hover .o-button_label {
transform: translateX(0.5rem);
transition-delay: 0.075s;
}
.o-button.-left:hover .o-button_label {
transform: translateX(-0.5rem);
}
.o-button.-square:hover .o-button_label {
transform: translateX(0.375rem);
}
.o-button.-left.-square:hover .o-button_label {
transform: translateX(-0.375rem);
}
.o-button-group {
margin-left: 0;
letter-spacing: normal;
font-size: 0;
}
.o-button_icon {
position: relative;
width: 1rem;
height: 1rem;
fill: #000;
transition: fill 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.075s;
}
.o-button.-white .o-button_icon {
fill: #fff;
}
.o-button:hover .o-button_icon {
fill: #f6f6f6;
transition-delay: 0s;
}
.o-button.-white:hover .o-button_icon {
fill: #1e1e22;
}
.o-button_line::before, .o-button_line::after {
content: "";
position: absolute;
background-color: #1e1e22;
}
.is-mobile .o-button_line::before, .is-mobile .o-button_line::after {
display: none;
}
.o-button_line::before {
width: 1px;
top: 0;
bottom: 0;
transform: scaleY(0);
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.o-button_line::after {
height: 1px;
right: 0;
left: 0;
transform: scaleX(0);
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.o-button_line:first-of-type::before {
left: 0;
transform-origin: center bottom;
}
.o-button_line:first-of-type::after {
top: 0;
transform-origin: center left;
}
.o-button_line:last-of-type::before {
right: 0;
transform-origin: center top;
}
.o-button_line:last-of-type::after {
bottom: 0;
transform-origin: center right;
}
.o-button.is-inview .o-button_line::before {
transform: scaleY(1);
}
.o-button.is-inview .o-button_line::after {
transform: scaleX(1);
}
.o-button.is-inview .o-button_line:first-of-type::before {
transition-delay: 1.15s;
}
.o-button.is-inview .o-button_line:first-of-type::after {
transition-delay: 0.1s;
}
.o-button.is-inview .o-button_line:last-of-type::before {
transition-delay: 0.55s;
}
.o-button.is-inview .o-button_line:last-of-type::after {
transition-delay: 0.7s;
}
.c-header-home_footer {
z-index: 3;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
.c-header-home_controls,
.c-header-home_buttons {
margin-left: 0;
letter-spacing: normal;
font-size: 0;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: translate3d(0, 100%, 0);
}
@media (max-width: 699px) {
.c-header-home_controls,
.c-header-home_buttons {
padding-bottom: 40px;
}
}
@media (min-width: 700px) {
.c-header-home_controls,
.c-header-home_buttons {
padding-bottom: 5.625rem;
}
}
@media (min-width: 700px) and (max-width: 749px) {
.c-header-home_controls,
.c-header-home_buttons {
padding-bottom: 3.75rem;
}
}
.is-loaded .c-header-home_controls,
.is-loaded .c-header-home_buttons {
transform: translate3d(0, 0, 0);
}
body[data-route-option=prev-section] .c-header-home_controls,
body[data-route-option=prev-section] .c-header-home_buttons {
transform: translate3d(0, 0, 0);
}
body[data-route-option=next-section] .c-header-home_controls,
body[data-route-option=next-section] .c-header-home_buttons {
transform: translate3d(0, 0, 0);
}
.c-header-home_controls {
transition-delay: 0.65s;
}
@media (min-width: 700px) {
.c-header-home_controls {
float: left;
}
}
.c-header-home_buttons {
transition-delay: 0.75s;
}
@media (max-width: 699px) {
.c-header-home_buttons {
margin-left: -20px;
margin-right: -20px;
}
}
@media (min-width: 1000px) {
.c-header-home_buttons {
float: right;
}
}
@media (max-width: 699px) {
.c-header-home_button {
width: 50% !important;
}
}
@media (min-width: 700px) {
.c-header-home_button {
width: 15.625rem;
}
}
.slideshow__slide-image.background-absolute {
width: 60%;
left: 40%;
}
h1.slideshow__slide-caption-title {
padding-left: 98px;
padding-right: 98px;
color: black;
}
.o-hsub.-link {
padding-left: 98px;
padding-right: 98px;
color: #000;
text-decoration: none;
}
button.slider-more-button {
width: 16rem;
height: 7rem;
position: absolute;
bottom: 0;
right: 0;
background-color: #fcc865;
color: #000;
text-transform: uppercase;
transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms;
transform: rotateZ(-20deg) translate3d(-20vh, 20vh, 0);
}
.is-animated .slider-more-button {
transform: rotateZ(0deg) translate3d(0, 0, 0);
}
p.slideshow__slide-caption-content {
padding-left: 98px;
padding-right: 98px;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.7);
cursor: pointer;
display: block;
font-family: Plain, sans-serif;
font-size: 14px;
font-weight: 200;
max-height: 218px;
letter-spacing: 0.28px;
line-height: 28px;
margin-top: 20px;
opacity: 0;
text-size-adjust: 100%;
transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94), transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94);
transform: translate3d(-100px, 0, 0);
max-width: 40%;
width: 40%;
}
.slideshow__slide.is-current p.slideshow__slide-caption-content {
opacity: 1;
transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms;
transform: translate3d(0, 0, 0);
}
span.slideshow__slide-caption-subtitle-label {
font-weight: 800;
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.side-nav {
display: none;
}
@media (min-width: 1024px) {
.side-nav {
display: block;
left: 0;
z-index: 2;
width: 100vh;
height: 5vw;
transform-origin: top;
display: flex;
align-items: center;
justify-content: center;
transform: translate3d(-100%, 10%, 0);
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.is-animated .side-nav {
transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 470ms;
transform: rotateZ(-90deg) translate3d(-390px, -50vh, 0);
}
.side-nav {
opacity: 1;
transition: opacity 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms, transform 700ms cubic-bezier(0.8, 0, 0.55, 0.94) 1470ms;
}
.side-nav ul {
list-style: none;
margin: 0 0;
padding-top: 0.3vw;
}
.side-nav li {
display: inline-block;
line-height: 0.9em;
margin: 0 15px;
padding-bottom: 8px;
border-bottom: 1px solid transparent;
cursor: pointer;
transition: opacity 400ms cubic-bezier(0.8, 0, 0.55, 0.94), border-color 400ms cubic-bezier(0.8, 0, 0.55, 0.94);
}
.side-nav .label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.3;
margin: 0 0;
color: #0a0c0d;
font-weight: 800;
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.side-nav[data-view=cover] li[data-view=cover] {
opacity: 1;
border-bottom: 1px solid #000;
}
.slideshow__slide.is-prev .side-nav {
transform: translate3d(-100%, -50%, 0);
}
.slideshow__slide.is-next .side-nav {
transform: translate3d(-100%, 10%, 0);
}
.slideshow__slide.is-prev-section .side-nav {
transform: translate3d(-100%, -50%, 0);
transition: none;
}
.slideshow__slide.is-next-section .side-nav {
transform: translate3d(-100%, 10%, 0);
transition: none;
}
}
/*end slider show*/
/*Floating button*/
.floating-btn {
font-family: "Roboto Thin", sans-serif;
border: none;
border-width: 0px;
margin: 0;
overflow: hidden;
border: none;
outline: none;
color: white;
font-size: 20px;
background: #F6EFE3;
position: relative;
padding: 14px;
width: 60px;
height: 60px;
border-radius: 50%;
box-shadow: 0 12px 42px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: 0.3s;
margin: 0.5em;
}
.floating-btn:hover {
background: #d2cbbf;
cursor: pointer;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.js-parallax.is-inview {
width: 100px;
}
button .floating-btn:focus {
outline: 0px;
outline: 0px;
}
.c-header-home_controls.-nomobile.o-button-group {
margin-left: 30%;
}
.divide {
margin-top: 50px;
margin-bottom: 50px;
}
.ripple {
overflow: hidden;
}
.ripple-effect {
position: absolute;
border-radius: 50%;
width: 50px;
height: 50px;
background: white;
animation: ripple-animation 2s;
}
.ripple > .o-button_icon {
top: 1px;
}
@keyframes ripple-animation {
from {
transform: scale(1);
opacity: 0.4;
}
to {
transform: scale(100);
opacity: 0;
}
}
/* End Floating Button */
/* nav bar*/
.navbar-container {
z-index: 1000;
background-color: #fff;
}
@media (max-width: 699px) {
.container {
padding-right: 0px;
padding-left: 0px;
}
}
@media (min-width: 700px) and (max-width: 1599px) {
.container {
padding-right: 0rem;
padding-left: 0rem;
max-width: 140rem;
}
}
</style>
</head>
<body>
<body>
<section class="slideshow" id="js-header">
<div class="slideshow__slide js-slider-home-slide is-current" data-slide="1">
<div class="slideshow__slide-background-parallax background-absolute js-parallax" data-speed="-1" data-position="top" data-target="#js-header">
<div class="slideshow__slide-background-load-wrap background-absolute">
<div class="slideshow__slide-background-load background-absolute">
<div class="slideshow__slide-background-wrap background-absolute">
<div class="slideshow__slide-background background-absolute">
<div class="slideshow__slide-image-wrap background-absolute">
<div class="slideshow__slide-image background-absolute" style="background-image:url("https://images.pexels.com/photos/227675/pexels-photo-227675.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="side-nav vh-for-mobile" data-view="cover">
<ul>
<li class="label" data-view="cover">Works</li>
</ul>
</div>
<div class="slideshow__slide-caption">
<div class="slideshow__slide-caption-text">
<div class="container js-parallax" data-speed="2" data-position="top" data-target="#js-header">
<h1 class="slideshow__slide-caption-title">Omnes enim iucundum</h1>
<p class="slideshow__slide-caption-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus odio sed leo fermentum, sed faucibus massa eleifend. Pellentesque ut auctor tellus. Vivamus eget vestibulum urna, sit amet aliquet augue.</p><a class="slideshow__slide-caption-subtitle -load o-hsub -link" href="#"><span class="slideshow__slide-caption-subtitle-label">See how</span></a>
</div>
</div>
</div>
</div>
<div class="slideshow__slide js-slider-home-slide is-next" data-slide="2">
<div class="slideshow__slide-background-parallax background-absolute js-parallax" data-speed="-1" data-position="top" data-target="#js-header">
<div class="slideshow__slide-background-load-wrap background-absolute">
<div class="slideshow__slide-background-load background-absolute">
<div class="slideshow__slide-background-wrap background-absolute">
<div class="slideshow__slide-background background-absolute">
<div class="slideshow__slide-image-wrap background-absolute">
<div class="slideshow__slide-image background-absolute" style="background-image: url('https://images.pexels.com/photos/415574/pexels-photo-415574.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="side-nav vh-for-mobile" data-view="cover">
<ul>
<li class="label" data-view="cover">Works</li>
</ul>
</div>
<div class="slideshow__slide-caption">
<div class="slideshow__slide-caption-text">
<div class="container js-parallax" data-speed="2" data-position="top" data-target="#js-header">
<h1 class="slideshow__slide-caption-title">Fortasse id optimum</h1>
<p class="slideshow__slide-caption-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus odio sed leo fermentum, sed faucibus massa eleifend. Pellentesque ut auctor tellus. Vivamus eget vestibulum urna, sit amet aliquet augue.</p><a class="slideshow__slide-caption-subtitle -load o-hsub -link" href="#"><span class="slideshow__slide-caption-subtitle-label">Learn more about</span></a>
</div>
</div>
</div>
</div>
<div class="slideshow__slide js-slider-home-slide is-prev" data-slide="3">
<div class="slideshow__slide-background-parallax background-absolute js-parallax" data-speed="-1" data-position="top" data-target="#js-header">
<div class="slideshow__slide-background-load-wrap background-absolute">
<div class="slideshow__slide-background-load background-absolute">
<div class="slideshow__slide-background-wrap background-absolute">
<div class="slideshow__slide-background background-absolute">
<div class="slideshow__slide-image-wrap background-absolute">
<div class="slideshow__slide-image background-absolute" style="background-image: url('https://images.pexels.com/photos/256150/pexels-photo-256150.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="side-nav vh-for-mobile" data-view="cover">
<ul>
<li class="label" data-view="cover">Works</li>
</ul>
</div>
<div class="slideshow__slide-caption">
<div class="slideshow__slide-caption-text">
<div class="container js-parallax" data-speed="2" data-position="top" data-target="#js-header">
<h1 class="slideshow__slide-caption-title">Solum praeterea formosum</h1>
<p class="slideshow__slide-caption-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus odio sed leo fermentum, sed faucibus massa eleifend. Pellentesque ut auctor tellus. Vivamus eget vestibulum urna, sit amet aliquet augue.</p><a class="slideshow__slide-caption-subtitle -load o-hsub -link" href="#"><span class="slideshow__slide-caption-subtitle-label">View More</span></a>
</div>
</div>
</div>
</div>
<div class="c-header-home_footer">
<div class="o-container">
<div class="c-header-home_controls -nomobile o-button-group">
<div class="js-parallax is-inview" data-speed="1" data-position="top" data-target="#js-header">
<button class="js-slider-home-next floating-btn ripple" type="button">
<svg class="o-button_icon" role="img">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-next"></use>
</svg>
</button>
<button class="js-slider-home-prev floating-btn ripple" type="button">
<svg class="o-button_icon" role="img">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-prev"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
</body>
<div>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="arrow-prev" viewbox="0 0 492 492" xmlns="http://www.w3.org/2000/svg">
<path d="M198.608 246.104L382.664 62.04c5.068-5.056 7.856-11.816 7.856-19.024 0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12C361.476 2.792 354.712 0 347.504 0s-13.964 2.792-19.028 7.864L109.328 227.008c-5.084 5.08-7.868 11.868-7.848 19.084-.02 7.248 2.76 14.028 7.848 19.112l218.944 218.932c5.064 5.072 11.82 7.864 19.032 7.864 7.208 0 13.964-2.792 19.032-7.864l16.124-16.12c10.492-10.492 10.492-27.572 0-38.06L198.608 246.104z"></path>
</symbol>
<symbol id="arrow-next" viewbox="0 0 492.004 492.004" xmlns="http://www.w3.org/2000/svg">
<path d="M382.678 226.804L163.73 7.86C158.666 2.792 151.906 0 144.698 0s-13.968 2.792-19.032 7.86l-16.124 16.12c-10.492 10.504-10.492 27.576 0 38.064L293.398 245.9l-184.06 184.06c-5.064 5.068-7.86 11.824-7.86 19.028 0 7.212 2.796 13.968 7.86 19.04l16.124 16.116c5.068 5.068 11.824 7.86 19.032 7.86s13.968-2.792 19.032-7.86L382.678 265c5.076-5.084 7.864-11.872 7.848-19.088.016-7.244-2.772-14.028-7.848-19.108z"></path>
</symbol>
</svg>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script>
var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();
function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}
var $window = $(window);
var $body = $('body');
var Slideshow = function () {
function Slideshow() {
var _this = this;
var userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
_classCallCheck(this, Slideshow);
var defaultOptions = {
$el: $('.slideshow'),
showArrows: false,
showPagination: true,
duration: 10000,
autoplay: true };
var options = Object.assign({}, defaultOptions, userOptions);
this.$el = options.$el;
this.maxSlide = this.$el.find($('.js-slider-home-slide')).length;
this.showArrows = this.maxSlide > 1 ? options.showArrows : false;
this.showPagination = options.showPagination;
this.currentSlide = 1;
this.isAnimating = false;
this.animationDuration = 1200;
this.autoplaySpeed = options.duration;
this.interval;
this.$controls = this.$el.find('.js-slider-home-button');
this.autoplay = this.maxSlide > 1 ? options.autoplay : false;
this.$el.on('click', '.js-slider-home-next', function (event) {
return _this.nextSlide();
});
this.$el.on('click', '.js-slider-home-prev', function (event) {
return _this.prevSlide();
});
this.$el.on('click', '.js-pagination-item', function (event) {
if (!_this.isAnimating) {
_this.preventClick();
_this.goToSlide(event.target.dataset.slide);
}
});
this.init();
}
_createClass(Slideshow, [{
key: 'init',
value: function init() {
this.goToSlide(1);
if (this.autoplay) {
this.startAutoplay();
}
if (this.showPagination) {
var paginationNumber = this.maxSlide;
var pagination = '<div class="pagination"><div class="container">';
for (var i = 0; i < this.maxSlide; i++) {
var item = '<span class="pagination__item js-pagination-item ' + (i === 0 ? 'is-current' : '') + '" data-slide=' + (i + 1) + '>' + (i + 1) + '</span>';
pagination = pagination + item;
}
pagination = pagination + '</div></div>';
this.$el.append(pagination);
}
} },
{
key: 'preventClick',
value: function preventClick() {
var _this2 = this;
this.isAnimating = true;
this.$controls.prop('disabled', true);
clearInterval(this.interval);
setTimeout(function () {
_this2.isAnimating = false;
_this2.$controls.prop('disabled', false);
if (_this2.autoplay) {
_this2.startAutoplay();
}
}, this.animationDuration);
} },
{
key: 'goToSlide',
value: function goToSlide(index) {
this.currentSlide = parseInt(index);
if (this.currentSlide > this.maxSlide) {
this.currentSlide = 1;
}
if (this.currentSlide === 0) {
this.currentSlide = this.maxSlide;
}
var newCurrent = this.$el.find('.js-slider-home-slide[data-slide="' + this.currentSlide + '"]');
var newPrev = this.currentSlide === 1 ? this.$el.find('.js-slider-home-slide').last() : newCurrent.prev('.js-slider-home-slide');
var newNext = this.currentSlide === this.maxSlide ? this.$el.find('.js-slider-home-slide').first() : newCurrent.next('.js-slider-home-slide');
this.$el.find('.js-slider-home-slide').removeClass('is-prev is-next is-current');
this.$el.find('.js-pagination-item').removeClass('is-current');
if (this.maxSlide > 1) {
newPrev.addClass('is-prev');
newNext.addClass('is-next');
}
newCurrent.addClass('is-current');
this.$el.find('.js-pagination-item[data-slide="' + this.currentSlide + '"]').addClass('is-current');
} },
{
key: 'nextSlide',
value: function nextSlide() {
this.preventClick();
this.goToSlide(this.currentSlide + 1);
} },
{
key: 'prevSlide',
value: function prevSlide() {
this.preventClick();
this.goToSlide(this.currentSlide - 1);
} },
{
key: 'startAutoplay',
value: function startAutoplay() {
var _this3 = this;
this.interval = setInterval(function () {
if (!_this3.isAnimating) {
_this3.nextSlide();
}
}, this.autoplaySpeed);
} },
{
key: 'destroy',
value: function destroy() {
this.$el.off();
} }]);
return Slideshow;
}();
(function () {
var loaded = false;
var maxLoad = 3000;
function load() {
var options = {
showPagination: true };
var slideShow = new Slideshow(options);
}
function addLoadClass() {
$body.addClass('is-loaded');
setTimeout(function () {
$body.addClass('is-animated');
}, 600);
}
$window.on('load', function () {
if (!loaded) {
loaded = true;
load();
}
});
setTimeout(function () {
if (!loaded) {
loaded = true;
load();
}
}, maxLoad);
addLoadClass();
})();
</script>
</body>
</html>3. By Sean Free
Made by Sean Free. Split-screen Slideshow. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #0c0c0c;
overflow: hidden;
}
#container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
#slides {
position: relative;
width: 100%;
height: 100%;
}
#slides .slide {
position: absolute;
display: flex;
width: 100%;
height: 100%;
}
#slides .slide .title {
position: absolute;
top: calc(50% - 0.5em);
left: 20px;
z-index: 2;
padding-top: 5px;
font-family: "Reem Kufi", sans-serif;
font-size: 5em;
color: white;
overflow: hidden;
}
#slides .slide .title .title-text {
display: block;
transform: translateY(1.2em);
transition: transform 1s ease-in-out;
}
#slides .slide .slide-partial {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 1s ease-in-out;
}
#slides .slide .slide-partial img {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 1s ease-in-out;
}
#slides .slide .slide-left {
top: 0;
left: 0;
transform: translateX(-100%);
}
#slides .slide .slide-left img {
top: 0;
right: 0;
-o-object-position: 100% 50%;
object-position: 100% 50%;
transform: translateX(50%);
}
#slides .slide .slide-right {
top: 0;
right: 0;
transform: translateX(100%);
transition-delay: 0.2s;
}
#slides .slide .slide-right img {
top: 0;
left: 0;
-o-object-position: 0% 50%;
object-position: 0% 50%;
transition-delay: 0.2s;
transform: translateX(-50%);
}
#slides .slide.active .title .title-text {
transform: translate(0);
transition-delay: 0.3s;
}
#slides .slide.active .slide-partial, #slides .slide.active .slide-partial img {
transform: translateX(0);
}
#slide-select {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-around;
font-family: "Reem Kufi", sans-serif;
font-size: 1.5em;
font-weight: lighter;
color: white;
}
#slide-select li {
position: relative;
cursor: pointer;
margin: 0 5px;
}
#slide-select li.prev:hover {
transform: translateX(-2px);
}
#slide-select li.next:hover {
transform: translateX(2px);
}
#slide-select .selector {
height: 14px;
width: 14px;
border: 2px solid white;
background-color: transparent;
transition: background-color 0.5s ease-in-out;
}
#slide-select .selector.current {
background-color: white;
}
.codepen-link {
position: absolute;
bottom: 20px;
right: 20px;
height: 40px;
width: 40px;
z-index: 10;
border-radius: 50%;
box-sizing: border-box;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
background-position: center center;
background-size: cover;
opacity: 0.5;
transition: all 0.25s;
}
.codepen-link:hover {
opacity: 0.8;
box-shadow: 0 2px 6px #0c0c0c;
}
</style>
</head>
<body>
<div id="container">
<ul id="slides">
<li class="slide">
<div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-left.jpg"/></div>
<div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/forest-right.jpg"/></div>
<h1 class="title"><span class="title-text">Forest</span></h1>
</li>
<li class="slide">
<div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/mountain-left.jpg"/></div>
<div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/mountain-right.jpg"/></div>
<h1 class="title"><span class="title-text">Mountain</span></h1>
</li>
<li class="slide">
<div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/ocean-left.jpg"/></div>
<div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/ocean-right.jpg"/></div>
<h1 class="title"><span class="title-text">Ocean</span></h1>
</li>
<li class="slide">
<div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/canyon-left.jpg"/></div>
<div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/canyon-right.jpg"/></div>
<h1 class="title"><span class="title-text">Canyon</span></h1>
</li>
<li class="slide">
<div class="slide-partial slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/lake-left.jpg"/></div>
<div class="slide-partial slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/lake-right.jpg"/></div>
<h1 class="title"><span class="title-text">Lake</span></h1>
</li>
</ul>
<ul id="slide-select">
<li class="btn prev"><</li>
<li class="selector"></li>
<li class="selector"></li>
<li class="selector"></li>
<li class="selector"></li>
<li class="selector"></li>
<li class="btn next">></li>
</ul>
</div><a class="codepen-link" href="https://www.codepen.io/seanfree" target="_blank"></a>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script>
let $slides, interval, $selectors, $btns, currentIndex, nextIndex;
let cycle = index => {
let $currentSlide, $nextSlide, $currentSelector, $nextSelector;
nextIndex = index !== undefined ? index : nextIndex;
$currentSlide = $($slides.get(currentIndex));
$currentSelector = $($selectors.get(currentIndex));
$nextSlide = $($slides.get(nextIndex));
$nextSelector = $($selectors.get(nextIndex));
$currentSlide.removeClass("active").css("z-index", "0");
$nextSlide.addClass("active").css("z-index", "1");
$currentSelector.removeClass("current");
$nextSelector.addClass("current");
currentIndex = index !== undefined ?
nextIndex :
currentIndex < $slides.length - 1 ?
currentIndex + 1 :
0;
nextIndex = currentIndex + 1 < $slides.length ? currentIndex + 1 : 0;
};
$(() => {
currentIndex = 0;
nextIndex = 1;
$slides = $(".slide");
$selectors = $(".selector");
$btns = $(".btn");
$slides.first().addClass("active");
$selectors.first().addClass("current");
interval = window.setInterval(cycle, 6000);
$selectors.on("click", e => {
let target = $selectors.index(e.target);
if (target !== currentIndex) {
window.clearInterval(interval);
cycle(target);
interval = window.setInterval(cycle, 6000);
}
});
$btns.on("click", e => {
window.clearInterval(interval);
if ($(e.target).hasClass("prev")) {
let target = currentIndex > 0 ? currentIndex - 1 : $slides.length - 1;
cycle(target);
} else if ($(e.target).hasClass("next")) {
cycle();
}
interval = window.setInterval(cycle, 6000);
});
});
</script>
</body>
</html>4. By SS
Made by SS ( Something Strange ). Slideshow Presentation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(https://fonts.googleapis.com/css?family=Roboto:500);
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
color: white;
font-family: "Roboto", sans-serif;
font-size: 16px;
line-height: 1em;
background-color: black;
}
#slides {
position: absolute;
top: 17%;
left: 10%;
right: 48%;
bottom: 17%;
overflow: hidden;
}
#slides ul {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#slides ul li {
position: relative;
width: 100%;
height: 100%;
}
#slides ul li:nth-child(1) {
background-color: #131313;
}
#slides ul li:nth-child(2) {
background-color: #262626;
}
#slides ul li:nth-child(3) {
background-color: #393939;
}
#slides ul li:nth-child(4) {
background-color: #262626;
}
#slides ul li:nth-child(5) {
background-color: #131313;
}
ul#steps {
position: absolute;
top: 50%;
left: 20%;
height: 110px;
margin-top: -55px;
}
ul#steps li {
position: relative;
height: 100%;
color: #999;
font-family: "Abril Fatface", serif;
transform: translate3d(0, 0, 0);
transition: color 666ms cubic-bezier(0.666, 0, 0.333, 1), font-size 666ms cubic-bezier(0.666, 0, 0.333, 1);
}
ul#steps li.active {
color: #bf482c;
font-size: 96px;
}
#titles {
position: absolute;
top: 50%;
left: 40%;
width: 60%;
height: 330px;
margin-top: -165px;
padding: 110px 0;
}
#titles ul {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#titles li {
position: relative;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transform: translate3d(0, 0, 0);
transition: visibility 0ms linear 666ms, opacity 666ms cubic-bezier(0.666, 0, 0.333, 1);
}
#titles li.active {
visibility: visible;
opacity: 1;
transition: visibility 0ms linear, opacity 666ms cubic-bezier(0.666, 0, 0.333, 1);
}
#titles li h2 {
height: 110px;
font-family: "Abril Fatface", serif;
font-size: 96px;
display: block;
}
#titles li p {
height: 110px;
color: #999;
}
.roller {
transform: translate3d(0, 0%, 0);
transition: transform 666ms cubic-bezier(0.666, 0, 0.333, 1);
}
</style>
</head>
<body>
<div id="slides">
<ul class="roller">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<ul id="steps" class="roller">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
<div id="titles">
<ul class="roller">
<li>
<h2>First</h2>
<h2>Slide</h2>
<p>First, use the up and down arrow keys to navigate.</p>
</li>
<li>
<h2>Second</h2>
<h2>Slide</h2>
<p>Secondly, use the up and down arrow keys to navigate.</p>
</li>
<li>
<h2>Third</h2>
<h2>Slide</h2>
<p>Thirdly, use the up and down arrow keys to navigate.</p>
</li>
<li>
<h2>Fourth</h2>
<h2>Slide</h2>
<p>Fourthly, use the up and down arrow keys to navigate.</p>
</li>
<li>
<h2>Fifth</h2>
<h2>Slide</h2>
<p>Lastly, use the up and down arrow keys to navigate.</p>
</li>
</ul>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script>
(function() {
var Application, Utils;
window.DEMO = window.DEMO || {};
Utils = {
'transform': Modernizr.prefixed('transform').replace(/([A-Z])/g, (str, m1) => {
return '-' + m1.toLowerCase();
}).replace(/^ms-/, '-ms-'),
'translate': (x, y) => {
var tran, vals;
tran = Modernizr.csstransforms3d ? 'translate3d' : 'translate';
vals = Modernizr.csstransforms3d ? '(' + x + ', ' + y + ', 0)' : '(' + x + ', ' + y + ')';
return tran + vals;
}
};
Application = class Application {
constructor() {
this.onKeyup = this.onKeyup.bind(this);
this.previous = this.previous.bind(this);
this.next = this.next.bind(this);
this.update = this.update.bind(this);
DEMO.utils = Utils;
this.$doc = $(document);
this.$roller = $('.roller');
this.$step = $('#steps li');
this.$title = $('#titles li');
this.min = 0;
this.max = this.$step.length - 1;
this.active_index = 0;
this.$step.eq(this.active_index).addClass('active');
this.$title.eq(this.active_index).addClass('active');
this.observe();
}
observe() {
return this.$doc.on('keyup', this.onKeyup);
}
onKeyup(e) {
var kc;
kc = e.keyCode;
if (kc === 38) {
e.preventDefault();
this.previous();
}
if (kc === 40) {
e.preventDefault();
return this.next();
}
}
previous() {
if (this.active_index > this.min) {
this.active_index--;
return this.update();
}
}
next() {
if (this.active_index < this.max) {
this.active_index++;
return this.update();
}
}
update() {
var y;
y = -(this.active_index * 100);
this.$roller.css(DEMO.utils.transform, DEMO.utils.translate(0, `${y}%`));
this.$step.removeClass('active');
this.$title.removeClass('active');
this.$step.eq(this.active_index).addClass('active');
return this.$title.eq(this.active_index).addClass('active');
}
};
$(function() {
return DEMO.instance = new Application();
});
}).call(this);
</script>
</body>
</html>5. By Mark Lee
Made by Mark Lee. Simple responsive slideshow made with HTML5, CSS3, and JavaScript. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
margin: 0;
padding: 0;
background: #111;
height: 100%;
}
.diy-slideshow{
position: relative;
display: block;
overflow: hidden;
}
figure{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
figcaption{
position: absolute;
font-family: sans-serif;
font-size: .8em;
bottom: .75em;
right: .35em;
padding: .25em;
color: #fff;
background: rgba(0,0,0, .25);
border-radius: 2px;
}
figcaption a{
color: #fff;
}
figure.show{
opacity: 1;
position: static;
transition: 1s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
p{
margin: 10px 20px;
color: #fff;
}
</style>
</head>
<body>
<div class="diy-slideshow">
<figure class="show">
<img src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg" width="100%" /><figcaption>"Snowying" by <a href="https://www.flickr.com/photos/fiddleoak/8511209344/">fiddleoak</a>.</figcaption>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg" width="100%" /><figcaption>"Starlight" by <a href="https://www.flickr.com/photos/chaoticmind75/10738494123/in/set-72157626146319517">ChaoticMind75</a>.</figcaption>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg" width="100%" /><figcaption>"Snowstorm" by <a href="https://www.flickr.com/photos/tylerbeaulawrence/8539457508/">Beaulawrence</a>.</figcaption>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg" width="100%" /><figcaption>"Misty winter afternoon" by <a href="https://www.flickr.com/photos/[email protected]/5277611659/">Bert Kaufmann</a>.</figcaption>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/good-morning.jpg" width="100%" /><figcaption>"Good Morning!" by <a href="https://www.flickr.com/photos/frank_wuestefeld/4306107546/">Frank Wuestefeld</a>.</figcaption>
</figure>
<figure>
<img src="http://themarklee.com/wp-content/uploads/2013/12/driving-home-for-christmas.jpg" width="100%" /><figcaption>"Driving home for Christmas" by <a href="https://www.flickr.com/photos/[email protected]/5292186041/">Bert Kaufmann</a>.</figcaption>
</figure>
<span class="prev">«</span>
<span class="next">»</span>
</div>
<p>An example of a pretty basic diy slideshow. This is the no-jQuery version.</p>
<script>
(function () {
var counter = 0, // to keep track of current slide
$items = document.querySelectorAll('.diy-slideshow figure'), // a collection of all of the slides, caching for performance
numItems = $items.length; // total number of slides
// this function is what cycles the slides, showing the next or previous slide and hiding all the others
var showCurrent = function () {
var itemToShow = Math.abs(counter % numItems); // uses remainder (aka modulo) operator to get the actual index of the element to show
// remove .show from whichever element currently has it
// http://stackoverflow.com/a/16053538/2006057
[].forEach.call($items, function (el) {
el.classList.remove('show');
});
// add .show to the one item that's supposed to have it
$items[itemToShow].classList.add('show');
};
// add click events to prev & next buttons
document.querySelector('.next').addEventListener('click', function () {
counter++;
showCurrent();
}, false);
document.querySelector('.prev').addEventListener('click', function () {
counter--;
showCurrent();
}, false);
})();
</script>
</body>
</html>6. By Riley Adair
Made by Riley Adair. Vanilla JavaScript Slideshow with CSS Transition. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Mono|Montserrat:800'>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100vh;
overflow: hidden;
background: #22222A;
font-family: 'Fira Mono', monospace;
-webkit-font-smoothing: antialiased;
font-size: .88rem;
color: #bdbdd5;
}
.content-width {
width: 86%;
height: 100vh;
margin: 0 auto;
}
.slideshow {
position: relative;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.slideshow-items {
position: relative;
width: 100%;
height: 300px;
}
.item {
position: absolute;
width: 100%;
height: auto;
}
.item-image-container {
position: relative;
width: 42%;
}
.item-image-container::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 101%;
height: 101%;
background: #22222A;
opacity: 0;
z-index: 1;
}
.item-image {
position: relative;
width: 100%;
height: auto;
opacity: 0;
display: block;
/* transition: property name | duration | timing-function | delay */
transition: opacity .3s ease-out .45s;
}
.item.active .item-image {
opacity: 1;
}
.item.active .item-image-container::before {
opacity: .8;
}
.item-description {
position: absolute;
top: 182px;
right: 0;
width: 50%;
padding-right: 4%;
line-height: 1.8;
}
/* Staggered Vertical Items ------------------------------------------------------*/
.item-header {
position: absolute;
top: 150px;
left: -1.8%;
z-index: 100;
}
.item-header .vertical-part {
margin: 0 -4px;
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: auto;
font-size: 7vw;
color: #fff;
}
.vertical-part {
overflow: hidden;
display: inline-block;
}
.vertical-part b {
display: inline-block;
transform: translateY(100%);
}
.item-header .vertical-part b {
transition: .5s;
}
.item-description .vertical-part b {
transition: .21s;
}
.item.active .item-header .vertical-part b {
transform: translateY(0);
}
.item.active .item-description .vertical-part b {
transform: translateY(0);
}
/* Controls ----------------------------------------------------------------------*/
.controls {
position: relative;
text-align: right;
z-index: 1000;
}
.controls ul {
list-style: none;
}
.controls ul li {
display: inline-block;
width: 10px;
height: 10px;
margin: 3px;
background:#bdbdd5;;
cursor: pointer;
}
.controls ul li.active {
background:#6a6a77;;
}
</style>
</head>
<body>
<div class="content-width">
<div class="slideshow">
<!-- Slideshow Items -->
<div class="slideshow-items">
<div class="item">
<div class="item-image-container">
<img class="item-image" src="https://i.pinimg.com/564x/23/a4/86/23a4860b8b70b1eb27f2791b97aaee8e.jpg" />
</div>
<!-- Staggered Header Elements -->
<div class="item-header">
<span class="vertical-part"><b>N</b></span>
<span class="vertical-part"><b>i</b></span>
<span class="vertical-part"><b>k</b></span>
<span class="vertical-part"><b>e</b></span>
</div>
<!-- Staggered Description Elements -->
<div class="item-description">
<span class="vertical-part">
<b>Nike</b>
</span>
<span class="vertical-part">
<b>ipsum</b>
</span>
<span class="vertical-part">
<b>dolor</b>
</span>
<span class="vertical-part">
<b>sit</b>
</span>
<span class="vertical-part">
<b>amet,</b>
</span>
<span class="vertical-part">
<b>consectetur</b>
</span>
<span class="vertical-part">
<b>adipiscing</b>
</span>
<span class="vertical-part">
<b>elit.</b>
</span>
<span class="vertical-part">
<b>Pellentesque</b>
</span>
<span class="vertical-part">
<b>elementum</b>
</span>
<span class="vertical-part">
<b>gravida</b>
</span>
<span class="vertical-part">
<b>ex</b>
</span>
<span class="vertical-part">
<b>at</b>
</span>
<span class="vertical-part">
<b>maximus.</b>
</span>
<span class="vertical-part">
<b>Nullam</b>
</span>
<span class="vertical-part">
<b>quis</b>
</span>
<span class="vertical-part">
<b>leo</b>
</span>
<span class="vertical-part">
<b>ipsum.</b>
</span>
<span class="vertical-part">
<b>Lorem</b>
</span>
<span class="vertical-part">
<b>ipsum</b>
</span>
<span class="vertical-part">
<b>Nam</b>
</span>
<span class="vertical-part">
<b>consectetur</b>
</span>
<span class="vertical-part">
<b>malesuada</b>
</span>
<span class="vertical-part">
<b>blandit.</b>
</span>
<span class="vertical-part">
<b>Mauris</b>
</span>
<span class="vertical-part">
<b>vulputate</b>
</span>
<span class="vertical-part">
<b>purus</b>
</span>
<span class="vertical-part">
<b>id</b>
</span>
<span class="vertical-part">
<b>dolor</b>
</span>
<span class="vertical-part">
<b>euismod</b>
</span>
<span class="vertical-part">
<b>varius.</b>
</span>
</div>
</div>
<div class="item">
<div class="item-image-container">
<img class="item-image" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/a1232e48702241.589f548dc6bee.jpg" />
</div>
<!-- Staggered Header Elements -->
<div class="item-header">
<span class="vertical-part"><b>S</b></span>
<span class="vertical-part"><b>p</b></span>
<span class="vertical-part"><b>o</b></span>
<span class="vertical-part"><b>t</b></span>
<span class="vertical-part"><b>i</b></span>
<span class="vertical-part"><b>f</b></span>
<span class="vertical-part"><b>y</b></span>
</div>
<!-- Staggered Description Elements -->
<div class="item-description">
<span class="vertical-part">
<b>Spotify</b>
</span>
<span class="vertical-part">
<b>ipsum</b>
</span>
<span class="vertical-part">
<b>dolor</b>
</span>
<span class="vertical-part">
<b>sit</b>
</span>
<span class="vertical-part">
<b>amet,</b>
</span>
<span class="vertical-part">
<b>consectetur</b>
</span>
<span class="vertical-part">
<b>adipiscing</b>
</span>
<span class="vertical-part">
<b>elit.</b>
</span>
<span class="vertical-part">
<b>Pellentesque</b>
</span>
<span class="vertical-part">
<b>elementum</b>
</span>
<span class="vertical-part">
<b>gravida</b>
</span>
<span class="vertical-part">
<b>ex</b>
</span>
<span class="vertical-part">
<b>at</b>
</span>
<span class="vertical-part">
<b>maximus.</b>
</span>
<span class="vertical-part">
<b>Nullam</b>
</span>
<span class="vertical-part">
<b>quis</b>
</span>
<span class="vertical-part">
<b>leo</b>
</span>
<span class="vertical-part">
<b>ipsum.</b>
</span>
<span class="vertical-part">
<b>Lorem</b>
</span>
<span class="vertical-part">
<b>ipsum</b>
</span>
<span class="vertical-part">
<b>Nam</b>
</span>
<span class="vertical-part">
<b>consectetur</b>
</span>
<span class="vertical-part">
<b>malesuada</b>
</span>
<span class="vertical-part">
<b>blandit.</b>
</span>
<span class="vertical-part">
<b>Mauris</b>
</span>
<span class="vertical-part">
<b>vulputate</b>
</span>
<span class="vertical-part">
<b>purus</b>
</span>
<span class="vertical-part">
<b>id</b>
</span>
<span class="vertical-part">
<b>dolor</b>
</span>
<span class="vertical-part">
<b>euismod</b>
</span>
<span class="vertical-part">
<b>varius.</b>
</span>
</div>
</div>
<div class="item">
<div class="item-image-container">
<img class="item-image" src="https://i2.wp.com/www.futuristarchitecture.com/wp-content/uploads/2016/11/fantastic-small-living-room-interior-idea-7.jpg?w=700&ssl=1" />
</div>
<!-- Staggered Header Elements -->
<div class="item-header">
<span class="vertical-part"><b>A</b></span>
<span class="vertical-part"><b>i</b></span>
<span class="vertical-part"><b>r</b></span>
<span class="vertical-part"><b>b</b></span>
<span class="vertical-part"><b>n</b></span>
<span class="vertical-part"><b>b</b></span>
</div>
<!-- Staggered Description Elements -->
<div class="item-description">
<span class="vertical-part">
<b>Airbnb</b>
</span>
<span class="vertical-part">
<b>ipsum</b>
</span>
<span class="vertical-part">
<b>dolor</b>
</span>
<span class="vertical-part">
<b>sit</b>
</span>
<span class="vertical-part">
<b>amet,</b>
</span>
<span class="vertical-part">
<b>consectetur</b>
</span>
<span class="vertical-part">
<b>adipiscing</b>
</span>
<span class="vertical-part">
<b>elit.</b>
</span>
<span class="vertical-part">
<b>Pellentesque</b>
</span>
<span class="vertical-part">
<b>elementum</b>
</span>
<span class="vertical-part">
<b>gravida</b>
</span>
<span class="vertical-part">
<b>ex</b>
</span>
<span class="vertical-part">
<b>at</b>
</span>
<span class="vertical-part">
<b>maximus.</b>
</span>
<span class="vertical-part">
<b>Nullam</b>
</span>
<span class="vertical-part">
<b>quis</b>
</span>
<span class="vertical-part">
<b>leo</b>
</span>
<span class="vertical-part">
<b>ipsum.</b>
</span>
<span class="vertical-part">
<b>Lorem</b>
</span>
<span class="vertical-part">
<b>ipsum</b>
</span>
<span class="vertical-part">
<b>Nam</b>
</span>
<span class="vertical-part">
<b>consectetur</b>
</span>
<span class="vertical-part">
<b>malesuada</b>
</span>
<span class="vertical-part">
<b>blandit.</b>
</span>
<span class="vertical-part">
<b>Mauris</b>
</span>
<span class="vertical-part">
<b>vulputate</b>
</span>
<span class="vertical-part">
<b>purus</b>
</span>
<span class="vertical-part">
<b>id</b>
</span>
<span class="vertical-part">
<b>dolor</b>
</span>
<span class="vertical-part">
<b>euismod</b>
</span>
<span class="vertical-part">
<b>varius.</b>
</span>
</div>
</div>
</div>
<div class="controls">
<ul>
<li class="control" data-index="0"></li>
<li class="control" data-index="1"></li>
<li class="control" data-index="2"></li>
</ul>
</div>
</div>
</div>
<script>
// Master DOManipulator v2 ------------------------------------------------------------
const items = document.querySelectorAll('.item'),
controls = document.querySelectorAll('.control'),
headerItems = document.querySelectorAll('.item-header'),
descriptionItems = document.querySelectorAll('.item-description'),
activeDelay = .76,
interval = 5000;
let current = 0;
const slider = {
init: () => {
controls.forEach(control => control.addEventListener('click', e => {slider.clickedControl(e);}));
controls[current].classList.add('active');
items[current].classList.add('active');
},
nextSlide: () => {// Increment current slide and add active class
slider.reset();
if (current === items.length - 1) current = -1; // Check if current slide is last in array
current++;
controls[current].classList.add('active');
items[current].classList.add('active');
slider.transitionDelay(headerItems);
slider.transitionDelay(descriptionItems);
},
clickedControl: e => {// Add active class to clicked control and corresponding slide
slider.reset();
clearInterval(intervalF);
const control = e.target,
dataIndex = Number(control.dataset.index);
control.classList.add('active');
items.forEach((item, index) => {
if (index === dataIndex) {// Add active class to corresponding slide
item.classList.add('active');
}
});
current = dataIndex; // Update current slide
slider.transitionDelay(headerItems);
slider.transitionDelay(descriptionItems);
intervalF = setInterval(slider.nextSlide, interval); // Fire that bad boi back up
},
reset: () => {// Remove active classes
items.forEach(item => item.classList.remove('active'));
controls.forEach(control => control.classList.remove('active'));
},
transitionDelay: items => {// Set incrementing css transition-delay for .item-header & .item-description, .vertical-part, b elements
let seconds;
items.forEach(item => {
const children = item.childNodes; // .vertical-part(s)
let count = 1,
delay;
item.classList.value === 'item-header' ? seconds = .015 : seconds = .007;
children.forEach(child => {// iterate through .vertical-part(s) and style b element
if (child.classList) {
item.parentNode.classList.contains('active') ? delay = count * seconds + activeDelay : delay = count * seconds;
child.firstElementChild.style.transitionDelay = `${delay}s`; // b element
count++;
}
});
});
} };
let intervalF = setInterval(slider.nextSlide, interval);
slider.init();
</script>
</body>
</html>7. By Bruno Carvalho
Made by Bruno Carvalho. Slideshow Parallax with TweenMax. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C400italic%2C600%2C700%2C700italic%7COswald%3A400%2C300%7CVollkorn%3A400%2C400italic'>
<style>
body {
font: 14px/2 "Open sans", sans-serif;
letter-spacing: 0.05em;
}
.btn {
display: inline-block;
padding: 13px 20px;
color: #fff;
text-decoration: none;
position: relative;
background: transparent;
border: 1px solid #e1e1e1;
font: 12px/1.2 "Oswald", sans-serif;
letter-spacing: 0.4em;
text-align: center;
text-indent: 2px;
text-transform: uppercase;
transition: color 0.1s linear 0.05s;
}
.btn::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #e1e1e1;
z-index: 1;
opacity: 0;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn::after {
transition: border 0.1s linear 0.05s;
}
.btn .btn-inner {
position: relative;
z-index: 2;
}
.btn:hover {
color: #373737;
transition: color 0.1s linear 0s;
}
.btn:hover::before {
top: 0;
height: 100%;
opacity: 1;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn:hover::after {
border-color: #373737;
transition: border 0.1s linear 0s;
}
.slideshow {
overflow: hidden;
position: relative;
width: 100%;
height: 100vh;
z-index: 1;
}
.slideshow .slideshow-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slideshow .slides {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.slideshow .slide {
display: none;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}
.slideshow .slide.is-active {
display: block;
}
.slideshow .slide.is-loaded {
opacity: 1;
}
.slideshow .slide .caption {
padding: 0 100px;
}
.slideshow .slide .image-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
z-index: 1;
background-size: cover;
image-rendering: optimizeQuality;
}
.slideshow .slide .image-container::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.slideshow .slide .image {
width: 100%;
width: 100%;
object-fit: cover;
height: 100%;
}
.slideshow .slide-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
color: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow .slide .title {
margin: 0 auto 15px;
max-width: 1000px;
font: 300 50px/1.2 "Oswald", sans-serif;
letter-spacing: 0.35em;
text-transform: uppercase;
}
.slideshow .slide .text {
margin: 0 auto;
max-width: 1000px;
font-size: 18px;
line-height: 1.4;
}
.slideshow .slide .btn {
margin: 15px 0 0;
border-color: #fff;
}
.slideshow .slide .btn::before {
background: #fff;
}
.slideshow .pagination {
position: absolute;
bottom: 35px;
left: 0;
width: 100%;
height: 12px;
cursor: default;
z-index: 2;
text-align: center;
}
.slideshow .pagination .item {
display: inline-block;
padding: 15px 5px;
position: relative;
width: 46px;
height: 32px;
cursor: pointer;
text-indent: -999em;
z-index: 1;
}
.slideshow .pagination .item + .page {
margin-left: -2px;
}
.slideshow .pagination .item::before {
content: "";
display: block;
position: absolute;
top: 15px;
left: 5px;
width: 36px;
height: 2px;
background: rgba(255, 255, 255, 0.5);
transition: background 0.2s ease;
}
.slideshow .pagination .item::after {
width: 0;
background: #fff;
z-index: 2;
transition: width 0.2s ease;
}
.slideshow .pagination .item:hover::before, .slideshow .pagination .item.is-active::before {
background-color: #fff;
}
.slideshow .arrows .arrow {
margin: -33px 0 0;
padding: 20px;
position: absolute;
top: 50%;
cursor: pointer;
z-index: 3;
}
.slideshow .arrows .prev {
left: 30px;
}
.slideshow .arrows .prev:hover .svg {
left: -10px;
}
.slideshow .arrows .next {
right: 30px;
}
.slideshow .arrows .next:hover .svg {
left: 10px;
}
.slideshow .arrows .svg {
position: relative;
left: 0;
width: 14px;
height: 26px;
fill: #fff;
transition: left 0.2s ease;
}
</style>
</head>
<body>
<main class="main-content">
<section class="slideshow">
<div class="slideshow-inner">
<div class="slides">
<div class="slide is-active ">
<div class="slide-content">
<div class="caption">
<div class="title">Slide title 1</div>
<div class="text">
<p>Slide description 1</p>
</div>
<a href="#" class="btn">
<span class="btn-inner">Learn More</span>
</a>
</div>
</div>
<div class="image-container">
<img src="https://www.alixbdanthenay.fr/wp-content/uploads/2015/07/Indispensable-1.jpg" alt="" class="image" />
</div>
</div>
<div class="slide">
<div class="slide-content">
<div class="caption">
<div class="title">Slide title 2</div>
<div class="text">
<p>Slide description 2</p>
</div>
<a href="#" class="btn">
<span class="btn-inner">Learn More</span>
</a>
</div>
</div>
<div class="image-container">
<img src="https://www.alixbdanthenay.fr/wp-content/uploads/2015/07/Indispensable-4-1.jpg" alt="" class="image" />
</div>
</div>
<div class="slide">
<div class="slide-content">
<div class="caption">
<div class="title">Slide title 3</div>
<div class="text">
<p>Slide description 3</p>
</div>
<a href="#" class="btn">
<span class="btn-inner">Learn More</span>
</a>
</div>
</div>
<div class="image-container">
<img src="https://www.alixbdanthenay.fr/wp-content/uploads/2016/11/11.jpg" alt="" class="image" />
</div>
</div>
<div class="slide">
<div class="slide-content">
<div class="caption">
<div class="title">Slide title 4</div>
<div class="text">
<p>Slide description 4</p>
</div>
<a href="#" class="btn">
<span class="btn-inner">Learn More</span>
</a>
</div>
</div>
<div class="image-container">
<img src="https://www.alixbdanthenay.fr/wp-content/uploads/2016/11/20mars17-sans-typo.jpg" alt="" class="image" />
</div>
</div>
</div>
<div class="pagination">
<div class="item is-active">
<span class="icon">1</span>
</div>
<div class="item">
<span class="icon">2</span>
</div>
<div class="item">
<span class="icon">3</span>
</div>
<div class="item">
<span class="icon">4</span>
</div>
</div>
<div class="arrows">
<div class="arrow prev">
<span class="svg svg-arrow-left">
<svg version="1.1" id="svg4-Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="26px" viewBox="0 0 14 26" enable-background="new 0 0 14 26" xml:space="preserve"> <path d="M13,26c-0.256,0-0.512-0.098-0.707-0.293l-12-12c-0.391-0.391-0.391-1.023,0-1.414l12-12c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414L2.414,13l11.293,11.293c0.391,0.391,0.391,1.023,0,1.414C13.512,25.902,13.256,26,13,26z"/> </svg>
<span class="alt sr-only"></span>
</span>
</div>
<div class="arrow next">
<span class="svg svg-arrow-right">
<svg version="1.1" id="svg5-Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="26px" viewBox="0 0 14 26" enable-background="new 0 0 14 26" xml:space="preserve"> <path d="M1,0c0.256,0,0.512,0.098,0.707,0.293l12,12c0.391,0.391,0.391,1.023,0,1.414l-12,12c-0.391,0.391-1.023,0.391-1.414,0s-0.391-1.023,0-1.414L11.586,13L0.293,1.707c-0.391-0.391-0.391-1.023,0-1.414C0.488,0.098,0.744,0,1,0z"/> </svg>
<span class="alt sr-only"></span>
</span>
</div>
</div>
</div>
</section>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script>
var slideshowDuration = 4000;
var slideshow = $('.main-content .slideshow');
function slideshowSwitch(slideshow, index, auto) {
if (slideshow.data('wait')) return;
var slides = slideshow.find('.slide');
var pages = slideshow.find('.pagination');
var activeSlide = slides.filter('.is-active');
var activeSlideImage = activeSlide.find('.image-container');
var newSlide = slides.eq(index);
var newSlideImage = newSlide.find('.image-container');
var newSlideContent = newSlide.find('.slide-content');
var newSlideElements = newSlide.find('.caption > *');
if (newSlide.is(activeSlide)) return;
newSlide.addClass('is-new');
var timeout = slideshow.data('timeout');
clearTimeout(timeout);
slideshow.data('wait', true);
var transition = slideshow.attr('data-transition');
if (transition == 'fade') {
newSlide.css({
display: 'block',
zIndex: 2 });
newSlideImage.css({
opacity: 0 });
TweenMax.to(newSlideImage, 1, {
alpha: 1,
onComplete: function () {
newSlide.addClass('is-active').removeClass('is-new');
activeSlide.removeClass('is-active');
newSlide.css({ display: '', zIndex: '' });
newSlideImage.css({ opacity: '' });
slideshow.find('.pagination').trigger('check');
slideshow.data('wait', false);
if (auto) {
timeout = setTimeout(function () {
slideshowNext(slideshow, false, true);
}, slideshowDuration);
slideshow.data('timeout', timeout);}} });
} else {
if (newSlide.index() > activeSlide.index()) {
var newSlideRight = 0;
var newSlideLeft = 'auto';
var newSlideImageRight = -slideshow.width() / 8;
var newSlideImageLeft = 'auto';
var newSlideImageToRight = 0;
var newSlideImageToLeft = 'auto';
var newSlideContentLeft = 'auto';
var newSlideContentRight = 0;
var activeSlideImageLeft = -slideshow.width() / 4;
} else {
var newSlideRight = '';
var newSlideLeft = 0;
var newSlideImageRight = 'auto';
var newSlideImageLeft = -slideshow.width() / 8;
var newSlideImageToRight = '';
var newSlideImageToLeft = 0;
var newSlideContentLeft = 0;
var newSlideContentRight = 'auto';
var activeSlideImageLeft = slideshow.width() / 4;
}
newSlide.css({
display: 'block',
width: 0,
right: newSlideRight,
left: newSlideLeft,
zIndex: 2 });
newSlideImage.css({
width: slideshow.width(),
right: newSlideImageRight,
left: newSlideImageLeft });
newSlideContent.css({
width: slideshow.width(),
left: newSlideContentLeft,
right: newSlideContentRight });
activeSlideImage.css({
left: 0 });
TweenMax.set(newSlideElements, { y: 20, force3D: true });
TweenMax.to(activeSlideImage, 1, {
left: activeSlideImageLeft,
ease: Power3.easeInOut });
TweenMax.to(newSlide, 1, {
width: slideshow.width(),
ease: Power3.easeInOut });
TweenMax.to(newSlideImage, 1, {
right: newSlideImageToRight,
left: newSlideImageToLeft,
ease: Power3.easeInOut });
TweenMax.staggerFromTo(newSlideElements, 0.8, { alpha: 0, y: 60 }, { alpha: 1, y: 0, ease: Power3.easeOut, force3D: true, delay: 0.6 }, 0.1, function () {
newSlide.addClass('is-active').removeClass('is-new');
activeSlide.removeClass('is-active');
newSlide.css({
display: '',
width: '',
left: '',
zIndex: '' });
newSlideImage.css({
width: '',
right: '',
left: '' });
newSlideContent.css({
width: '',
left: '' });
newSlideElements.css({
opacity: '',
transform: '' });
activeSlideImage.css({
left: '' });
slideshow.find('.pagination').trigger('check');
slideshow.data('wait', false);
if (auto) {
timeout = setTimeout(function () {
slideshowNext(slideshow, false, true);
}, slideshowDuration);
slideshow.data('timeout', timeout);
}
});
}
}
function slideshowNext(slideshow, previous, auto) {
var slides = slideshow.find('.slide');
var activeSlide = slides.filter('.is-active');
var newSlide = null;
if (previous) {
newSlide = activeSlide.prev('.slide');
if (newSlide.length === 0) {
newSlide = slides.last();
}
} else {
newSlide = activeSlide.next('.slide');
if (newSlide.length == 0)
newSlide = slides.filter('.slide').first();
}
slideshowSwitch(slideshow, newSlide.index(), auto);
}
function homeSlideshowParallax() {
var scrollTop = $(window).scrollTop();
if (scrollTop > windowHeight) return;
var inner = slideshow.find('.slideshow-inner');
var newHeight = windowHeight - scrollTop / 2;
var newTop = scrollTop * 0.8;
inner.css({
transform: 'translateY(' + newTop + 'px)', height: newHeight });
}
$(document).ready(function () {
$('.slide').addClass('is-loaded');
$('.slideshow .arrows .arrow').on('click', function () {
slideshowNext($(this).closest('.slideshow'), $(this).hasClass('prev'));
});
$('.slideshow .pagination .item').on('click', function () {
slideshowSwitch($(this).closest('.slideshow'), $(this).index());
});
$('.slideshow .pagination').on('check', function () {
var slideshow = $(this).closest('.slideshow');
var pages = $(this).find('.item');
var index = slideshow.find('.slides .is-active').index();
pages.removeClass('is-active');
pages.eq(index).addClass('is-active');
});
var timeout = setTimeout(function () {
slideshowNext(slideshow, false, true);
}, slideshowDuration);
slideshow.data('timeout', timeout);
});
if ($('.main-content .slideshow').length > 1) {
$(window).on('scroll', homeSlideshowParallax);
}
</script>
</body>
</html>8. By Nikolas Payne
Made by Nikolas Payne. Nautilus Slideshow. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: black;
font-family: roboto;
}
.container {
display: flex;
flex-direction: row;
}
.container section.forward {
flex-grow: 1;
cursor: pointer;
}
.container section.back {
flex-grow: 1;
cursor: pointer;
background: #52F9D4;
background: #eeeeee;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.nautilus {
background: #ddd;
position: relative;
min-width: 161.8034vh;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}
.nautilus > div {
position: absolute;
z-index: 900;
transition: all 400ms ease-out;
-webkit-animation: genie 400ms forwards ease-out;
animation: genie 400ms forwards ease-out;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
width: 9.016986vh;
height: 5.5728vh;
left: 114.59055442vh;
top: 70.820377901vh;
opacity: 0;
}
.nautilus > div:nth-child(1) {
opacity: 1;
width: 100vh;
height: 100vh;
top: 0;
left: 0;
background-color: #52F9D4;
z-index: 999;
}
.nautilus > div:nth-child(2) {
opacity: 1;
width: 61.8034vh;
height: 61.8034vh;
top: 0vh;
left: 100vh;
background-color: #51E3C2;
z-index: 998;
}
.nautilus > div:nth-child(3) {
opacity: 1;
width: 38.19783669vh;
height: 38.19783669vh;
top: 61.8034vh;
left: 123.60615331vh;
background-color: #53C7AD;
z-index: 997;
}
.nautilus > div:nth-child(4) {
opacity: 1;
width: 23.60778717vh;
height: 23.60778717vh;
top: 76.39221283vh;
left: 100vh;
background-color: #51AF9A;
z-index: 996;
}
.nautilus > div:nth-child(5) {
opacity: 1;
height: 14.59055442vh;
width: 14.59055442vh;
top: 61.8034vh;
left: 100vh;
background: #4D9686;
z-index: 995;
}
.nautilus > div:nth-child(6) {
opacity: 1;
height: 9.016986vh;
width: 9.016986vh;
top: 61.8034vh;
left: 114.59055442vh;
background: #498376;
z-index: 994;
}
.nautilus > div:nth-child(7) {
opacity: 1;
width: 9.016986vh;
height: 5.5728vh;
left: 114.59055442vh;
top: 70.820377901vh;
z-index: 993;
}
@-webkit-keyframes genie {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes genie {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
button {
position: absolute;
top: 0;
left: 0;
height: 60px;
width: 200px;
}
.column {
padding: 1rem;
color: #333;
}
.column h1, .column h2, .column h3, .column h4 {
font-weight: 300;
}
.column h1 {
font-size: 48px;
}
.column h2 {
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<section class="nautilus">
<div style="background: url('http://d8559fa83407ca590c9c-26c3b154822345d9dde0204930c49e9c.r68.cf1.rackcdn.com/2860546_a1e73ae4_m.jpeg') center center / cover no-repeat ">
</div>
<div style="background: url('http://www.youthedesigner.com/wp-content/uploads/2013/02/37.jpg') center center / cover no-repeat "></div>
<div style="background: url('http://i.kinja-img.com/gawker-media/image/upload/s--vl1wPe4w--/c_scale,fl_progressive,q_80,w_800/18ioy0rbeb5dxjpg.jpg') center center / cover no-repeat "></div>
<div style="background: url('http://worksdesigngroup.com/wp-content/uploads/2014/01/105855_2_600.jpeg') center center / cover no-repeat "></div>
<div style="background: url('https://founterior.com/wp-content/uploads/2014/02/lamp-product-design-Port-by-Alexander-Taylor.jpg') center center / cover no-repeat "></div>
<div style="background: url('https://hovercraftdoggy.files.wordpress.com/2012/04/tumblr_lwbkwwuxjo1qdixcio2_1280.jpg') center center / cover no-repeat "></div>
<div style="background: url('https://assets.yellowtrace.com.au/wp-content/uploads/2012/02/yellowtrace_Hanging-Clock-by-Lucas-Peet-Design_01.jpg') center center / cover no-repeat "></div>
</section>
<section class="back">
<div class="column">
<h1>Nautilus Slideshow</h1>
<h2>Click Here</h2>
</div>
</section>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
var interval = 500;
var slide;
$('section.back').click(function () {
var slide = $('.nautilus div:last-child').remove();
$('.nautilus').prepend(slide);
});
</script>
</body>
</html>9. By Fabio Ottaviani
Made by Fabio Ottaviani. Slick Slideshow with blur effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css'>
<style>
body, html {
height: 100%;
background: #000;
overflow: hidden;
}
.slideshow {
position: relative;
height: 100%;
z-index: 1;
}
/*----------------------------------------
Slider 1
----------------------------------------*/
.slider {
height: 100%;
overflow: hidden;
}
.slider .item {
overflow: hidden;
position: relative;
height: 100%;
}
.slider .item img {
width: auto;
height: 100%;
position: relative;
z-index: 1;
left: 50%;
transform: translateX(-50%) scale(1.4);
opacity: 0.4;
filter: blur(50px) saturate(3);
}
/*----------------------------------------
Slider 2
----------------------------------------*/
.slider-2 {
position: absolute;
z-index: 11;
top: 50%;
left: 50%;
width: 50%;
height: 0%;
padding-bottom: 35%;
transform: translate(-50%, -50%);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.slider-2:before {
content: "";
position: absolute;
left: -1%;
bottom: -1%;
width: 102%;
height: 50%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
z-index: 1;
pointer-events: none;
}
.slider-2 .item {
height: 0;
padding-bottom: 16%;
transform: scale(1.02);
background: #333;
}
.slider-2 .item.slick-active {
z-index: 10;
}
.slider-2 .item img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
height: 100%;
width: auto;
opacity: 1;
filter: none;
}
.slider-2 .slick-dots {
bottom: 15px;
z-index: 1;
text-align: center;
position: absolute;
padding: 0;
left: 0;
right: 0;
margin: 0 auto;
}
.slider-2 .slick-dots li {
display: inline;
margin: 0;
padding: 0;
}
.slider-2 .slick-dots li button {
border: none;
background: none;
text-indent: -9999px;
font-size: 0;
width: 20px;
height: 20px;
outline: none;
position: relative;
z-index: 1;
cursor: pointer;
}
.slider-2 .slick-dots li button:before {
content: "";
width: 4px;
height: 4px;
background: #fff;
border-radius: 4px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.7;
transition: all 0.5s ease-out;
}
.slider-2 .slick-dots li.slick-active button:before {
transform: translate(-50%, -50%) scale(1.4);
opacity: 1;
}
/*----------------------------------------
Arrows
----------------------------------------*/
.slick-arrow {
position: absolute;
z-index: 10;
left: 10px;
top: 50%;
transform: translateY(-50%);
border: none;
background: none;
cursor: pointer;
font-size: 0;
outline: none;
width: 40px;
height: 40px;
}
.slick-arrow:before {
content: "";
width: 30px;
height: 30px;
background-color: #fff;
-webkit-mask-image: url(http://cdn.flaticon.com/svg/22/22086.svg);
mask-image: url(http://cdn.flaticon.com/svg/22/22086.svg);
display: block;
opacity: 0.5;
transition: all 0.5s ease-out;
}
.slick-arrow.slick-next {
left: auto;
right: 10px;
}
.slick-arrow.slick-next:before {
transform: rotate(180deg);
}
.slick-arrow:hover:before {
opacity: 1;
}
</style>
</head>
<body>
<div class="slideshow">
<div class="slider slider-1">
<div class="item">
<img src="https://images.unsplash.com/photo-1465935343323-d742334bcbda?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1474861644511-0f2775ae97cc?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
</div>
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js'></script>
<script>
function slideshow() {
// clone
$('.slider-1').clone().removeClass('slider-1').addClass('slider-2').insertAfter($('.slider'));
// set first
$('.slider-1').slick({
draggable: false,
dots: false,
infinite: true,
responsive: true,
asNavFor: '.slider-2',
touchThreshold: 20,
speed: 1000,
fade: true });
// set second
$('.slider-2').slick({
dots: true,
infinite: true,
responsive: true,
asNavFor: '.slider-1',
arrows: false,
speed: 1000,
easing: 'easeInOutQuart' });
}
$(function () {
slideshow();
setTimeout(function () {
$('.slider-1 .slick-next').click();
}, 1000);
});
</script>
</body>
</html>
10. By Fabio Ottaviani
Another Slideshow by Fabio Ottaviani. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
<style>
body,
html {
height: 100%;
background: #110101;
font-family: "Roboto", sans-serif;
overflow: hidden;
}
.slideshow {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.slideshow .slider {
width: 100vw;
height: 100vw;
z-index: 2;
}
.slideshow .slider * {
outline: none;
}
.slideshow .slider .item {
height: 100vh;
width: 100vw;
position: relative;
overflow: hidden;
border: none;
}
.slideshow .slider .item .text {
display: none;
}
.slideshow .slider .item img {
min-width: 101%;
min-height: 101%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slideshow .slick-dots {
position: fixed;
z-index: 100;
width: 40px;
height: auto;
bottom: auto;
top: 50%;
right: 0;
transform: translateY(-50%);
left: auto;
color: #fff;
display: block;
}
.slideshow .slick-dots li {
display: block;
width: 100%;
height: auto;
}
.slideshow .slick-dots li button {
position: relative;
width: 20px;
height: 15px;
text-align: center;
}
.slideshow .slick-dots li button:before {
content: "";
background: #fff;
color: #fff;
height: 2px;
width: 20px;
border-radius: 0;
position: absolute;
top: 50%;
right: 0;
left: auto;
transform: translateY(-50%);
transition: all 0.3s ease-in-out;
opacity: 0.6;
}
.slideshow .slick-dots li.slick-active button:before {
width: 40px;
opacity: 1;
}
.slideshow.slideshow-right {
left: 0;
z-index: 1;
width: 50vw;
pointer-events: none;
}
.slideshow.slideshow-right .slider {
left: 0;
position: absolute;
}
.slideshow-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
font-size: 80px;
width: 100vw;
text-align: center;
color: #fff;
font-family: "Roboto Condensed", sans-serif;
font-weight: 100;
pointer-events: none;
text-transform: uppercase;
letter-spacing: 20px;
line-height: 0.8;
}
@media (max-width: 767px) {
.slideshow-text {
font-size: 40px;
}
}
.the-most {
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
width: 50vw;
max-width: 200px;
padding: 10px;
}
.the-most img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="split-slideshow">
<div class="slideshow">
<div class="slider">
<div class="item">
<img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-2.jpg" />
</div>
<div class="item">
<img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-3.jpg" />
</div>
<div class="item">
<img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-4.jpg" />
</div>
<div class="item">
<img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-1.jpg" />
</div>
</div>
</div>
<div class="slideshow-text">
<div class="item">Canyon</div>
<div class="item">Desert</div>
<div class="item">Erosion</div>
<div class="item">Shape</div>
</div>
</div>
<a class="the-most" target="_blank" href="https://codepen.io/2017/popular/pens/10/">
<img src="https://raw.githubusercontent.com/supahfunk/supah-codepen/master/themost-2017.png">
</a>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
<script>
var $slider = $('.slideshow .slider'),
maxItems = $('.item', $slider).length,
dragging = false,
tracking,
rightTracking;
$sliderRight = $('.slideshow').clone().addClass('slideshow-right').appendTo($('.split-slideshow'));
rightItems = $('.item', $sliderRight).toArray();
reverseItems = rightItems.reverse();
$('.slider', $sliderRight).html('');
for (i = 0; i < maxItems; i++) {if (window.CP.shouldStopExecution(0)) break;
$(reverseItems[i]).appendTo($('.slider', $sliderRight));
}window.CP.exitedLoop(0);
$slider.addClass('slideshow-left');
$('.slideshow-left').slick({
vertical: true,
verticalSwiping: true,
arrows: false,
infinite: true,
dots: true,
speed: 1000,
cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)' }).
on('beforeChange', function (event, slick, currentSlide, nextSlide) {
if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {
$('.slideshow-right .slider').slick('slickGoTo', -1);
$('.slideshow-text').slick('slickGoTo', maxItems);
} else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {
$('.slideshow-right .slider').slick('slickGoTo', maxItems);
$('.slideshow-text').slick('slickGoTo', -1);
} else {
$('.slideshow-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide);
$('.slideshow-text').slick('slickGoTo', nextSlide);
}
}).on("mousewheel", function (event) {
event.preventDefault();
if (event.deltaX > 0 || event.deltaY < 0) {
$(this).slick('slickNext');
} else if (event.deltaX < 0 || event.deltaY > 0) {
$(this).slick('slickPrev');
};
}).on('mousedown touchstart', function () {
dragging = true;
tracking = $('.slick-track', $slider).css('transform');
tracking = parseInt(tracking.split(',')[5]);
rightTracking = $('.slideshow-right .slick-track').css('transform');
rightTracking = parseInt(rightTracking.split(',')[5]);
}).on('mousemove touchmove', function () {
if (dragging) {
newTracking = $('.slideshow-left .slick-track').css('transform');
newTracking = parseInt(newTracking.split(',')[5]);
diffTracking = newTracking - tracking;
$('.slideshow-right .slick-track').css({ 'transform': 'matrix(1, 0, 0, 1, 0, ' + (rightTracking - diffTracking) + ')' });
}
}).on('mouseleave touchend mouseup', function () {
dragging = false;
});
$('.slideshow-right .slider').slick({
swipe: false,
vertical: true,
arrows: false,
infinite: true,
speed: 950,
cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
initialSlide: maxItems - 1 });
$('.slideshow-text').slick({
swipe: false,
vertical: true,
arrows: false,
infinite: true,
speed: 900,
cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)' });
</script>
</body>
</html>11. By Arden
Made by Arden. Greensock animated slideshow. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://use.typekit.net/vms5sey.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
background-color: #000;
font-family: "industry";
}
.slideShow {
height: 100%;
width: 75%;
min-width: 750px;
margin: 0 auto;
overflow: visible;
}
.slideShow__container {
height: 100%;
width: 100%;
list-style: none;
display: block;
margin: 0;
padding: 0;
white-space: nowrap;
font-size: 0;
line-height: 0;
position: relative;
}
.slideShow__slide {
height: 100%;
width: 100%;
display: inline-block;
position: relative;
}
.slideShow__image {
display: block;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
position: relative;
transform: scale(0.8);
}
.slideShow__image::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.slideShow__titleWrap {
font-size: 1rem;
position: absolute;
left: 4rem;
bottom: 4rem;
padding-bottom: 2rem;
padding-left: 2rem;
color: #fff;
}
.slideShow__slideTitle {
font-weight: 300;
z-index: 500;
color: #fff;
font-size: 5em;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1;
margin: 0 0 0.5rem;
opacity: 0;
}
.slideShow__slideSubTitle {
font-size: 1.5em;
text-transform: uppercase;
font-family: sans-serif;
padding-left: 0.5rem;
font-weight: 300;
letter-spacing: 1px;
opacity: 0;
}
.slideShow__next, .slideShow__prev {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 5em;
line-height: 1em;
color: #fff;
}
.slideShow__next i, .slideShow__prev i {
display: block;
float: left;
}
.slideShow__next {
right: 1rem;
cursor: pointer;
}
.slideShow__prev {
left: 1rem;
cursor: pointer;
transition: opacity 0.3s ease;
transform-origin: center;
}
.slideShow__prev.is-inactive {
opacity: 0.3;
cursor: default;
}
</style>
</head>
<body>
<div class="slideShow">
<ul class="slideShow__container">
<li class="slideShow__slide">
<figure class="slideShow__image" style="background-image:url(https://c2.staticflickr.com/8/7668/17188829572_53e8c45aec_h.jpg);"></figure>
<div class="slideShow__titleWrap">
<h2 class="slideShow__slideTitle">Barichara</h2>
<div class="slideShow__slideSubTitle">La Abuelita</div>
</div>
</li>
<li class="slideShow__slide">
<figure class="slideShow__image" style="background-image:url(https://c2.staticflickr.com/8/7595/16575563694_5259f740ed_k.jpg);"></figure>
<div class="slideShow__titleWrap">
<h2 class="slideShow__slideTitle">Tayrona</h2>
<div class="slideShow__slideSubTitle">La playa</div>
</div>
</li>
<li class="slideShow__slide">
<figure class="slideShow__image" style="background-image:url(https://c2.staticflickr.com/8/7723/17172064766_edf36b7b51_k.jpg);"></figure>
<div class="slideShow__titleWrap">
<h2 class="slideShow__slideTitle">Santa Marta</h2>
<div class="slideShow__slideSubTitle">El Burro</div>
</div>
</li>
<li class="slideShow__slide">
<figure class="slideShow__image" style="background-image:url(https://c1.staticflickr.com/9/8714/17164716126_5494165d77_k.jpg);"></figure>
<div class="slideShow__titleWrap">
<h2 class="slideShow__slideTitle">Salento</h2>
<div class="slideShow__slideSubTitle">La vista</div>
</div>
</li>
</ul>
<div class="slideShow__next"><i class="fa fa-angle-right"></i></div>
<div class="slideShow__prev"><i class="fa fa-angle-left"></i></div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js'></script>
<script>
// Debounce
function debounce(a, b, c) {var d;return function () {var e = this,f = arguments;clearTimeout(d), d = setTimeout(function () {d = null, c || a.apply(e, f);}, b), c && !d && a.apply(e, f);};}
var SlideShow = function () {
var
slider,
slide,
nextButton,
prevButton,
slideAmount,
sliderWidth,
title,
subTitle,
clickCounter,
slideCounter;
var _init = function () {
slider = document.getElementsByClassName('slideShow__container')[0];
slide = document.getElementsByClassName('slideShow__slide');
slideAmount = slide.length;
nextButton = document.getElementsByClassName('slideShow__next')[0];
prevButton = document.getElementsByClassName('slideShow__prev')[0];
title = document.getElementsByClassName('slideShow__slideTitle');
subTitle = document.getElementsByClassName('slideShow__slideSubTitle');
sliderWidth = parseInt(getComputedStyle(slider).width);
clickCounter = 0;
slideCounter = 0;
_eventHandlers();
_navButtons();
_animateSlideIn(slideCounter);
};
var _eventHandlers = function () {
nextButton.addEventListener('click', _slideNext, false);
prevButton.addEventListener('click', _slidePrev, false);
window.addEventListener('resize', _resize, false);
};
var _navButtons = function () {
if (clickCounter === 0) {
prevButton.classList.add('is-inactive');
} else {
prevButton.classList.remove('is-inactive');
}
};
var _slideNext = function () {
clickCounter++;
slideCounter = clickCounter - 1;
if (clickCounter >= slideAmount) {
clickCounter = 0;
slideCounter = slideAmount - 1;
}
var tl = new TimelineLite();
tl.
add(_animateSlideOut(slideCounter)).
to(slider, .9, { x: -clickCounter * sliderWidth, ease: Power2.easeOut }).
add(_animateSlideIn(clickCounter));
_navButtons();
};
var _slidePrev = function () {
if (clickCounter > 0) {
clickCounter--;
// _getPreviousSlide(clickCounter +1)
var tl = new TimelineLite();
tl.
add(_animateSlideOut(clickCounter + 1)).
to(slider, .9, { x: '+=' + sliderWidth, ease: Power2.easeOut }, '-=0.2').
add(_animateSlideIn(clickCounter));
}
_navButtons();
};
var _animateSlideIn = function (index) {
var currentSlide = slide[index];
var title = currentSlide.children[1].children[0];
var subTitle = currentSlide.children[1].children[1];
var image = currentSlide.children[0];
var splitTitle = new SplitText(title);
var revertTitle = function () {
splitTitle.revert();
};
TweenLite.set(title, { perspective: 400 });
var tl = new TimelineLite({ onComplete: revertTitle });
tl.
set(title, { opacity: 1 }).
staggerFrom(splitTitle.chars, 0.8, {
opacity: 0,
scale: 0,
y: 80,
rotationX: 180,
transformOrigin: "0% 50% -50",
ease: Back.easeOut },
0.03).
fromTo(subTitle, 0.6, { y: 50, opacity: 0 }, { y: 0, opacity: 1 }, '-=0.3').
to(image, 0.4, { scale: 1, ease: Power2.easeOut }, '-=0.6');
return tl;
};
var _animateSlideOut = function (index) {
var currentSlide = slide[index];
var title = currentSlide.children[1].children[0];
var subTitle = currentSlide.children[1].children[1];
var image = currentSlide.children[0];
var tl = new TimelineLite();
tl.
to(title, 0.3, { opacity: 0 }).
to(subTitle, 0.3, { y: 50, opacity: 0 }, '-=0.3').
to(image, 0.4, { scale: 0.8, ease: Power2.easeIn }, '-=0.3');
return tl;
};
var _resize = debounce(function () {
sliderWidth = parseInt(getComputedStyle(slider).width);
sliderOffset = sliderWidth * clickCounter;
slider.style.transform = 'matrix(1, 0, 0, 1, -' + sliderOffset + ', 0)';
}, 50);
return {
init: _init };
}();
SlideShow.init();
</script>
</body>
</html>