---
title: "Marquee"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Pure CSS Tailwind CSS Marquee with infinite scroll, pause-on-hover, reverse direction, and vertical support. No JavaScript required."
url: https://frutjam.com/tr/components/marquee
---

# Marquee

Seçim çerçevesi bileşenleri sonsuz, sürekli kayan içerik şeritleri oluşturur; marka logoları, duyuru banner'ları, referanslar veya etiket bulutları için idealdir. Tamamen CSS animasyonlarıyla oluşturulan Frutjam çerçevesi, yatay ve dikey yönleri, fareyle üzerine gelindiğinde duraklatmayı, geri döndürülebilir oynatmayı ve hız kontrolünü destekler. Kesintisiz, boşluksuz bir döngü için `marquee-track` öğesini (`aria-hidden` ile) çoğaltın.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf            | Tip         | Tanım                                                                      |
| ---------------- | ----------- | -------------------------------------------------------------------------- |
| marquee          | Temel       | Dış kap — klipler taşar ve animasyon değişkenlerini tutar                  |
| marquee-track    | Değiştirici | İç sırayı kaydırarak; Sorunsuz bir döngü için `aria-hidden` ile kopyalayın |
| marquee-pause    | Değiştirici | Fareyle üzerine gelindiğinde animasyonu duraklatır                         |
| marquee-reverse  | Değiştirici | Ters yönde kaydırır                                                        |
| marquee-vertical | Değiştirici | Soldan sağa kaydırmak yerine yukarıdan aşağıya kaydırma yapar              |
| marquee-slow     | Speed       | Yavaş kaydırma (40'lı döngü)                                               |
| marquee-normal   | Speed       | Varsayılan hız (20 saniyelik döngü)                                        |
| marquee-fast     | Speed       | Hızlı kaydırma (10 saniyelik döngü)                                        |
| marquee-fade     | Değiştirici | Her iki tarafa da degrade solma kenarları ekler                            |

## Temel Kullanım

İki özdeş `marquee-track` öğesi ekleyin; ikincisi (`aria-hidden="true"` ile), ilki ekrandan kaydırıldığında boşluğu doldurur.

## Fareyle üzerine gelindiğinde duraklat

Kullanıcı şeridin üzerine geldiğinde animasyonu durdurmak için `marquee-pause` ekleyin.

```html
<div class="marquee marquee-pause">
  <div class="marquee-track">
    <span class="badge badge-primary badge-soft">Hover me</span>
    <span class="badge badge-secondary badge-soft">to pause</span>
    <span class="badge badge-accent badge-soft">the scroll</span>
    <span class="badge badge-info badge-soft">Animation</span>
    <span class="badge badge-success badge-soft">stops here</span>
  </div>
  <div class="marquee-track" aria-hidden="true">
    <span class="badge badge-primary badge-soft">Hover me</span>
    <span class="badge badge-secondary badge-soft">to pause</span>
    <span class="badge badge-accent badge-soft">the scroll</span>
    <span class="badge badge-info badge-soft">Animation</span>
    <span class="badge badge-success badge-soft">stops here</span>
  </div>
</div>
```

## Ters Yön

Soldan sağa kaydırmak yerine sağdan sola kaydırmak için `marquee-reverse` komutunu kullanın. Katmanlı bir etki için iki satırı birleştirin.

```html
<div class="flex flex-col gap-3">
  <div class="marquee">
    <div class="marquee-track">
      <span class="badge badge-primary">Alpha</span>
      <span class="badge badge-secondary">Beta</span>
      <span class="badge badge-accent">Gamma</span>
      <span class="badge badge-info">Delta</span>
      <span class="badge badge-success">Epsilon</span>
    </div>
    <div class="marquee-track" aria-hidden="true">
      <span class="badge badge-primary">Alpha</span>
      <span class="badge badge-secondary">Beta</span>
      <span class="badge badge-accent">Gamma</span>
      <span class="badge badge-info">Delta</span>
      <span class="badge badge-success">Epsilon</span>
    </div>
  </div>
  <div class="marquee marquee-reverse">
    <div class="marquee-track">
      <span class="badge badge-soft badge-primary">Alpha</span>
      <span class="badge badge-soft badge-secondary">Beta</span>
      <span class="badge badge-soft badge-accent">Gamma</span>
      <span class="badge badge-soft badge-info">Delta</span>
      <span class="badge badge-soft badge-success">Epsilon</span>
    </div>
    <div class="marquee-track" aria-hidden="true">
      <span class="badge badge-soft badge-primary">Alpha</span>
      <span class="badge badge-soft badge-secondary">Beta</span>
      <span class="badge badge-soft badge-accent">Gamma</span>
      <span class="badge badge-soft badge-info">Delta</span>
      <span class="badge badge-soft badge-success">Epsilon</span>
    </div>
  </div>
</div>
```

## Hız Çeşitleri

```html
<div class="flex flex-col gap-3">
  <div class="marquee marquee-slow">
    <div class="marquee-track">
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
    </div>
    <div class="marquee-track" aria-hidden="true">
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
      <span class="badge badge-soft">Slow</span>
    </div>
  </div>
  <div class="marquee">
    <div class="marquee-track">
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
    </div>
    <div class="marquee-track" aria-hidden="true">
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
      <span class="badge badge-primary badge-soft">Normal</span>
    </div>
  </div>
  <div class="marquee marquee-fast">
    <div class="marquee-track">
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
    </div>
    <div class="marquee-track" aria-hidden="true">
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
      <span class="badge badge-accent badge-soft">Fast</span>
    </div>
  </div>
</div>
```

## Dikey Çerçeve

`marquee-vertical` ekleyin ve yukarıdan aşağıya kaydırma için kapsayıcıya sabit bir yükseklik verin.

```html
<div class="marquee marquee-vertical h-48">
  <div class="marquee-track">
    <div class="badge badge-primary badge-soft">Announcement one</div>
    <div class="badge badge-secondary badge-soft">Announcement two</div>
    <div class="badge badge-accent badge-soft">Announcement three</div>
    <div class="badge badge-info badge-soft">Announcement four</div>
    <div class="badge badge-success badge-soft">Announcement five</div>
  </div>
  <div class="marquee-track" aria-hidden="true">
    <div class="badge badge-primary badge-soft">Announcement one</div>
    <div class="badge badge-secondary badge-soft">Announcement two</div>
    <div class="badge badge-accent badge-soft">Announcement three</div>
    <div class="badge badge-info badge-soft">Announcement four</div>
    <div class="badge badge-success badge-soft">Announcement five</div>
  </div>
</div>
```

## Teknoloji Etiketleri

Bir beceri setini veya teknoloji yığınını sergilemek için yaygın bir model.

```html
<div class="marquee marquee-pause [--marquee--gap:0.75rem] p-2">
  <div class="marquee-track">
    <span class="badge badge-outline">HTML</span>
    <span class="badge badge-outline">CSS</span>
    <span class="badge badge-outline">JavaScript</span>
    <span class="badge badge-outline">TypeScript</span>
    <span class="badge badge-outline">React</span>
    <span class="badge badge-outline">Vue</span>
    <span class="badge badge-outline">Tailwind CSS</span>
    <span class="badge badge-outline">Node.js</span>
  </div>
  <div class="marquee-track" aria-hidden="true">
    <span class="badge badge-outline">HTML</span>
    <span class="badge badge-outline">CSS</span>
    <span class="badge badge-outline">JavaScript</span>
    <span class="badge badge-outline">TypeScript</span>
    <span class="badge badge-outline">React</span>
    <span class="badge badge-outline">Vue</span>
    <span class="badge badge-outline">Tailwind CSS</span>
    <span class="badge badge-outline">Node.js</span>
  </div>
</div>
```

## Özel Boşluk

Aralığa ve hıza ince ayar yapmak için `--marquee--gap` veya `--marquee--duration`'u satır içi bir yardımcı programla geçersiz kılın.

```html
<div class="marquee [--marquee--gap:2rem] [--marquee--duration:30s]">
  <div class="marquee-track">
    <span class="badge badge-lg badge-primary">Wide gap</span>
    <span class="badge badge-lg badge-secondary">Wide gap</span>
    <span class="badge badge-lg badge-accent">Wide gap</span>
    <span class="badge badge-lg badge-info">Wide gap</span>
  </div>
  <div class="marquee-track" aria-hidden="true">
    <span class="badge badge-lg badge-primary">Wide gap</span>
    <span class="badge badge-lg badge-secondary">Wide gap</span>
    <span class="badge badge-lg badge-accent">Wide gap</span>
    <span class="badge badge-lg badge-info">Wide gap</span>
  </div>
</div>
```

## Kenarları Soldur

Gösterişli bir görünüm elde etmek amacıyla şeridin her iki ucunu da sayfa arka planına geçirmek için `marquee-fade` ekleyin.

```html
<div class="marquee marquee-fade marquee-pause">
  <div class="marquee-track">
    <span class="badge badge-soft badge-primary">Design</span>
    <span class="badge badge-soft badge-secondary">Development</span>
    <span class="badge badge-soft badge-accent">Performance</span>
    <span class="badge badge-soft badge-info">Accessibility</span>
    <span class="badge badge-soft badge-success">Open Source</span>
    <span class="badge badge-soft badge-warning">Security</span>
    <span class="badge badge-soft badge-error">Testing</span>
  </div>
  <div class="marquee-track" aria-hidden="true">
    <span class="badge badge-soft badge-primary">Design</span>
    <span class="badge badge-soft badge-secondary">Development</span>
    <span class="badge badge-soft badge-accent">Performance</span>
    <span class="badge badge-soft badge-info">Accessibility</span>
    <span class="badge badge-soft badge-success">Open Source</span>
    <span class="badge badge-soft badge-warning">Security</span>
    <span class="badge badge-soft badge-error">Testing</span>
  </div>
</div>
```

## Duyuru Banner'ı

Promosyonlar veya site genelindeki bildirimler için ince bir şerit çubuğu. En iyi deneyim için `marquee-fade` ve `marquee-pause`'u birleştirin.

```html
<div class="bg-primary text-on-primary py-2 px-4">
  <div class="marquee marquee-fade marquee-pause [--marquee--duration:30s]">
    <div class="marquee-track text-sm font-medium">
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🎉 Version 2.0 is here — explore what's new</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🌿 Built with Tailwind CSS v4</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">⚡ Zero JavaScript, pure CSS components</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🎨 Fully themeable with CSS variables</span>
    </div>
    <div class="marquee-track text-sm font-medium" aria-hidden="true">
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🎉 Version 2.0 is here — explore what's new</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🌿 Built with Tailwind CSS v4</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">⚡ Zero JavaScript, pure CSS components</span>
      <span class="inline-flex items-center gap-2 whitespace-nowrap px-4">🎨 Fully themeable with CSS variables</span>
    </div>
  </div>
</div>
```

## Logo Çerçevesi

Sürekli kayan bir şeritte iş ortaklarını veya güvenilir markaları sergileyin. Kenarları arka planla karıştırmak için `marquee-fade`'i kullanın.

```html
<div class="marquee marquee-fade marquee-pause [--marquee--gap:3rem] [--marquee--duration:25s]">
  <div class="marquee-track items-center">
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Acme</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Globex</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Initech</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Umbrella</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Hooli</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Pied Piper</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Vehement</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Massive</span>
    </div>
  </div>
  <div class="marquee-track items-center" aria-hidden="true">
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Acme</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Globex</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Initech</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Umbrella</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Hooli</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Pied Piper</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Vehement</span>
    </div>
    <div class="flex items-center justify-center h-10 px-4 opacity-60 hover:opacity-100 transition-opacity">
      <span class="text-xl font-bold tracking-tight">Massive</span>
    </div>
  </div>
</div>
```

## Referans Kartları

Okunabilirlik için fareyle üzerine gelindiğinde ince bir duraklama ile referans kartları arasında gezinin.

```html
<div class="marquee marquee-fade marquee-pause [--marquee--gap:1rem] [--marquee--duration:40s]">
  <div class="marquee-track items-stretch">
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Absolutely love the component library. Saves us hours every sprint."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-primary">A</div>
          <div>
            <p class="text-sm font-medium">Alex Morgan</p>
            <p class="text-xs text-body">Frontend Engineer</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"The best Tailwind UI kit I've used. Clean, accessible, and easy to customize."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-secondary">J</div>
          <div>
            <p class="text-sm font-medium">Jamie Lee</p>
            <p class="text-xs text-body">Product Designer</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Shipped our design system 3× faster thanks to Frutjam. Highly recommend."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-accent">S</div>
          <div>
            <p class="text-sm font-medium">Sam Rivera</p>
            <p class="text-xs text-body">Tech Lead</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Great DX, thoughtful defaults, and the dark mode just works out of the box."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-info">R</div>
          <div>
            <p class="text-sm font-medium">Riley Chen</p>
            <p class="text-xs text-body">Full Stack Developer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="marquee-track items-stretch" aria-hidden="true">
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Absolutely love the component library. Saves us hours every sprint."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-primary">A</div>
          <div>
            <p class="text-sm font-medium">Alex Morgan</p>
            <p class="text-xs text-body">Frontend Engineer</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"The best Tailwind UI kit I've used. Clean, accessible, and easy to customize."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-secondary">J</div>
          <div>
            <p class="text-sm font-medium">Jamie Lee</p>
            <p class="text-xs text-body">Product Designer</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Shipped our design system 3× faster thanks to Frutjam. Highly recommend."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-accent">S</div>
          <div>
            <p class="text-sm font-medium">Sam Rivera</p>
            <p class="text-xs text-body">Tech Lead</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card card-outline w-72 shrink-0">
      <div class="card-content">
        <p class="text-sm">"Great DX, thoughtful defaults, and the dark mode just works out of the box."</p>
        <div class="flex items-center gap-2 mt-3">
          <div class="avatar avatar-sm avatar-circle avatar-info">R</div>
          <div>
            <p class="text-sm font-medium">Riley Chen</p>
            <p class="text-xs text-body">Full Stack Developer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```