CodePen Embed - SliderSD-Perspective


   
    <div class="scene">
        <div class="level level-1 active">
            <div class="rotater">
                <div class="elem active">
                    <div class="inner inner-1">
                        <img class="bg1-top"
                            src="https://static.tildacdn.com/tild6362-3366-4036-b832-353462353436/Rectangle_298.png"
                            alt="img">
                        <div class="bg1-color">
                            <h2 class="h2-slide">Цифровизация <br>пространств</h2>
                            <h3 class="h3-slide">Высокотехнологичные<br>решения в традиционных<br>отраслях бизнеса</h3>
                            <img class="absolute-img"
                            src="https://static.tildacdn.com/tild6562-6163-4734-b261-376138313432/Mask_group_4.svg"
                            alt="img">

                        </div>

                       

                        

                    </div>
                </div>
                <div class="elem">
                    <div class="inner inner-2">
                        <img class="bg1-top2"
                            src="https://static.tildacdn.com/tild3664-6662-4034-b734-373965616630/KIM_4768.jpg"
                            alt="img">
                        <div class="bg1-color2">
                            <h2 class="h2-slide2">Инновационные<br>технологии</h2>
                            <h3 class="h3-slide2">Только самые передовые<br>и новые технологические<br>решения для
                                вашего
                                бизнеса</h3>
                      
                        </div>
                    </div>
                </div>
                <div class="elem">
                    <div class="inner inner-3">
                        <img class="bg1-top"
                            src="https://static.tildacdn.com/tild6139-3665-4830-a561-643465646431/KIM_4688.jpg"
                            alt="img">
                        <div class="bg1-color">
                            <h2 class="h2-slide">Интерактивное<br>взаимодействие</h2>
                            <h3 class="h3-slide">Новшества, позволяющие<br>прочувствовать пространство<br>в
                                полноразмерном масштабе</h3>
                        </div>
                    </div>
                </div>
                <div class="elem">
                    <div class="inner inner-4">
                        <img class="bg1-top2" id="bg1-top"
                            src="https://static.tildacdn.com/tild3831-3830-4435-a436-626265616232/IMG_9698.jpg"
                            alt="img">
                        <div class="bg1-color2">
                            <h2 class="h2-slide2">За цифровизацией<br>стоит будущее</h2>
                            <h3 class="h3-slide2">Мы идем в ногу со временем<br>и одни из первых применяем<br>современные технологии</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <img id=flower class="move1" src="https://static.tildacdn.com/tild3864-3566-4163-b434-653562613061/-_1.png" alt="img">
    <a href="http://art-space.pro/projects" class="btn-slide" target="_blank">Смотреть проекты</a>

    <div class="nav-bot">
        <span class="nav-bot__btn left" id="left"></span>
        <span class="nav-bot__btn right"></span>
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="/main.js"></script>

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/
@font-face {
    font-family: 'Micra';
    src: url('https://static.tildacdn.com/tild3462-6536-4262-b330-383763663761/Micra.woff') format('woff');
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: 'Geometria';
    src: url('https://static.tildacdn.com/tild3135-3831-4438-b730-336232613165/GeometriaRegular.woff') format('woff');
    font-weight: 400;
    font-style: normal
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Micra', arial;
}

html,
body {
    height: 100%;
    overflow: hidden;
}
a{
    text-decoration: none;
}
@media (max-width: 992px) {

    html,
    body {
        font-size: 50%;
    }
}

