"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "введение", "hProperties": { "id": "введение" } }, "depth": 2, "value": "Введение" }, { "data": { "id": "создайте-ряд-карт", "hProperties": { "id": "создайте-ряд-карт" } }, "depth": 2, "value": "Создайте ряд карт" }, { "data": { "id": "дублирование-карт", "hProperties": { "id": "дублирование-карт" } }, "depth": 2, "value": "Дублирование карт" }, { "data": { "id": "анимация-карусели", "hProperties": { "id": "анимация-карусели" } }, "depth": 2, "value": "Анимация карусели" }, { "data": { "id": "заключительные-мысли", "hProperties": { "id": "заключительные-мысли" } }, "depth": 2, "value": "Заключительные мысли" }]; const readingTime = { "minutes": 2, "words": 455, "text": "2 min read" }; const frontmatter = undefined; const Styles = () => { const _components = { style: "style", ..._provideComponents() }; return _jsx(_components.style, { dangerouslySetInnerHTML: { __html: ` .card { width: 100%; color: #fff; border-radius: 24px; box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0; padding: 20px; font-size: xx-large; display: flex; justify-content: center; align-items: center; min-height: 200px; } .card:nth-child(1) { background: #7958ff; } .card:nth-child(2) { background: #5d34f2; } .card:nth-child(3) { background: #4300da; } .carousel { margin: 0 auto; padding: 20px 0; max-width: 700px; overflow: hidden; display: flex; } .carousel { margin: 0 auto; padding: 20px 0; max-width: 700px; overflow: hidden; display: flex; } .carousel.animated:hover .group { animation-play-state: paused; } .carousel:not(.basic) > * { flex: 0 0 100%; } .group { display: flex; gap: 20px; padding-right: 20px; will-change: transform; } .group.animated { animation: scrolling 10s linear infinite; } @keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } ` } }); }; const RowOfCards = () => { const _components = { div: "div", ..._provideComponents() }; return _jsxs(_components.div, { className: "carousel basic", children: [_jsx(_components.div, { className: "card", children: "A" }), _jsx(_components.div, { className: "card", children: "B" }), _jsx(_components.div, { className: "card", children: "C" })] }); }; const Cards = ({isAnimated}) => { const _components = { div: "div", ..._provideComponents() }; return _jsxs(_components.div, { className: ['carousel', isAnimated && 'animated'].join(' '), children: [_jsxs(_components.div, { className: ['group', isAnimated && 'animated'].join(' '), children: [_jsx(_components.div, { className: "card", children: "A" }), _jsx(_components.div, { className: "card", children: "B" }), _jsx(_components.div, { className: "card", children: "C" })] }), _jsxs(_components.div, { "aria-hidden": true, className: ['group', isAnimated && 'animated'].join(' '), children: [_jsx(_components.div, { className: "card", children: "A" }), _jsx(_components.div, { className: "card", children: "B" }), _jsx(_components.div, { className: "card", children: "C" })] })] }); }; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {Note} = _components; if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsx(Styles, {}), "\n", _jsxs(_components.h2, { id: "введение", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#введение", children: _jsx(_components.span, { children: "#" }) }), "Введение"] }), "\n", _jsx(_components.p, { children: "Мы, конечно, любим JavaScript. Но всегда приятно посмотреть, чего можно добиться, используя только CSS - особенно в случае с анимациями, так как CSS-анимации часто \"менее тяжёлые\", чем анимации на JavaScript." }), "\n", _jsx(_components.p, { children: "В этом посте я покажу вам, как создать анимацию бесконечной прокрутки карусели с эффектом паузы при наведении, используя только CSS. Вот предварительный просмотр того, что мы будем строить:" }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["В этом учебнике используется синтаксис ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector", children: "& nesting selector" }), ", который является функцией\nBaseline 2023 . Пожалуйста, отрегулируйте код соответствующим образом, если вы ориентируетесь на старые браузеры."] }) }), "\n", _jsxs(_components.h2, { id: "создайте-ряд-карт", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#создайте-ряд-карт", children: _jsx(_components.span, { children: "#" }) }), "Создайте ряд карт"] }), "\n", _jsx(_components.p, { children: "Сначала давайте создадим базовую структуру нашей карусели. Рассмотрим ряд карт:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n" }) }), "\n", _jsx(RowOfCards, {}), "\n", _jsx(_components.p, { children: "Выглядит хорошо, правда? Карты могут быть вашими красивыми баннерами, изображениями продукции или чем угодно, что вы хотите показать в своей карусели." }), "\n", _jsxs(_components.h2, { id: "дублирование-карт", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#дублирование-карт", children: _jsx(_components.span, { children: "#" }) }), "Дублирование карт"] }), "\n", _jsx(_components.p, { children: "Поскольку мы хотим, чтобы карусель была бесконечной, она должна быть соединена от конца к началу. Интуитивно мы можем попытаться повторить карты:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Посмотрите на результат:" }), "\n", _jsx(Cards, {}), "\n", _jsx(_components.p, { children: "Только первый набор карт виден. Если вы посмотрите на HTML, то увидите, что второй набор карт скрыт и следует за первым набором." }), "\n", _jsxs(_components.h2, { id: "анимация-карусели", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#анимация-карусели", children: _jsx(_components.span, { children: "#" }) }), "Анимация карусели"] }), "\n", _jsx(_components.p, { children: "Время анимировать карусель! Поскольку у нас есть два набора соединённых карт, мы можем анимировать карусель, трансформируя группы карт. Вот как:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "У нас остался последний штрих: остановка анимации при наведении на карусель. Это даст пользователям возможность более чётко разглядеть контент. Поскольку у нас есть два набора карт, нам нужно приостановить обе группы при наведении на карусель:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "Вот и всё! 🎊 Теперь карусель будет останавливаться, когда ты наведёшь на неё курсор." }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsxs(_components.h2, { id: "заключительные-мысли", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#заключительные-мысли", children: _jsx(_components.span, { children: "#" }) }), "Заключительные мысли"] }), "\n", _jsxs(_components.p, { children: ["CSS мощный, и всегда приятно исследовать, чего мы можем с его помощью добиться. Есть также другие CSS-свойства, такие как ", _jsx(_components.code, { children: "scroll-snap-type" }), " и ", _jsx(_components.code, { children: "scroll-snap-align" }), ", которые могут помочь вам создать интерактивную карусель. Приятного кодинга! 🚀"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, Styles, RowOfCards, Cards, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }