Шикарная 3D карусель слайдов на CSS3 и Javascript
Очень прикольная 3D карусель блоков для вашего сайта. Выглядит минималистично и очень стильно. Анимации выше всяких похвал!
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего 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 |
.carousel { position: relative; width: 23rem; height: 23rem; perspective: 500px; transform-style: preserve-3d; } .card-container { position: absolute; width: 100%; height: 100%; transform: rotateY(calc(var(--offset) * 50deg)) scaleY(calc(1 + var(--abs-offset) * -0.4)) translateZ(calc(var(--abs-offset) * -30rem)) translateX(calc(var(--offset) / var(--abs-offset) * -5rem)); filter: blur(calc(var(--abs-offset) * 1rem)); transition: all 0.3s ease-out; } .card { width: 100%; height: 100%; padding: 2rem; background-color: hsl(280deg, 40%, calc(100% - var(--abs-offset) * 50%)); border-radius: 1rem; color: #9CA3AF; text-align: justify; transition: all 0.3s ease-out; } .card h2 { text-align: center; font-size: 2rem; font-weight: bold; margin: 0 0 0.7em; color: #1F2937; } .card p, .card h2 { transition: all 0.3s ease-out; opacity: var(--active); } .nav { color: white; font-size: 5rem; position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; z-index: 2; cursor: pointer; user-select: none; background: unset; border: unset; } .nav.left { transform: translateX(-100%) translatey(-50%); } .nav.right { right: 0; transform: translateX(100%) translatey(-50%); } |
2#: Следующий код вставьте в ту часть сайта, где должен быть слайдер:
|
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 |
<script id="rendered-js" type="module"> import React, { useState } from 'https://cdn.skypack.dev/react'; import ReactDOM from 'https://cdn.skypack.dev/react-dom'; import { TiChevronLeftOutline, TiChevronRightOutline } from 'https://cdn.skypack.dev/react-icons/ti'; const CARDS = 10; const MAX_VISIBILITY = 3; const Card = ({ title, content }) => React.createElement("div", { className: "card" }, React.createElement("h2", null, title), React.createElement("p", null, content)); const Carousel = ({ children }) => { const [active, setActive] = useState(2); const count = React.Children.count(children); return ( React.createElement("div", { className: "carousel" }, active > 0 && React.createElement("button", { className: "nav left", onClick: () => setActive(i => i - 1) }, React.createElement(TiChevronLeftOutline, null)), React.Children.map(children, (child, i) => React.createElement("div", { className: "card-container", style: { '--active': i === active ? 1 : 0, '--offset': (active - i) / 3, '--abs-offset': Math.abs(active - i) / 3, 'pointer-events': active === i ? 'auto' : 'none', 'opacity': Math.abs(active - i) >= MAX_VISIBILITY ? '0' : '1', 'display': Math.abs(active - i) > MAX_VISIBILITY ? 'none' : 'block' } }, child)), active < count - 1 && React.createElement("button", { className: "nav right", onClick: () => setActive(i => i + 1) },React.createElement(TiChevronRightOutline, null)))); }; const App = () => React.createElement("div", { className: "app" }, React.createElement(Carousel, null, [...new Array(CARDS)].map((_, i) => /*#__PURE__*/ React.createElement(Card, { title: 'Слайд ' + (i + 1), content: "Здесь может быть любой ваш текст." })))); ReactDOM.render( React.createElement(App, null), document.body); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