body {
    background-image: url("https://static.tildacdn.com/tild6465-3261-4639-a461-336263303666/Group_8.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.shake {
    -webkit-animation: shake 0.5s infinite;
    animation: shake 0.5s infinite;
}

.instant-transition {
    -webkit-transition: 0s 0s !important;
    -o-transition: 0s 0s !important;
    transition: 0s 0s !important;
}

.scene {
    z-index: 1;
    position: relative;
    height: 100%;
    -webkit-perspective: 100vw;
    perspective: 100vw;
}

.scene.content-visible {
    z-index: 11;
}

.level {
    z-index: 2;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.8s;
    transition: -webkit-transform 0.8s;
    -o-transition: transform 0.8s;
    transition: transform 0.8s;
    transition: transform 0.8s, -webkit-transform 0.8s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.level.level-1 {
    top: 0%;
}

/*
  originally .rotater was 80% width and 100% height and all was ok
  until i checked demo in FF...
  i even tried SO http://stackoverflow.com/questions/28751990/firefox-bug-with-multiple-nested-z-index-elements-and-preserve-3d
  but then i came up with hack. I made .rotater 2px width/height and placed child element with vw/vh units and negative left/top. At least now it works in FF
  */
.rotater {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    -o-transition: transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.elem {
    z-index: 4;
    position: absolute;
    top: calc(-50vh - 1px);
    left: calc(-55vw - 1px);
    width: calc(110vw + 2px);
    height: calc(100vh + 2px);
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    -o-transition: transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-size: 5rem;
    text-align: center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.elem.full-screen {
    left: calc(-50vw - 1px);
    width: calc(100vw + 2px);
}

.elem.content-visible .inner {
    z-index: 20;
}

.elem.content-visible .inner .art-fullName {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}


.elem:not(.active):hover {
    cursor: pointer;
}

.elem:nth-child(1) {
    -webkit-transform: rotateY(0deg) translateZ(-90vw);
    transform: rotateY(0deg) translateZ(-90vw);
}

.elem:nth-child(2) {
    -webkit-transform: rotateY(-60deg) translateZ(-90vw);
    transform: rotateY(-60deg) translateZ(-90vw);
}

.elem:nth-child(3) {
    -webkit-transform: rotateY(-120deg) translateZ(-90vw);
    transform: rotateY(-120deg) translateZ(-90vw);
}

.elem:nth-child(4) {
    -webkit-transform: rotateY(-180deg) translateZ(-90vw);
    transform: rotateY(-180deg) translateZ(-90vw);
}

.elem:nth-child(5) {
    -webkit-transform: rotateY(-240deg) translateZ(-90vw);
    transform: rotateY(-240deg) translateZ(-90vw);
}

.elem:nth-child(6) {
    -webkit-transform: rotateY(-300deg) translateZ(-90vw);
    transform: rotateY(-300deg) translateZ(-90vw);
}

.inner {
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #EEEEEE;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    -o-transition: transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-box-shadow: 1.2rem 2rem 2rem rgba(0, 0, 0, 0.3);
    box-shadow: 1.2rem 2rem 2rem rgba(0, 0, 0, 0.3);
}

.inner.inner-1 {
    background-image: url("https://static.tildacdn.com/tild3239-3964-4161-a337-336465663833/AdobeStock_367775956.jpeg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
}

.inner.inner-2 {
    background-image: url("https://static.tildacdn.com/tild6333-3630-4534-a231-666262656533/KIM_4757.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.inner.inner-3 {
    background-image: url("https://static.tildacdn.com/tild3637-3466-4139-b637-626163613831/KIM_4729-0.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.inner.inner-4 {
    background-image: url("https://static.tildacdn.com/tild6562-6634-4338-b166-663062653066/noroot_3_2.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.bg1-top {
    position: absolute;
    width: 50%;
    height: 35vh;
    top: -1px;
    left: 0;
    opacity: 0;
}

.bg1-top2 {
    position: absolute;
    width: 50%;
    height: 35vh;
    top: -1px;
    right: 0;
    opacity: 1;
}


.bg1-color2 {
    background-color: #197E73;
    width: 50%;
    height: 67vh;
    position: absolute;
    bottom: -0.5px;
    right: 0;
    z-index: 10000;
    opacity: 1;
}

.bg1-color {
    background-color: #37AFA1;
    width: 50%;
    height: 67vh;
    position: absolute;
    bottom: -0.5px;
    left: 0;
    z-index: 10000;
    opacity: 0;
}

.h2-slide {
    position: absolute;
    left: 12vw;
    top: 45px;
    font-family: 'Micra', arial;
    width: 320px;
    font-weight: 400;
    font-size: 32px;
    line-height: 140%;
    text-transform: uppercase;
    color: #FFFFFF;
}

.h3-slide {
    position: absolute;
    left: 17vw;
    top: 150px;
    font-family: 'Geometria', arial;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 29px;
    color: #FFFFFF;
    text-align: left;
}


.h2-slide2 {
    position: absolute;
    right: 12vw;
    top: 45px;
    font-family: 'Micra', arial;
    width: 500px;
    font-weight: 400;
    font-size: 32px;
    line-height: 140%;
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: left;
}

.h3-slide2 {
    position: absolute;
    right: 20.5vw;
    top: 150px;
    font-family: 'Geometria', arial;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 29px;
    color: #FFFFFF;
    text-align: left;
}



@-webkit-keyframes elem {
    from {
        top: -30vh;
    }

    20% {
        top: -20vh;
    }

    40% {
        top: -15vh;
    }

    60% {
        top: -15vh;
    }

    80% {
        top: -20vh;
    }

    to {
        top: -30vh;
    }
}



@keyframes elem {
    from {
        top: -30vh;
    }

    20% {
        top: -20vh;
    }

    40% {
        top: -15vh;
    }

    60% {
        top: -15vh;
    }

    80% {
        top: -20vh;
    }

    to {
        top: -30vh;
    }
}

@-webkit-keyframes move {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes move {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.absolute-img {
    position: absolute;
    top: 0vh;
    left: 70vw;
    animation: elem 15s infinite linear, move 10s infinite linear;
    -webkit-animation: elem 15s infinite linear, move 10s infinite linear;
    -webkit-transition: 0.2s all;
    -o-transition: 0.2s all;
    transition: 0.2s all;
}

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;

    }

    50% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0;

    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;

    }
}

@keyframes slideInLeft {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;

    }

    50% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0;

    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;

    }
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}





@-webkit-keyframes slideInLeft1 {
    0% {
        -webkit-transform: translateX(-180%);
        transform: translateX(-180%);

    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);



    }
}

@keyframes slideInLeft1 {
    0% {
        -webkit-transform: translateX(-180%);
        transform: translateX(-180%);



    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);





    }
}

@-webkit-keyframes slideInRight1 {
    0% {
        -webkit-transform: translateX(180%);
        transform: translateX(180%);

    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);

    }
}

@keyframes slideInRight1 {
    0% {
        -webkit-transform: translateX(180%);
        transform: translateX(180%);

    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);


    }
}

.move1 {
    position: absolute;
    z-index: 40;
    width: 300px;
    bottom: 5vh;
    right: 15vw;
    -webkit-animation-name: slideInRight1;
    animation-name: slideInRight1;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}

.move {
    position: absolute;
    z-index: 40;
    width: 300px;
    bottom: 5vh;
    left: 15vw;
    -webkit-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
    -webkit-animation-name: slideInLeft1;
    animation-name: slideInLeft1;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}

.btn-slide {
    display: block;
    position: absolute;
    bottom: 28vh;
    left: 25vw;
    width: 260px;
    height: 65px;
    border: 2px solid #FFFFFF;
    background-color: none;
    border-radius: 9px;
    font-family: 'Geometria', sans-serif;
    font-size: 14px;
    letter-spacing: 0.055em;
    font-weight: 600;
    text-align: center;
    color: #FFFFFF;
    text-transform: uppercase;
    padding-top: 22px;
    -webkit-transition: 0.2s all;
    -o-transition: 0.2s all;
    transition: 0.2s all;
    cursor: pointer;
    z-index: 30;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: 0.3s all;
    -o-transition: 0.3s all;
    transition: 0.3s all;
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.btn-slide1 {
    display: block;
    position: absolute;
    bottom: 28vh;
    left: auto;
    right: 24vw;
    width: 260px;
    height: 65px;
    border: 2px solid #fff;
    background-color: none;
    border-radius: 9px;
    font-family: 'Geometria', sans-serif;
    font-size: 14px;
    letter-spacing: 0.055em;
    font-weight: 600;
    text-align: center;
    color: #FFFFFF;
    text-transform: uppercase;
    padding-top: 22px;
    -webkit-transition: 0.2s all;
    -o-transition: 0.2s all;
    transition: 0.2s all;
    cursor: pointer;
    z-index: 30;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: 0.3s all;
    -o-transition: 0.3s all;
    transition: 0.3s all;
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}

.btn-slide:hover {
    cursor: pointer;
    background-color: #197E73;
    border: 2px solid #197E73;
    -webkit-transition: 0.2s all;
    -o-transition: 0.2s all;
    transition: 0.2s all;
}

.btn-slide1:hover {
    cursor: pointer;
    background-color: #37AFA1;
    border: 2px solid #37AFA1;
    -webkit-transition: 0.2s all;
    -o-transition: 0.2s all;
    transition: 0.2s all;
}




.inner.clicked {
    -webkit-transform: translateZ(15vw);
    transform: translateZ(15vw);
}

.inner.clicked .art-heading {
    -webkit-transform: scale(0.01);
    -ms-transform: scale(0.01);
    transform: scale(0.01);
}

.inner.clicked .art-btn {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.01);
    -ms-transform: translateX(-50%) translateY(-50%) scale(0.01);
    transform: translateX(-50%) translateY(-50%) scale(0.01);
}

.nav-bot {
    z-index: 10;
    position: fixed;
    width: 100%;
    bottom: 5rem;
    left: 0;
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.72, 0.17, 0.68, 1.46);
    transition: -webkit-transform 0.2s cubic-bezier(0.72, 0.17, 0.68, 1.46);
    -o-transition: transform 0.2s cubic-bezier(0.72, 0.17, 0.68, 1.46);
    transition: transform 0.2s cubic-bezier(0.72, 0.17, 0.68, 1.46);
    transition: transform 0.2s cubic-bezier(0.72, 0.17, 0.68, 1.46), -webkit-transform 0.2s cubic-bezier(0.72, 0.17, 0.68, 1.46);
    text-align: center;
}

