Тасующиеся по клику фотографии как колода карт | Click-shuffle photos like a deck of cards

Решение выполнено на jQuery, и может работать на всех экранах и с любым количеством фотографий. Подключать кучу библиотек для тусования такой колоды уж точно не стоит, но jQuery я оставил, так как для меня она удобнее чистого JS.

СКАЧАТЬ

ДЕМО

X

Пример:

Библиотека jQuery:

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

HTML КОД:

<div class="container">	

	<div class="cart_container">
		<div class="cart">
			<img src="images/photo-1.jpeg" alt="" />
		</div>
		<div class="cart">
			<img src="images/photo-2.jpg" alt="" />
		</div>
		<div class="cart">
			<img src="images/photo-3.jpeg" alt="" />
		</div>
		<div class="cart">
			<img src="images/photo-4.jpg" alt="" />
		</div>
		<div class="cart">
			<img src="images/photo-5.jpg" alt="" />
		</div>
		<div class="cart">
			<img src="images/photo-6.jpg" alt="" />
		</div>
	</div>
	
</div>

CSS КОД:

.container {
	height: 100vh;
	width: 100vw;
	background-color: #2d48e2;
	
	display: -webkit-box;
	
	display: -ms-flexbox;
	
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.cart_container {
    margin: 20px 0;
    position: relative;
}
.cart {
    height: 400px;
    width: 300px;
    position: absolute;
    top: 0;
    left: calc(50% - 150px);
    overflow: hidden;
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.1);
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #2d48e2;
    padding: 10px;
    z-index: 100;
    background-color: #fff;
}
.cart:nth-child(1) {
    -webkit-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);
    position: relative;
}
.cart:nth-child(2) {
    -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
            transform: rotate(4deg);
}
.cart:nth-child(3) {
    -webkit-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
            transform: rotate(10deg);
}
.cart:nth-child(4) {
    -webkit-transform: rotate(-6deg);
        -ms-transform: rotate(-6deg);
            transform: rotate(-6deg);
}
.cart:nth-child(5) {
    -webkit-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
            transform: rotate(-2deg);
}
.cart:nth-child(6) {
    -webkit-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
            transform: rotate(7deg);
}
.cart img {
    width: 100%;
    height: 100%;
	border-radius: 8px;
	-o-object-fit: cover;
	   object-fit: cover;
}
.bottom {
    z-index: 50;
    -webkit-animation: move ease-in-out 1s;
            animation: move ease-in-out 1s;
}
.bottom_last {
    z-index: 30;
    -webkit-animation: move_last ease-in-out 1s;
            animation: move_last ease-in-out 1s;
}
@-webkit-keyframes move {
    0% {
        left: calc(50% - 150px);
        z-index: 150;
    }
    50% {
        left: calc(50% + 220px);
    }    
    100% {
        left: calc(50% - 150px);
        z-index: 50;
    }
}
@keyframes move {
    0% {
        left: calc(50% - 150px);
        z-index: 150;
    }
    50% {
        left: calc(50% + 220px);
    }    
    100% {
        left: calc(50% - 150px);
        z-index: 50;
    }
}
@-webkit-keyframes move_last {
    0% {
        left: calc(50% - 150px);
        z-index: 150;
    }
    50% {
        left: calc(50% + 220px);
        z-index: 50;
    }    
    100% {
        left: calc(50% - 150px);
        z-index: 30;
    }
}
@keyframes move_last {
    0% {
        left: calc(50% - 150px);
        z-index: 150;
    }
    50% {
        left: calc(50% + 220px);
        z-index: 50;
    }    
    100% {
        left: calc(50% - 150px);
        z-index: 30;
    }
}

jQuery КОД:

$(function () {
    let count = 1;
    let click = true;
    let num = $(".cart").length;
    $(".cart").click(function() {
        if(!click) {
            return;
        }
        click = false;
        let card = $(this);
        if(count < num) {
            $(this).addClass("bottom");
            count++;
            }  else {
            $(this).addClass("bottom_last");
            count++;
        }
        if(count == num + 1) {
            setTimeout(function () {
                $(".cart").removeClass("bottom").removeClass("bottom_last");
                count = 1;
            }, 1000);  
        }
        setTimeout(function () {
            click = true;
        }, 1000);         
    });
});