Marquee dalam CSS - Panduan Pemula
Marquee pertama kali diperkenalkan di Internet Explorer dan sangat populer di tahun 90an sebelum W3C akhirnya memutuskan untuk mengeluarkannya dari elemen standar HTML karena masalah kegunaan. Desainer web didorong untuk tidak menggunakan tag.
Namun yang mengejutkan, tenda sekarang kembali, tidak dalam tag format seperti itu, tetapi dalam Modul CSS. Modul ini tersedia sebagai bagian dari spesifikasi CSS Webkit dan W3C saat ini sedang mengerjakan modul yang sama. Namun, karena versi W3C masih pada tahap Rekomendasi Calon, itu belum berlaku. Jadi, saat ini, kami hanya akan membahas satu dari spesifikasi Webkit.
Sintaksnya
Pertama-tama, tenda dapat didefinisikan menggunakan sintaks tulisan cepat berikut.
-webkit-marquee: [arah] [increment] [repetition] [style] [speed]
Setiap nilai yang dibutuhkan dalam sintaksis di atas, saya percaya, cukup jelas, atau Anda dapat menemukannya cukup dijelaskan di dokumentasi ini. Jadi, jika Anda ingin menggali lebih dalam tentang bagaimana sintaks ini bekerja, Anda selalu dapat merujuk ke dokumentasi terlebih dahulu.
Kemudian, bergabunglah dengan kami saat kami melanjutkan untuk membuat beberapa contoh nyata dan lihat bagaimana tindakannya.
Contoh 1: Menggulir teks
Baiklah, dalam contoh pertama kita akan membuat gerakan klasik tenda yang memiliki teks bergerak dari kanan ke kiri.
Mari buat markup teks kami seperti di bawah ini:
Lollipop topping tetes lemon jujubes mengaplikasikan fruitcake tart liquorice sesame snaps.
Kemudian tentukan tenda dengan sintaks berikut.
-webkit-marquee: gulir medium tak terbatas otomatis normal; overflow-x: -webkit-marquee;
Saat arah tenda diatur ke mobil, secara default akan bergerak dari kanan ke kiri; atau Anda dapat mengubah nilai ini menjadi kiri. Juga perhatikan bahwa overflow-x properti harus diatur ke -webkit-marquee sehingga konten akan selalu bertindak seperti satu. Jika Anda menghilangkan properti ini, teks tidak akan bergerak.
Lihat demo.
Contoh 2: Bangkit maju mundur
Pada contoh kedua kita akan mencoba memberikan gaya yang berbeda pada tenda. Kali ini kami gunakan bergantian dari pada gulir dan ubah nilai arah menjadi kanan. Dengan begitu, tenda akan bergerak dari kiri ke kanan lalu bangkit bolak-balik.
-webkit-marquee: medium otomatis tak terhingga bergantian normal; overflow-x: -webkit-marquee;
Lihat demo
Contoh 3: Memindahkan teks ke atas
Dan untuk contoh terakhir, kita akan mengubah arah tenda untuk bergerak ke atas. Ada dua arah nilai untuk melakukannya; Anda dapat mengubah nilainya menjadi naik atau di depan.
Secara pribadi saya tidak mengerti mengapa Webkit memberikan dua nilai yang pada dasarnya melakukan hal yang sama karena saya pikir itu dapat menyebabkan kebingungan bagi sebagian orang..
-webkit-marquee: hingga medium infinite scroll normal; overflow-x: -webkit-marquee;
Lihat demo
Selain itu, saya telah mengumpulkan beberapa contoh lagi tetapi mereka akan luar biasa jika semuanya dijelaskan di sini.
Tetapi, Anda dapat melihat semua demo dan mengunduh sumber dari tautan di bawah ini.
- Demo
- Sumber Unduhan
Pikiran akhir & Referensi
Saya pertama kali terkejut bahwa masih ada minat pada tenda, yang saya pikir telah menemui akhirnya. Ini juga membuat saya mempertanyakan bagaimana modul CSS seperti ini akan berguna. Bahkan setiap browser masih mendukung warisan dari menandai.
Jadi apa yang Anda pikirkan? Apakah tenda masih relevan pada usia ini dan apakah itu akan berguna dalam desain web modern?
Jika Anda masih penasaran dengan barang tenda ini, Anda dapat mengunjungi beberapa referensi berikut:
- Referensi CSS Safari
- Generator tenda Webkit
- Dokumentasi yang komprehensif dari yang lama
tag dari Sitepoint. - Dan selalu ada generator untuk hampir semuanya, termasuk Generator Marquee ini.