@media (max-width: 992px) {
    .nav-bot {
        bottom: 0.2rem;
    }
}

.nav-bot.inactive {
    -webkit-transform: scale(0.01);
    -ms-transform: scale(0.01);
    transform: scale(0.01);
}

.nav-bot span {
    display: inline-block;

}

.nav-bot__btn {
    position: absolute;
    width: 150px;
    height: 550px;

    /*    width: 10px;
height: 13px;
border: 0.2rem solid #fff;
border-left: none;
border-bottom: none;
-webkit-transition: border-color 0.3s;
-o-transition: border-color 0.3s;
transition: border-color 0.3s;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;*/
}

.nav-bot__btn.left {
    background-image: url("https://static.tildacdn.com/tild3234-3731-4364-b866-353232383061/Frame_11.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
     left: 13vw;
    bottom: 0;
    -webkit-transition: 0.4s all;
    -o-transition: 0.4s all;
    transition: 0.4s all;
}

.nav-bot__btn.right {
    background-image: url("https://static.tildacdn.com/tild3735-3865-4465-a662-346565353466/Frame_10.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    right: 13vw;
    bottom: 0;
    -webkit-transition: 0.4s all;
    -o-transition: 0.4s all;
    transition: 0.4s all;

}


.nav-bot__btn.left:hover {

    -webkit-transition: 0.4s all;
    -o-transition: 0.4s all;
    transition: 0.4s all;
}

.nav-bot__btn.right:hover {

    -webkit-transition: 0.4s all;
    -o-transition: 0.4s all;
    transition: 0.4s all;
}

.nav-bot__pagi {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border: 4px solid #fff;
    border-radius: 50%;
    margin: 0 0.2rem;
    -webkit-transition: border-color 0.3s, background-color 0.3s;
    -o-transition: border-color 0.3s, background-color 0.3s;
    transition: border-color 0.3s, background-color 0.3s;
    cursor: pointer;
}

.nav-bot__pagi:hover {
    border-color: #F44336;
}

.nav-bot__pagi.active {
    background: #fff;
}

@-webkit-keyframes shake {
    5% {
        -webkit-transform: translateX(-1%) translateY(1%);
        transform: translateX(-1%) translateY(1%);
    }

    15% {
        -webkit-transform: translateX(1%) translateY(-1%);
        transform: translateX(1%) translateY(-1%);
    }

    25% {
        -webkit-transform: translateX(-1%) translateY(-1%);
        transform: translateX(-1%) translateY(-1%);
    }

    35% {
        -webkit-transform: translateX(1%) translateY(1%);
        transform: translateX(1%) translateY(1%);
    }

    45% {
        -webkit-transform: translateX(-1%) translateY(1%);
        transform: translateX(-1%) translateY(1%);
    }

    55% {
        -webkit-transform: translateX(1%) translateY(-1%);
        transform: translateX(1%) translateY(-1%);
    }

    65% {
        -webkit-transform: translateX(-1%) translateY(-1%);
        transform: translateX(-1%) translateY(-1%);
    }

    75% {
        -webkit-transform: translateX(1%) translateY(1%);
        transform: translateX(1%) translateY(1%);
    }

    85% {
        -webkit-transform: translateX(-1%) translateY(1%);
        transform: translateX(-1%) translateY(1%);
    }

    95% {
        -webkit-transform: translateX(1%) translateY(-1%);
        transform: translateX(1%) translateY(-1%);
    }
}

@keyframes shake {
    5% {
        -webkit-transform: translateX(-1%) translateY(1%);
        transform: translateX(-1%) translateY(1%);
    }

    15% {
        -webkit-transform: translateX(1%) translateY(-1%);
        transform: translateX(1%) translateY(-1%);
    }

    25% {
        -webkit-transform: translateX(-1%) translateY(-1%);
        transform: translateX(-1%) translateY(-1%);
    }

    35% {
        -webkit-transform: translateX(1%) translateY(1%);
        transform: translateX(1%) translateY(1%);
    }

    45% {
        -webkit-transform: translateX(-1%) translateY(1%);
        transform: translateX(-1%) translateY(1%);
    }

    55% {
        -webkit-transform: translateX(1%) translateY(-1%);
        transform: translateX(1%) translateY(-1%);
    }

    65% {
        -webkit-transform: translateX(-1%) translateY(-1%);
        transform: translateX(-1%) translateY(-1%);
    }

    75% {
        -webkit-transform: translateX(1%) translateY(1%);
        transform: translateX(1%) translateY(1%);
    }

    85% {
        -webkit-transform: translateX(-1%) translateY(1%);
        transform: translateX(-1%) translateY(1%);
    }

    95% {
        -webkit-transform: translateX(1%) translateY(-1%);
        transform: translateX(1%) translateY(-1%);
    }
}

@-webkit-keyframes shine {
    to {
        -webkit-transform: skewX(-30deg) translateX(600%);
        transform: skewX(-30deg) translateX(600%);
    }
}

@keyframes shine {
    to {
        -webkit-transform: skewX(-30deg) translateX(600%);
        transform: skewX(-30deg) translateX(600%);
    }
}

$(document).ready(function () {

  var $levels = $(".level"),
    numOfLevels = $levels.length,
    curLevel = 1,
    $curLevel = $(".level.active"),
    $levelPagi = $(".level-pagi"),
    $elems = $curLevel.find(".elem"),
    numOfPages = $elems.length,
    curPage = 1,
    $rotater = $curLevel.find(".rotater"),
    stepAngle = 360 / numOfPages,
    $botPagi = $(".nav-bot__pagi"),
    $navBot = $(".nav-bot"),
    SCENEPERS = 200,
    MULTI_Z = 13,
    LEVELANIM = 1000,
    SIDEANIM = 500,
    animating = false;

  function placeElems() {
    $levels.each(function () {
      var $elems = $(this).find(".elem"),
        len = $elems.length,
        angle = 360 / len,
        ELEM_Z = len * MULTI_Z;

      $(this).attr("data-elemZ", ELEM_Z);
      $elems.each(function (i) {
        $(this).css("transform", "rotateY(" + (0 - i * angle) + "deg) translateZ(" + (0 - ELEM_Z) + "vw)");
      });
    });
  }

  placeElems();

  function recreateBottomNav() {
    $(".nav-bot__pagi").remove();
    var newPagi = [];
    for (var i = 1; i <= numOfPages; i++) {
      var $botPagiEl = $("<span class='nav-bot__pagi' data-page='" + i + "'></span>"),
        activeEl = +$curLevel.attr("data-curpage") || 1;
      if (i === activeEl) $botPagiEl.addClass("active");
      newPagi.push($botPagiEl);
    }
    $(".nav-bot__btn.left").after(newPagi);
    $botPagi = $(".nav-bot__pagi");
  }

  function redefineVars() {
    $curLevel = $(".level.active");
    $elems = $curLevel.find(".elem");
    numOfPages = $elems.length;
    curPage = $curLevel.find(".elem.active").index() + 1 || 1;
    $rotater = $curLevel.find(".rotater");
    stepAngle = 360 / numOfPages;
  }

  function changeLevel() {
    $(".level").removeClass("active");
    $(".level-" + curLevel).addClass("active");
    $navBot.addClass("inactive");

    animating = true;

    setTimeout(function () {
      redefineVars();
      recreateBottomNav();

      $levels.css("transform", "translate3d(0," + (0 - (curLevel - 1) * 150) + "%,0)");
      $levelPagi.css("transform", "translate3d(0," + (0 - (curLevel - 1) * 100) + "%,0)");

      setTimeout(function () {
        $navBot.removeClass("inactive");
      }, 600);

    }, 200);

    setTimeout(function () {
      animating = false;
    }, LEVELANIM);
  }

  function navigateUp() {
    if (curLevel > 1) {
      curLevel--;
      changeLevel();
    }
  }

  function navigateDown() {
    if (curLevel < numOfLevels) {
      curLevel++;
      changeLevel();
    }
  }

  function sideNavigation(directPage) {
    if (directPage) {
      var diff = Math.abs(directPage - curPage),
        dirRight = directPage > curPage,
        curAngle = +$rotater.attr("data-angle") || 0;
      if (dirRight && diff > numOfPages / 2) {
        dirRight = false;
        diff = numOfPages - diff;
      } else if (!dirRight && diff > numOfPages / 2) {
        dirRight = true;
        diff = numOfPages - diff;
      }
      var nextAngle = (dirRight) ? curAngle + stepAngle * diff : curAngle - stepAngle * diff;
      curPage = directPage;
      $rotater.attr("data-angle", nextAngle).css("transform", "rotateY(" + nextAngle + "deg)");
    }
    $elems.removeClass("active");
    $elems.eq(curPage - 1).addClass("active");
    $botPagi.removeClass("active");
    $botPagi.eq(curPage - 1).addClass("active");
    $curLevel.attr("data-curpage", curPage);
    animating = true;
    setTimeout(function () {
      animating = false;
    }, SIDEANIM);
  }

  function navigateLeft() {
    var curAngle = +$rotater.attr("data-angle") || 0,
      nextAngle = curAngle - stepAngle;
    $rotater.attr("data-angle", nextAngle).css("transform", "rotateY(" + nextAngle + "deg)");
    (curPage > 1) ? curPage-- : curPage = numOfPages;
    sideNavigation();
  }

  function navigateRight() {
    var curAngle = +$rotater.attr("data-angle") || 0,
      nextAngle = curAngle + stepAngle;
    $rotater.attr("data-angle", nextAngle).css("transform", "rotateY(" + nextAngle + "deg)");
    (curPage < numOfPages) ? curPage++ : curPage = 1;
    sideNavigation();
  }

  var winW = $(window).width(),
    winH = $(window).height(),
    pathD,
    pathDCopy,
    bigArr = [],
    path,
    rndArr,
    $pickedElem,
    pickedZ;

  function range(n) {
    return Array.apply(null, {
      length: n
    }).map(Number.call, Number);
  }

  function createSvg($el, points) {
    var $el = $el,
      points = points,
      bgColor = $el.css("background-color"),
      elW = $el.width(),
      elH = $el.height(),
      minW = (winW - elW) / 2,
      maxW = winW - minW,
      minH = (winH - elH) / 2,
      maxH = (winH - minH),
      pps = Math.round(points / 4), // POINTS PER SIDE
      stepW = elW / pps,
      stepH = elH / pps,
      bigStepW = winW / pps,
      bigStepH = winH / pps,
      arr = [],
      $svg = $("<svg class='svg-matter'><path fill='" + bgColor + "' /></svg>");

    rndArr = range(pps * 4);

    if (pps > 1) {
      for (var i = 0; i < pps; i++) {
        arr[i] = (minW + stepW * i) + "," + minH;
        bigArr[i] = (bigStepW * i) + ",0";
        arr[i + pps] = maxW + "," + (minH + stepH * i);
        bigArr[i + pps] = winW + "," + (bigStepH * i);
        arr[i + pps * 2] = (maxW - stepW * i) + "," + maxH;
        bigArr[i + pps * 2] = (winW - bigStepW * i) + "," + winH;
        arr[i + pps * 3] = minW + "," + (maxH - stepH * i);
        bigArr[i + pps * 3] = "0," + (winH - bigStepH * i);
      }
    }

    arr[0] = "M" + arr[0];
    bigArr[0] = "M" + bigArr[0];
    pathDCopy = arr;
    pathD = arr.join(" ");
    $svg.find("path").attr("d", pathD);
    $("body").append($svg);
    return $svg;
  }

  function newD(points, p) {
    var arr = points.split(" ");
    arr[p] = bigArr[p];
    return arr.join(" ");
  }

  function animateLoop(elem, len, justAnimate) {
    var length = $(elem).attr("d").split(" ").length,
      len = len,
      ast = 8,
      dur = 100,
      duration = Math.floor(Math.random() * dur + dur / 2),
      atSameTime = Math.floor(len / ast) || 8;
    if (rndArr.length) {
      while (atSameTime--) {
        var num = rndArr.splice(Math.floor(Math.random() * rndArr.length), 1)[0];
        pathD = newD(pathD, num);
      }
      Snap(elem).animate({
        'path': pathD
      }, duration, mina.easeinout, function () {
        animateLoop(elem, len, justAnimate);
      });
    } else {
      if (justAnimate) {
        $(".svg-matter").remove();
        $(".inner").removeClass("clicked");
        activateHandlers();
        animating = false;
        return;
      }
      $pickedElem.find(".art-content").addClass("visible");
      $pickedElem.addClass("instant-transition");
      $pickedElem.find(".inner").addClass("instant-transition");
      $pickedElem.css("top");
      $pickedElem.find(".inner").css("transform", "translateZ(" + pickedZ + "vw)");
      bigArr = pathDCopy;
      $(".scene").addClass("content-visible");
      $pickedElem.addClass("content-visible full-screen");
    }
  }

  function elemClick() {
    if (animating) return;
    var $inner = $(this).parent(),
      $elem = $inner.parent(),
      bgColor = $inner.css("background-color"),
      innerZDiff = 15,
      z = +$elem.parents(".level.active").attr("data-elemz"),
      coef = SCENEPERS / (SCENEPERS + z - innerZDiff),
      w = Math.ceil($elem.width() * coef) + 1,
      h = Math.ceil($elem.height() * coef),
      left = ($elem.width() - w) / 2 + $(window).width() / 10,
      top = ($elem.height() - h) / 2;

    animating = true;
    removeHandlers();
    $pickedElem = $elem;
    pickedZ = z;

    var $div = $("<div></div>");
    $div.css({
      "position": "absolute",
      "width": w,
      "height": h,
      "background": bgColor,
      "z-index": 15,
      "top": top,
      "left": left
    });

    $inner.addClass("clicked");
    setTimeout(function () {
      $curLevel.append($div);
      $div.addClass("shake");
      setTimeout(function () {
        $div.removeClass("shake");
        createSvg($div, 32);
        $div.remove();
        animateLoop(".svg-matter path", 32);
      }, 400);
    }, 300);
  }

  $(document).on("click", ".elem:not(.active) .art-btn", function () {
    if (animating) return;
    var that = this;
    setTimeout(function () {
      $(that).trigger("click");
    }, SIDEANIM + 50);
  });

  $(document).on("click", ".elem.active .art-btn", elemClick);

  function activateHandlers() {

    $(document).on("mousewheel DOMMouseScroll", function (e) {
      if (animating) return;
      if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
        navigateUp();
      } else {
        navigateDown();
      }
    });

    $(document).on("keydown", function (e) {
      if (animating) return;
      if (e.which === 37) {
        navigateLeft();
      } else if (e.which === 38) {
        navigateUp();
      } else if (e.which === 39) {
        navigateRight();
      } else if (e.which === 40) {
        navigateDown();
      }
    });

  }

  activateHandlers();

  function removeHandlers() {
    $(document).off("mousewheel DOMMouseScroll");
    $(document).off("keydown");
  }

  $(document).on("click", ".nav-top__btn", function () {
    if (animating) return;
    if ($(this).hasClass("up")) {
      navigateUp();
    } else {
      navigateDown();
    }
  });

  $(document).on("click", ".nav-bot__btn", function () {
    if (animating) return;
    if ($(this).hasClass("left")) {
      navigateLeft();
    } else {
      navigateRight();
    }
  });

  $(document).on("click", ".nav-bot__pagi:not(.active)", function () {
    if (animating) return;
    sideNavigation(+$(this).attr("data-page"));
  });

  $(document).on("click", ".elem:not(.active)", function () {
    if (animating) return;
    sideNavigation(+$(this).index() + 1);
  });

  $(document).on("click", ".art-close", function () {
    $pickedElem.removeClass("content-visible");
    setTimeout(function () {
      $(".svg-matter").attr("class", "svg-matter above");
      $pickedElem.removeClass("full-screen instant-transition");
      $pickedElem.find(".inner").attr("style", "");
      $pickedElem.find(".art-content").removeClass("visible").removeClass("instant-transition");
      $pickedElem.find(".inner").removeClass("instant-transition");
      $pickedElem.css("top");
      $(".scene").removeClass("content-visible");
      rndArr = range(32);
      animateLoop(".svg-matter path", 32, true);
    }, 300);

  });

  $(window).resize(function () {
    winW = $(window).width();
    winH = $(window).height();
  });

  $(document).ready(function () {
    setTimeout(function () {

      $('.bg1-top').animate({
        left: "0",
        height: "hide"
      }, 100, function () {
        $('.bg1-top').animate({
          opacity: 1,
          left: "0",
          height: "show"
        }, 1000);
      });

      $('.bg1-color').animate({
        left: "0",
        height: "hide"
      }, 100, function () {
        $('.bg1-color').animate({
          opacity: 1,
          left: "0",
          height: "show"
        }, 1000);
      });


    }, 1000);
  });

  $('.nav-bot__btn').click(function () {
    //вешаем событие на клик по кнопке 

    $('.bg1-top').animate({
      height: "hide"
    }, 200, function () {
      $('.bg1-top').animate({
        opacity: 1,
        height: "show"
      }, 1200);
    });

    $('.bg1-top2').animate({
      height: "hide"
    }, 200, function () {
      $('.bg1-top2').animate({
        opacity: 1,
        height: "show"
      }, 1200);
    });

    $('.bg1-color').animate({
      height: "hide"
    }, 100, function () {
      $('.bg1-color').animate({
        opacity: 1,
        height: "show"
      }, 1000);
    });

    $('.bg1-color2').animate({
      height: "hide"
    }, 100, function () {
      $('.bg1-color2').animate({
        opacity: 1,
        height: "show"
      }, 1000);
    });
    $('.btn-slide').toggleClass('btn-slide1');
    $('.move1').toggleClass('move');
       
  });

});

This Pen is owned by Roman on CodePen. It is a fork of this Pen.

See more by @Trototop on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.