HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="cards-wrap"> <div class="cards"> <div class="cards-title">South Korean models</div> <div class="cards-row"> <div class="card"> <div class="card-bg" style="background-image: url(sakura-1.webp)"></div> <img class="card-img" src="girl-1.webp" /> <div class="card-text">Model 1</div> </div> <div class="card"> <div class="card-bg" style="background-image: url(sakura-2.webp)"></div> <img class="card-img" src="girl-2.webp" /> <div class="card-text">Model 2</div> </div> <div class="card"> <div class="card-bg" style="background-image: url(sakura-3.webp)"></div> <img class="card-img" src="girl-3.webp" /> <div class="card-text">Model 3</div> </div> </div> </div> </div> |
- Фоны из примера: sakura-1.webp, sakura-2.webp, sakura-3.webp
- Фото из примера: girl-3.webp, girl-2.webp, girl-3.webp
Картинки созданы с помощью ChatGPT и Шедеврум
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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
.cards-wrap { display: flex; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; margin: 20px 0; background: url("sakura-4.webp") center/cover no-repeat; perspective: 1800px; } .cards { padding: 20px; text-align: left; perspective: 1800px; transform-origin: 50% 50%; transform-style: preserve-3d; transform: rotateX(11deg) rotateY(16.5deg); border-radius: 20px; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, .4); transition: 0.1s; display: inline-block; position: relative; } .cards:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); border-radius: 20px; z-index: -1; } .cards-title { transform: translateZ(35px); font-size: 28px; font-weight: bold; color: #FFF; margin: 5px 20px 20px; text-shadow: 0px 0 10px rgba(0, 0, 0, 0.4); } .cards-row { display: flex; transform-origin: 50% 50%; transform-style: preserve-3d; } .card { border-radius: 15px; box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.6); height: 250px; width: 188px; overflow: hidden; transform: translateZ(20px); user-select: none; margin: 0 10px; } .card-bg { position: absolute; bottom: -50px; left: -50px; right: -50px; top: -50px; transform-origin: 50% 50%; transform: translateZ(-50px); z-index: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; transition-property: background-position, transform; transition-delay: 0s; transition-duration: 0.3s; transition-timing-function: ease-out; } .card-img { position: relative; width: 100%; left: 0; bottom: -20px; max-width: unset; filter: drop-shadow(6px 6px 10px rgba(0, 0, 0, 0.3)); transition-property: transform, left, bottom, width; transition-delay: 0s; transition-duration: 0.4s; transition-timing-function: ease-out; } .card:hover .card-bg { transform: translateZ(-50px) scale(1.2); transition-delay: 0s, 0.3s; } .card:hover .card-img { left: -30%; width: 160%; bottom: 0; transition-delay: 0s, 0.3s, 0.3s, 0.3s; } .card-text { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); bottom: 0; left: 0; display: flex; flex-direction: column; height: 80px; width: 100%; justify-content: flex-end; align-items: center; padding: 0 10px 14px; position: absolute; z-index: 2; font-size: 18px; color: #fff; font-weight: bold; box-sizing: border-box; } @media screen and (max-width: 991px) { .cards-wrap { padding: 40px 20px; } .cards-title { font-size: 22px; margin: 5px 15px 15px; } .cards { padding: 15px; } .card { height: 192px; width: 145px; } .card-text { font-size: 16px; } } @media screen and (max-width:767px) { .cards-title { text-align: center; } .cards-row { display: block; } .card { margin: 0 auto 10px; } } |
- Фоновая картинка из примера: sakura-4.webp
- Для того, чтобы фото и фон не дергались, когда над ними быстро проходит курсор, для их увеличения задана задержка в 0.2 секунды.
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const cards = document.querySelector(".cards"); const images = document.querySelectorAll(".card-img"); const backgrounds = document.querySelectorAll(".card-bg"); const range = 25; const calcValue = (a, b) => (a/b*range-range/2).toFixed(1); let timeout; document.addEventListener('mousemove', ({x, y}) => { if (timeout) { window.cancelAnimationFrame(timeout); } timeout = window.requestAnimationFrame(() => { const yValue = calcValue(y, window.innerHeight); const xValue = calcValue(x, window.innerWidth); cards.style.transform = `rotateX(${yValue}deg) rotateY(${xValue}deg)`; [].forEach.call(images, (image) => { image.style.transform = `translateX(${-xValue}px) translateY(${yValue}px)`; }); [].forEach.call(backgrounds, (background) => { background.style.backgroundPosition = `${xValue*.45}px ${-yValue*.45}px`; }) }) }, false); |
Константа range задает диапазон смещения блока и фотографий.
За основу взято решение, найденное на codepen.io у пользователя Adrian Payne
Китяра красавчик и Саня молодец!