"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduktion", "hProperties": { "id": "introduktion" } }, "depth": 2, "value": "Introduktion" }, { "data": { "id": "skapa-en-rad-av-kort", "hProperties": { "id": "skapa-en-rad-av-kort" } }, "depth": 2, "value": "Skapa en rad av kort" }, { "data": { "id": "duplicera-korten", "hProperties": { "id": "duplicera-korten" } }, "depth": 2, "value": "Duplicera korten" }, { "data": { "id": "animera-karusellen", "hProperties": { "id": "animera-karusellen" } }, "depth": 2, "value": "Animera karusellen" }, { "data": { "id": "slutliga-tankar", "hProperties": { "id": "slutliga-tankar" } }, "depth": 2, "value": "Slutliga tankar" }]; const readingTime = { "minutes": 2, "words": 741, "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: "introduktion", children: ["Introduktion", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduktion", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Vi älskar JavaScript, förstås. Men det är alltid kul att se vad vi kan uppnå bara med CSS - särskilt när det kommer till animationer, eftersom CSS-animationer ofta är \"mindre tunga\" än JavaScript-animationer." }), "\n", _jsx(_components.p, { children: "I detta inlägg kommer jag att visa dig hur man skapar en oändlig rulllista-animation med paus vid svävningseffekt endast med CSS. Här är en förhandsvisning av vad vi ska bygga:" }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Denna handledning använder ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector", children: "& nesting\nselector" }), " syntax, vilket är en\nBaseline 2023-funktion. Vänligen justera koden därefter om du riktar in dig på äldre webbläsare."] }) }), "\n", _jsxs(_components.h2, { id: "skapa-en-rad-av-kort", children: ["Skapa en rad av kort", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#skapa-en-rad-av-kort", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Först, låt oss skapa den grundläggande strukturen för vår karusell. Tänk på en rad av kort:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n" }) }), "\n", _jsx(RowOfCards, {}), "\n", _jsx(_components.p, { children: "Ser bra ut, eller hur? Korten kan vara dina snygga banners, produktbilder eller vad som helst du vill visa upp i din karusell." }), "\n", _jsxs(_components.h2, { id: "duplicera-korten", children: ["Duplicera korten", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#duplicera-korten", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Eftersom vi vill att karusellen ska vara oändlig, bör den vara kopplad från början till slut. Instinktivt kan vi försöka upprepa korten:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Titta på resultatet:" }), "\n", _jsx(Cards, {}), "\n", _jsx(_components.p, { children: "Endast den första uppsättningen av kort är synlig. Om du kontrollerar HTML, ser du att den andra uppsättningen av kort är dold och följer den första uppsättningen." }), "\n", _jsxs(_components.h2, { id: "animera-karusellen", children: ["Animera karusellen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#animera-karusellen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Dags att animera karusellen! Eftersom vi har två uppsättningar av kort kopplade, kan vi animera karusellen genom att transformera kortgrupperna. Så här gör du:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "Vi har fortfarande en sista touch att lägga till: att pausa animationen när man svävar över karusellen. Detta ger användarna en chans att se innehållet mer tydligt. Eftersom vi har två uppsättningar av kort, måste vi pausa båda grupperna när vi svävar över karusellen:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "Det är allt! 🎊 Nu pausas karusellen när du svävar över den." }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsxs(_components.h2, { id: "slutliga-tankar", children: ["Slutliga tankar", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#slutliga-tankar", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["CSS är kraftfullt, och det är alltid kul att utforska vad vi kan uppnå med det. Det finns också andra CSS-egenskaper som ", _jsx(_components.code, { children: "scroll-snap-type" }), " och ", _jsx(_components.code, { children: "scroll-snap-align" }), " som kan hjälpa dig att skapa en interaktiv karusell. Lycka till med kodningen! 🚀"] })] }); } 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."); }