Softonic

Generator Teks untuk Scroling

Langkah 1 / 3

Tulis pesan Anda

Satu baris, maksimal 500 karakter. Emoji juga bisa.

Berikutnya: atur gaya

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. Tambahkan animation-direction: reverse pada elemen yang membawa animasi (.scrolling-text__track dalam kode yang dihasilkan). Dua salinan teks menjaga perulangan tetap mulus ke arah mana pun, sehingga 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.

Pesan Anda tetap berada di peramban Anda. Pesan tidak dikirim ke server kami dan tidak ditambahkan ke tautan halaman. Tab ini menyimpannya hanya agar langkah berikutnya dapat menampilkannya, dan pesan terhapus saat Anda memilih “Mulai dari awal” atau menutup tab. Pengaturan tampilan (kecepatan, arah, font, ukuran, warna, dan efek) dibawa di tautan halaman dari satu langkah ke langkah berikutnya.

Alat Terkait

Generator Nama Jepang Acak

Gabungkan satu dari 40 nama keluarga Jepang yang diromanisasi dengan satu dari 40 nama depan, nama keluarga lebih dahulu.

Generator Nama Prancis Acak

Buat 1–50 ide nama Prancis dua bagian dari daftar tetap berisi 40 nama depan dan 40 nama keluarga.

Pencari kata Wordle

Masukkan tebakan lima huruf beserta petunjuk hijau, kuning, dan abu-abu untuk menemukan kata bahasa Inggris yang cocok. Huruf berulang diperiksa dengan tepat.

Konverter Teks Gyaru

Ubah kana Jepang, kanji yang umum, dan huruf Latin menjadi gyaru-moji, atau pilih gaya lebar penuh, berlingkar, berkotak, atau tebal. Lalu salin.

Salin Simbol Matematika

Telusuri dan salin simbol matematika, pi, sigma, integral, tak hingga, huruf Yunani, teori himpunan, siap ditempel di mana pun Unicode berfungsi.

Konverter ASCII ke Teks

Dekode daftar kode ASCII desimal kembali menjadi teks terbaca yang diwakilinya. Tempel kode yang dipisah spasi, koma, atau titik koma dan baca hasilnya seketika.

Alat ini tersedia dalam bahasa lain