"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "einführung", "hProperties": { "id": "einführung" } }, "depth": 2, "value": "Einführung" }, { "data": { "id": "erzeuge-eine-reihe-von-karten", "hProperties": { "id": "erzeuge-eine-reihe-von-karten" } }, "depth": 2, "value": "Erzeuge eine Reihe von Karten" }, { "data": { "id": "verdoppel-die-karten", "hProperties": { "id": "verdoppel-die-karten" } }, "depth": 2, "value": "Verdoppel die Karten" }, { "data": { "id": "das-karussell-animieren", "hProperties": { "id": "das-karussell-animieren" } }, "depth": 2, "value": "Das Karussell animieren" }, { "data": { "id": "abschließende-gedanken", "hProperties": { "id": "abschließende-gedanken" } }, "depth": 2, "value": "Abschließende Gedanken" }]; const readingTime = { "minutes": 2, "words": 747, "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: "einführung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einführung", children: _jsx(_components.span, { children: "#" }) }), "Einführung"] }), "\n", _jsx(_components.p, { children: "Wir lieben JavaScript, natürlich. Aber es macht immer Spaß zu sehen, was man nur mit CSS erreichen kann - besonders wenn es um Animationen geht, da CSS-Animationen oft \"weniger schwer\" als JavaScript-Animationen sind." }), "\n", _jsx(_components.p, { children: "In diesem Beitrag zeige ich dir, wie du eine unendliche Scroll-Karussell-Animation mit Pause bei Hover-Effekt nur mit CSS erstellst. Hier ist eine Vorschau dessen, was wir bauen werden:" }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Dieses Tutorial verwendet die Syntax des ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector", children: "& geschachtelten Selektors" }), ", ein Feature von Baseline 2023. Bitte passe den Code entsprechend an, wenn du ältere Browser anvisierst."] }) }), "\n", _jsxs(_components.h2, { id: "erzeuge-eine-reihe-von-karten", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erzeuge-eine-reihe-von-karten", children: _jsx(_components.span, { children: "#" }) }), "Erzeuge eine Reihe von Karten"] }), "\n", _jsx(_components.p, { children: "Lass uns zuerst die Grundstruktur unseres Karussells erstellen. Betrachte eine Reihe von Karten:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n" }) }), "\n", _jsx(RowOfCards, {}), "\n", _jsx(_components.p, { children: "Sieht gut aus, oder? Die Karten können deine schicken Banner, Produktbilder oder alles sein, was du in deinem Karussell präsentieren möchtest." }), "\n", _jsxs(_components.h2, { id: "verdoppel-die-karten", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verdoppel-die-karten", children: _jsx(_components.span, { children: "#" }) }), "Verdoppel die Karten"] }), "\n", _jsx(_components.p, { children: "Da wir wollen, dass das Karussell unendlich ist, sollte es übergangslos verbunden sein. Instinktiv könnten wir versuchen, die Karten zu wiederholen:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Schau dir das Ergebnis an:" }), "\n", _jsx(Cards, {}), "\n", _jsx(_components.p, { children: "Nur das erste Karten-Set ist sichtbar. Wenn du den HTML-Code überprüfst, wirst du sehen, dass das zweite Karten-Set versteckt ist und dem ersten Set folgt." }), "\n", _jsxs(_components.h2, { id: "das-karussell-animieren", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#das-karussell-animieren", children: _jsx(_components.span, { children: "#" }) }), "Das Karussell animieren"] }), "\n", _jsx(_components.p, { children: "Zeit, das Karussell zu animieren! Da wir zwei verbundene Karten-Sets haben, können wir das Karussell animieren, indem wir die Kartengruppen transformieren. So geht's:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "Wir haben noch einen letzten Schliff hinzuzufügen: das Anhalten der Animation, wenn man über das Karussell schwebt. Dies gibt den Nutzern die Möglichkeit, den Inhalt besser zu sehen. Da wir zwei Kartensets haben, müssen wir beide Gruppen anhalten, wenn wir über das Karussell schwebt:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "Das war's! 🎊 Nun wird das Karussell anhalten, wenn du mit der Maus darüber fährst." }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsxs(_components.h2, { id: "abschließende-gedanken", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#abschließende-gedanken", children: _jsx(_components.span, { children: "#" }) }), "Abschließende Gedanken"] }), "\n", _jsxs(_components.p, { children: ["CSS ist mächtig, und es macht immer Spaß zu erkunden, was man damit erreichen kann. Es gibt auch andere CSS-Eigenschaften wie ", _jsx(_components.code, { children: "scroll-snap-type" }), " und ", _jsx(_components.code, { children: "scroll-snap-align" }), ", die dir helfen können, ein interaktives Karussell zu erstellen. Viel Spaß beim Programmieren! 🚀"] })] }); } 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."); }