"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "johdanto", "hProperties": { "id": "johdanto" } }, "depth": 2, "value": "Johdanto" }, { "data": { "id": "luo-korttirivi", "hProperties": { "id": "luo-korttirivi" } }, "depth": 2, "value": "Luo korttirivi" }, { "data": { "id": "kaksinna-kortit", "hProperties": { "id": "kaksinna-kortit" } }, "depth": 2, "value": "Kaksinna kortit" }, { "data": { "id": "animaatio-karusellille", "hProperties": { "id": "animaatio-karusellille" } }, "depth": 2, "value": "Animaatio karusellille" }, { "data": { "id": "lopuksi", "hProperties": { "id": "lopuksi" } }, "depth": 2, "value": "Lopuksi" }]; const readingTime = { "minutes": 2, "words": 643, "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: "johdanto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#johdanto", children: _jsx(_components.span, { children: "#" }) }), "Johdanto"] }), "\n", _jsx(_components.p, { children: "Rakastamme JavaScriptiä, tietenkin. Mutta aina on hauskaa nähdä, mitä voimme saavuttaa pelkästään CSS:llä - erityisesti animaatioiden kohdalla, koska CSS-animaatiot ovat usein \"vähemmän raskaita\" kuin JavaScript-animaatiot." }), "\n", _jsx(_components.p, { children: "Tässä artikkelissa näytän sinulle, miten luodaan loputon vierivä karusellianimaatio, joka pysähtyy hover-efektillä käyttäen vain CSS:ää. Tässä on esikatselu siitä, mitä olemme rakentamassa:" }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Tämä opas käyttää ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector", children: "& nesting\nselector" }), " -syntaksia, joka on\nBaseline 2023 ominaisuus. Säädä koodi vastaavasti, jos kohdistat vanhempiin selaimiin."] }) }), "\n", _jsxs(_components.h2, { id: "luo-korttirivi", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#luo-korttirivi", children: _jsx(_components.span, { children: "#" }) }), "Luo korttirivi"] }), "\n", _jsx(_components.p, { children: "Aloitetaan luomalla karusellin perusrakenne. Mieti korttiriviä:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n" }) }), "\n", _jsx(RowOfCards, {}), "\n", _jsx(_components.p, { children: "Näyttää hyvältä, eikö vain? Kortit voivat olla hienoja bannereitasi, tuotekuviasi tai mitä tahansa, mitä haluat esitellä karusellissasi." }), "\n", _jsxs(_components.h2, { id: "kaksinna-kortit", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kaksinna-kortit", children: _jsx(_components.span, { children: "#" }) }), "Kaksinna kortit"] }), "\n", _jsx(_components.p, { children: "Koska haluamme karusellin olevan loputon, sen tulisi olla yhdistetty päistään. Vaistomaisesti voimme yrittää toistaa kortit:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Katso tulos:" }), "\n", _jsx(Cards, {}), "\n", _jsx(_components.p, { children: "Vain ensimmäinen korttisarja on näkyvillä. Jos tarkistat HTML:n, näet, että toinen korttisarja on piilossa ja seuraa ensimmäistä sarjaa." }), "\n", _jsxs(_components.h2, { id: "animaatio-karusellille", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#animaatio-karusellille", children: _jsx(_components.span, { children: "#" }) }), "Animaatio karusellille"] }), "\n", _jsx(_components.p, { children: "On aika animoida karuselli! Koska meillä on kaksi korttisarjaa yhdistettynä, voimme animoida karusellin muuntamalla korttiryhmiä. Tässä miten:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "Meillä on vielä yksi viimeinen silaus lisättävänä: animaation pysäyttäminen, kun kohdistetaan karuselliin. Tämä antaa käyttäjille mahdollisuuden nähdä sisällön selkeämmin. Koska meillä on kaksi korttisarjaa, meidän on pysäytettävä molemmat ryhmät, kun kohdistetaan karuselliin:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "Siinä kaikki! 🎊 Nyt karuselli pysähtyy, kun viet hiiren sen päälle." }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsxs(_components.h2, { id: "lopuksi", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lopuksi", children: _jsx(_components.span, { children: "#" }) }), "Lopuksi"] }), "\n", _jsxs(_components.p, { children: ["CSS on voimakas, ja on aina hauskaa tutkia, mitä voimme saavuttaa sen avulla. On myös muita CSS-ominaisuuksia, kuten ", _jsx(_components.code, { children: "scroll-snap-type" }), " ja ", _jsx(_components.code, { children: "scroll-snap-align" }), ", jotka voivat auttaa sinua luomaan interaktiivisen karusellin. Iloista koodausta! 🚀"] })] }); } 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."); }