Softonic

Generator Teks untuk Scroling

Langkah 1 / 2
Berikutnya

Judul yang bergulir merupakan cara bar pengumuman, kode saham, dan banner acara menyajikan banyak informasi dalam bentuk jalur sempit di layar. Generator ini menciptakan kembali efek klasik HTML <marquee> menggunakan animasi CSS murni @keyframes dan transform: translateX(), sehingga tekniknya tetap berfungsi di semua peramban modern tanpa tag usang. Pilih pesan yang diinginkan, aturlah kecepatan (dalam detik per siklus), tentukan warna dan ukuran huruf, lalu pratinjau ticker secara langsung sebelum membangunnya kembali dengan CSS yang ditampilkan di bawah.

Cara membuat banner bergulir

  1. 1

    Masukkan pesan

    Masukkan judul. Baris pendek (4–10 kata) paling cocok ditampilkan pada strip bergerak.

  2. 2

    Pilih kecepatan

    Semakin cepat detiknya, semakin cepat pula proses gulirannya. Durasi 30–60 detik per siklus penuh cocok untuk tampilan ticker bergaya berita.

  3. 3

    Atur warna dan ukuran

    Pilih latar depan untuk teks, latar belakang untuk strip, serta ukuran font yang sesuai dengan tinggi header Anda.

  4. 4

    Pratinjau langsung

    Demo ini dianimasi secara real-time, sehingga Anda dapat menilai tingkat kejelasan sebelum produk dikirimkan.

  5. 5

    Bangun kembali dengan CSS

    Salin pola `@keyframes` dan `transform: translateX()` yang ditampilkan di bawah ke lembar gaya Anda sendiri untuk mereproduksi ticker di situs Anda.

Mengapa menggunakan animasi CSS daripada <marquee>

Tag <marquee> telah dinyatakan tidak lagi digunakan dalam HTML5 dan oleh WHATWG ditetapkan sebagai usang. Meskipun peramban masih menampilkan tag ini untuk saat ini, alat aksesibilitas serta alat validasi mengeluhkan keterbatasan tersebut, sehingga pengguna kehilangan kendali yang baik terhadap efek easing dan looping. Animasi berformat transform: translateX() yang dijalankan dalam konteks overflow: hidden memberikan perilaku visual yang identik dengan alat-alat modern saat ini.

Mengatur kecepatan

Waktu yang dibutuhkan untuk menyeberangi area tersebut bergantung pada durasi serta lebar totalnya. Berikut aturan umum untuk viewport berukuran 1200 piksel:

Durasi Perasaan Penggunaan Umum
10–20 detik Cepat, menarik perhatian Penjualan kilat, peringatan darurat
30–45 detik Berita berkelanjutan Skor langsung dan bar judul
60–90 detik Suasana sekitar Penanda lokasi dan ruang konferensi
120 detik + Hampir tidak bergerak Spanduk merek mewah bergaya dekoratif

Daftar Pemeriksaan Aksesibilitas

  • Balut pita tersebut dengan bahan role="marquee" atau aria-live="off" agar pembaca layar tidak mengulangi pengumuman pesan setiap kali siklus berjalan.
  • Hormati pengurangan gerakan menggunakan @media (prefers-reduced-motion: reduce) { animation: none; } dan tampilkan teks secara statis.
  • Pertahankan rasio kontras minimal 4,5:1 antara teks dan latar belakang; teks yang bergerak lebih sulit dibaca dibandingkan teks statis.
  • Jangan pernah menempatkan informasi penting (pemberitahuan hukum, harga, pesan kesalahan) hanya di dalam bilah gulir.

Pertanyaan yang Sering Diajukan

Tidak. Pratinjaunya adalah kode <div> yang mencakup elemen overflow: hidden serta animasi CSS @keyframes yang menggerakkan bagian dalam menggunakan translateX; kode ini terverifikasi sebagai HTML5 modern.

Tambahkan animation-play-state: paused ke selektor yang dapat digunakan saat mengarahkan kursor ke kontainer. Sebagian pengguna menilai metode ini lebih praktis dibandingkan penggunaan siklus konstan.

Ya. Ubah nilai akhir @keyframes dari translateX(-100%) menjadi translateX(100%), dan mulai dari -100% untuk membalikkan arah. Berguna bagi bahasa RTL.

Tidak. Transformasi CSS dilakukan di GPU, sedangkan teks berupa HTML biasa dalam DOM; oleh karena itu crawler dapat membacanya secara normal dan animasi tidak menghambat jalannya proses utama.

Semua konten tetap tersimpan di peramban Anda saat Anda melakukan pratinjau. Tidak ada data yang diunggah atau dicatat.

Alat Terkait

Generator Nama Kota

Buat nama kota, kota kecil, desa, dan ibu kota fiktif untuk worldbuilding, peta, game, cerita, dan data contoh, lengkap dengan catatan singkat untuk tiap hasil.

Simbol panah untuk disalin

Salin panah Unicode umum sekali klik: lurus, ganda, diagonal, berkait, melingkar, dan segitiga untuk dokumen, chat, dan desain.

Penghasil Nama Domain

Hasilkan ide nama domain dari satu kata kunci: prefiks, sufiks, huruf ganda, dan akhiran angka di enam TLD umum.

Simbol Kurang Dari atau Sama Dengan

Salin tanda ≤ beserta simbol perbandingan matematika terkait. Termasuk Unicode, entitas HTML, dan markah LaTeX untuk spreadsheet, makalah, dan halaman web.

Keyboard Emoji Online

Tulis pesan, sisipkan emoji pilihan pada posisi kursor, lalu salin draf lengkap di browser. Tanpa akun, unggahan, atau pengganti keyboard perangkat.

Konverter Teks Ramah Disleksia

Atur ulang teks yang ditempel menjadi paragraf pendek dan baris sekitar 72 karakter agar lebih mudah dibaca. Salin hasilnya ke dokumen, surel, atau editor mana pun.

Alat ini tersedia dalam bahasa lain