CSS Tutorial – Folding Panorama Animation

Rengga Dev – This is an amazing and awesome Folding Panorama Animation created using HTML and CSS. Check it out!

.card
- for i in (1..5)
.fold

$size: 95vw;
$folds: 5;

$skew: 15deg;
$crunch: 0.6;
$duration: 4s;
$delay: 1s;

$url: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Pittsburgh_Panorama_from_the_Duquesne_Incline.jpg/1280px-Pittsburgh_Panorama_from_the_Duquesne_Incline.jpg);

html {
    background: radial-gradient(at center right, #222, #000);
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    animation: crunch $duration $delay ease-in-out infinite;

    @keyframes crunch {
        50% {
            transform: scaleX($crunch);
        }
    }
}

.card {
    display: flex;
    width: $size;
    height: 304/1280 * $size;
}

.fold {
    flex: 1;
    background: $url;
    background-size: cover;

    @for $i from 1 through $folds {
        &:nth-child(#{$i}) {
            background-position: ($i - 1) / ($folds - 1) * 100%;
        }
    }

    &:first-child {
        border-radius: 2vw 0 0 2vw;
    }
    &:last-child {
        border-radius: 0 2vw 2vw 0;
    }

    animation: $duration $delay ease-in-out infinite;

    &:nth-child(odd) {
        animation-name: odd-fold;

        @keyframes odd-fold {
            50% {
                transform: skewY($skew);
                filter: brightness(1.25);
            }
        }
    }
    &:nth-child(even) {
        animation-name: even-fold;

        @keyframes even-fold {
            50% {
                transform: skewY(-$skew);
                filter: brightness(0.75);
            }
        }
    }
}