Пример:
Кол-во фото для примера:
- 2
- 3
- 4
- 5
- 6
- 7
- 8
HTML:
|
1 2 3 4 5 6 7 |
<div id="gallery"> <img src="img-1.jpg" alt="img-1" /> <!-- Еще изображения --> <img src="img-N.jpg" alt="img-N" /> </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 |
@property --gallery-rotation { syntax: "<number>"; initial-value: 0; inherits: true; } @keyframes gallery-rotation { to { --gallery-rotation: 1 } } #gallery { --rotate-direction: 1; --rotate-duration: 20s; --item-size: 95%; --item-transition-duration: 0.5s; width: min(80vmin, 500px); aspect-ratio: 1 / 1; border-radius: 50%; display: grid; animation: gallery-rotation var(--rotate-duration) linear infinite; container-type: inline-size; isolation: isolate; margin: 20px auto; } #gallery img { box-sizing: border-box; grid-area: 1 / 1; width: calc(var(--item-size) / (1 + (1 / sin(180deg / var(--count))))); aspect-ratio: 1/1; box-shadow: 0 1cqw 2cqw rgba(0,0,0,0.2), 0 1.5cqw 2.5cqw rgba(0,0,0,0.1); border-radius: 50%; border: calc(5cqi / var(--count)) solid #fff; object-fit: cover; offset-path: border-box; offset-anchor: top center; offset-distance: calc((100% * (var(--index) / var(--count) + var(--gallery-rotation, 0))) * var(--rotate-direction)); transform: rotate(calc(-360deg * var(--rotate-direction) * (var(--index) / var(--count) + var(--gallery-rotation, 0)))); z-index: 0; transition: width var(--item-transition-duration), filter var(--item-transition-duration), box-shadow var(--item-transition-duration), z-index 0s calc(var(--item-transition-duration) * var(--transition-delay-z, 1)); } #gallery img:hover { --transition-delay-z: 0; z-index: 1; width: 100%; } #gallery:has(img:hover) > img:not(:hover) { filter: grayscale(1); box-shadow: none; } |
Переменные:
--rotate-direction- направление вращения (1 - по часовой стрелке, -1 - против--rotate-duration- продолжительность полного оборота карусели--item-size- размер элементов карусели (100% - без отступов между ними)--item-transition-duration- продолжительность увеличения
JS:
|
1 2 3 4 |
[...gallery.children].map((el, idx, arr) => { el.style.setProperty("--count", arr.length); el.style.setProperty("--index", idx) }) |
Вместо JavaScript можно использовать CSS, добавив в класс #gallery img переменные:
|
1 2 |
--count: sibling-count(); --index: calc(sibling-index() - 1); |
Только на данный момент эти функции поддерживаются не всеми браузерами.
Найдено на codepen.io у пользователя Mark Boots
Добавить комментарий: