"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "inleiding", "hProperties": { "id": "inleiding" } }, "depth": 2, "value": "Inleiding" }, { "data": { "id": "maak-een-rij-kaarten", "hProperties": { "id": "maak-een-rij-kaarten" } }, "depth": 2, "value": "Maak een rij kaarten" }, { "data": { "id": "dupliceer-de-kaarten", "hProperties": { "id": "dupliceer-de-kaarten" } }, "depth": 2, "value": "Dupliceer de kaarten" }, { "data": { "id": "animeer-de-carrousel", "hProperties": { "id": "animeer-de-carrousel" } }, "depth": 2, "value": "Animeer de carrousel" }, { "data": { "id": "slotgedachten", "hProperties": { "id": "slotgedachten" } }, "depth": 2, "value": "Slotgedachten" }]; const readingTime = { "minutes": 3, "words": 756, "text": "3 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: "inleiding", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inleiding", children: _jsx(_components.span, { children: "#" }) }), "Inleiding"] }), "\n", _jsx(_components.p, { children: "We houden natuurlijk van JavaScript. Maar het is altijd leuk om te zien wat we alleen met CSS kunnen bereiken - vooral als het om animaties gaat, omdat CSS-animaties vaak \"minder zwaar\" zijn dan JavaScript-animaties." }), "\n", _jsx(_components.p, { children: "In dit artikel laat ik je zien hoe je een eindeloze scrollende carrouselanimatie kunt maken met pauze bij hover-effect, alleen met CSS. Hier is een voorbeeld van wat we gaan bouwen:" }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Deze tutorial maakt gebruik van ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector", children: "& nesting\nselector" }), " syntaxis, wat een\nBaseline 2023-functie is. Pas de code dienovereenkomstig aan als je oudere browsers target."] }) }), "\n", _jsxs(_components.h2, { id: "maak-een-rij-kaarten", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#maak-een-rij-kaarten", children: _jsx(_components.span, { children: "#" }) }), "Maak een rij kaarten"] }), "\n", _jsx(_components.p, { children: "Laten we eerst de basisstructuur van onze carrousel maken. Beschouw een rij kaarten:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n" }) }), "\n", _jsx(RowOfCards, {}), "\n", _jsx(_components.p, { children: "Ziet er goed uit, toch? De kaarten kunnen je leuke banners zijn, productafbeeldingen, of alles wat je in je carrousel wilt laten zien." }), "\n", _jsxs(_components.h2, { id: "dupliceer-de-kaarten", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dupliceer-de-kaarten", children: _jsx(_components.span, { children: "#" }) }), "Dupliceer de kaarten"] }), "\n", _jsx(_components.p, { children: "Omdat we willen dat de carrousel eindeloos is, moet deze eind-voor-eind verbonden zijn. Instinctief kunnen we proberen de kaarten te herhalen:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Bekijk het resultaat:" }), "\n", _jsx(Cards, {}), "\n", _jsx(_components.p, { children: "Alleen de eerste reeks kaarten is zichtbaar. Als je de HTML controleert, zie je dat de tweede set kaarten verborgen is en de eerste volgt." }), "\n", _jsxs(_components.h2, { id: "animeer-de-carrousel", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#animeer-de-carrousel", children: _jsx(_components.span, { children: "#" }) }), "Animeer de carrousel"] }), "\n", _jsx(_components.p, { children: "Tijd om de carrousel te animeren! Aangezien we twee sets kaarten hebben die verbonden zijn, kunnen we de carrousel animeren door de kaartgroepen te transformeren. Zo doe je dat:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "We hebben nog één laatste touch toe te voegen: de animatie pauzeren bij het zweven boven de carrousel. Dit geeft gebruikers de kans om de inhoud duidelijker te zien. Aangezien we twee sets kaarten hebben, moeten we beide groepen pauzeren als we over de carrousel zweven:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "Dat is het! 🎊 Nu zal de carrousel pauzeren als je er met de muis overheen zweeft." }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsxs(_components.h2, { id: "slotgedachten", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#slotgedachten", children: _jsx(_components.span, { children: "#" }) }), "Slotgedachten"] }), "\n", _jsxs(_components.p, { children: ["CSS is krachtig en het is altijd leuk om te verkennen wat we ermee kunnen bereiken. Er zijn ook andere CSS-eigenschappen zoals ", _jsx(_components.code, { children: "scroll-snap-type" }), " en ", _jsx(_components.code, { children: "scroll-snap-align" }), " die je kunnen helpen een interactieve carrousel te maken. Veel plezier met coderen! 🚀"] })] }); } 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."); }