"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "giriş", "hProperties": { "id": "giriş" } }, "depth": 2, "value": "Giriş" }, { "data": { "id": "kart-sırası-oluşturun", "hProperties": { "id": "kart-sırası-oluşturun" } }, "depth": 2, "value": "Kart sırası oluşturun" }, { "data": { "id": "kartları-çoğaltın", "hProperties": { "id": "kartları-çoğaltın" } }, "depth": 2, "value": "Kartları çoğaltın" }, { "data": { "id": "karuseli-animasyonlu-hale-getirin", "hProperties": { "id": "karuseli-animasyonlu-hale-getirin" } }, "depth": 2, "value": "Karuseli animasyonlu hale getirin" }, { "data": { "id": "son-düşünceler", "hProperties": { "id": "son-düşünceler" } }, "depth": 2, "value": "Son düşünceler" }]; const readingTime = { "minutes": 2, "words": 658, "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: "giriş", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#giriş", children: _jsx(_components.span, { children: "#" }) }), "Giriş"] }), "\n", _jsx(_components.p, { children: "Elbette JavaScript'i seviyoruz. Ancak yalnızca CSS ile neler başarabileceğimizi görmek her zaman eğlencelidir - özellikle de animasyonlar söz konusu olduğunda, çünkü CSS animasyonları genellikle JavaScript animasyonlarından \"daha hafif\" olur." }), "\n", _jsx(_components.p, { children: "Bu yazıda, yalnızca CSS kullanarak fare üzerine geldiğinizde duraklama etkisi olan sonsuz bir kaydırma karusel animasyonu nasıl oluşturacağınızı göstereceğim. İşte inşa edeceğimiz şeyin önizlemesi:" }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Bu eğitim, Baseline 2023 özelliği olan ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector", children: "& iç içe seçimci\nbağlayıcıyı" }), " kullanır. Daha eski tarayıcılara yönelik olarak kodu ayarlayın."] }) }), "\n", _jsxs(_components.h2, { id: "kart-sırası-oluşturun", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kart-sırası-oluşturun", children: _jsx(_components.span, { children: "#" }) }), "Kart sırası oluşturun"] }), "\n", _jsx(_components.p, { children: "Öncelikle, karuselimizin temel yapısını oluşturalım. Bir kart sırası düşünün:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n" }) }), "\n", _jsx(RowOfCards, {}), "\n", _jsx(_components.p, { children: "Güzel görünüyor, değil mi? Kartlar, karuselinizde sergilemek istediğiniz şık afişleriniz, ürün resimleriniz veya başka herhangi bir şey olabilir." }), "\n", _jsxs(_components.h2, { id: "kartları-çoğaltın", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kartları-çoğaltın", children: _jsx(_components.span, { children: "#" }) }), "Kartları çoğaltın"] }), "\n", _jsx(_components.p, { children: "Sonsuz bir karusel istediğimizden, uçtan uca bağlı olmalıdır. İçgüdüsel olarak, kartları tekrarlamayı deneyebiliriz:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Sonucu kontrol edin:" }), "\n", _jsx(Cards, {}), "\n", _jsx(_components.p, { children: "Yalnızca ilk kart seti görünür. HTML'yi kontrol ederseniz, ikinci kart setinin gizli olduğunu ve ilk sette bulunduğunu göreceksiniz." }), "\n", _jsxs(_components.h2, { id: "karuseli-animasyonlu-hale-getirin", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#karuseli-animasyonlu-hale-getirin", children: _jsx(_components.span, { children: "#" }) }), "Karuseli animasyonlu hale getirin"] }), "\n", _jsx(_components.p, { children: "Karuseli animasyonlu hale getirme zamanı! İki kart setimiz bağlı olduğundan, kart gruplarını dönüştürerek karuseli animasyonlu hale getirebiliriz. İşte böyle yapılır:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "Son olarak eklememiz gereken bir dokunuş daha var: fare karusel üzerine geldiğinde animasyonu duraklatma. Bu, kullanıcıların içeriği daha net görmesine olanak tanır. İki kart setimiz olduğundan, karusel üzerine geldiğinde her iki grubu da duraklatmamız gerekiyor:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "Hepsi bu kadar! 🎊 Şimdi karuselin üzerine geldiğinizde duracak." }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsxs(_components.h2, { id: "son-düşünceler", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#son-düşünceler", children: _jsx(_components.span, { children: "#" }) }), "Son düşünceler"] }), "\n", _jsxs(_components.p, { children: ["CSS güçludur ve onunla neler başarabileceğimizi keşfetmek her zaman eğlencelidir. Ayrıca ", _jsx(_components.code, { children: "scroll-snap-type" }), " ve ", _jsx(_components.code, { children: "scroll-snap-align" }), " gibi interaktif bir karusel oluşturmanıza yardımcı olabilecek diğer CSS özellikleri de vardır. İyi kodlamalar! 🚀"] })] }); } 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."); }