За основу данной темы взята идея с codepen
Подключать кучу библиотек для тусования такой колоды уж точно не стоит, но jQuery я оставил, так как для меня она удобнее чистого JS.
Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="cart_container"> <div class="cart"> <img src="photo-1.jpg" alt="" /> </div> <div class="cart"> <img src="photo-2.jpg" alt="" /> </div> <div class="cart"> <img src="photo-3.jpg" alt="" /> </div> <div class="cart"> <img src="photo-4.jpg" alt="" /> </div> <div class="cart"> <img src="photo-5.jpg" alt="" /> </div> <div class="cart"> <img src="photo-6.jpg" alt="" /> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
.cart_container { margin: 20px 0; position: relative; } .cart { height: 400px; width: 300px; position: absolute; top: 0; left: calc(50% - 150px); overflow: hidden; 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 #337AB7; padding: 10px; z-index: 100; background-color: #BFE2FF; } .cart:nth-child(1) { transform: rotate(-3deg); position: relative; } .cart:nth-child(2) { transform: rotate(4deg); } .cart:nth-child(3) { transform: rotate(10deg); } .cart:nth-child(4) { transform: rotate(-6deg); } .cart:nth-child(5) { transform: rotate(-2deg); } .cart:nth-child(6) { transform: rotate(7deg); } .cart img { width: 100%; height: 100%; object-fit: cover; } .bottom { z-index: 50; animation: move ease-in-out 1s; } .bottom_last { z-index: 30; animation: move_last ease-in-out 1s; } @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_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; } } |
При изменении кол-ва фотографий, нужно будет задать их поворот, добавив класс(ы)
|
1 2 3 |
.cart:nth-child(номер_фото) { transform: rotate(радиус); } |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(function () { let count = 1; let click = true; let num = $(".cart").length; $(".cart").click(function() { if(!click) { return; } click = false; 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); }); }); |
Если нужно менять фотографии не по клику, а автоматически, то используем JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(function () { let count = 1; let num = $(".cart").length; function cart() { if(count < num) { $(".cart").eq(-count).addClass("bottom"); count++; } else { $(".cart").eq(-count).addClass("bottom_last"); count++; } if(count == num + 1) { setTimeout(function () { $(".cart").removeClass("bottom").removeClass("bottom_last"); count = 1; }, 1000); } }; setInterval(cart, 3000); }); |
Время смены фото задается в миллисекундах в функции setInterval
Результат будет таким:
Доброго дня, Александр!
Подскажите пожалуйста, а как сделать так чтобы карточки проигрывались автоматически, пытаюсь сделать изменения в скрипте, но у меня получается что картинка первой карты всегда одинаковая.
Спасибо заранее!
Добавил в тему такой вариант.
Все отлично работает! Александр, огромное Вам спасибо за помощь и обратную связь, вы очень хороший человек, а ваш сайт просто очень реально полезен!
Александр, сердечное спасибо вам за эти находки!! Применила у себя. Адаптирую под Геткурс с его ограничениями и получаются потрясающие эффекты.
админ, спасибо за сайт. Давай больше серьезных галерей .
Поправка:
При изменении кол-ва фотографий, нужно будет задать их поворот, добавив класс(ы)
.cart:nth-child(номер_фото) {
transform: rotate(ГРАДУС deg);
Помогите пожалуйста можно как то сделать что бы появлялась случайная картинка из списка?
Можно, обращайтесь по контактам справа.
Тем более если вы ищите рандом с картами, есть и другие решения.
Добрый день! Очень понравился данное решение и захотелось у себя его реализовать. Но не получилось html+css (все разместить получилось) а вот JS - не хочет работать. Размещаю в sibgle.php - подскажите что может быть не так. Спасибо.
single.php - это я так понимаю в WP?
Если там подключать, то там должен быть путь к JS и подключаться ниже вывода статьи.