Sudah lama saya penasaran dengan tag HTML <marquee>
.
Anda dapat menemukannya di spesifikasi MDN:
Tidak berlaku lagi Fitur ini sudah usang. Meskipun mungkin masih berfungsi di beberapa browser, penggunaannya tidak disarankan karena dapat dihapus kapan saja. Sebaiknya hindari menggunakannya.
atau di W3C wiki:
Tidak, sungguh. jangan gunakan.
Saya mencari beberapa artikel dan menemukan beberapa yang menyebutkan tentang pengganti CSS yang relevan. Atribut CSS seperti:
marquee-play-count
marquee-direction
marquee-speed
tetapi tampaknya, mereka tidak berfungsi. Atribut-atribut tersebut merupakan bagian dari spesifikasi pada tahun 2008, namun tidak disertakan pada tahun 2014.
Salah satu cara yang diusulkan oleh W3 Consortium adalah dengan menggunakan CSS3 animations, tetapi menurut saya ini jauh lebih rumit dibandingkan dengan <marquee>
yang mudah dipelihara.
Ada juga banyak alternatif JS, dengan banyak kode sumber yang dapat Anda tambahkan ke proyek Anda dan membuatnya lebih besar.
Saya selalu membaca hal-hal seperti: "jangan pernah menggunakan marquee", "sudah usang". Dan saya tidak mengerti mengapa.
Jadi, adakah yang bisa menjelaskan kepada saya, mengapa tenda sudah tidak digunakan lagi, mengapa sangat "berbahaya" menggunakannya dan apa pengganti yang paling mudah?
Saya menemukan sebuah [contoh][7], itu terlihat bagus. Ketika Anda menggunakan semua awalan yang diperlukan untuk dukungan browser yang baik, Anda memiliki sekitar 20-25 baris CSS, dengan 2 nilai yang dikodekan (indentasi awal dan akhir), tergantung pada panjang teks. Solusi ini tidak begitu fleksibel, dan Anda tidak dapat membuat efek dari bawah ke atas dengan ini.
Saya rasa Anda tidak perlu memindahkan konten, tetapi itu tidak menjawab pertanyaan Anda... Lihatlah CSS-nya:
.marquee {
width: 450px;
line-height: 50px;
background-color: red;
color: white;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
Ini adalah codepen.
Edit:
Berikut ini adalah codepen dari bawah ke atas.
Anda hanya perlu mendefinisikan kelas dan animasi perulangan yang dilampirkan sekali dalam CSS dan menggunakannya di mana pun Anda butuhkan. Namun, seperti yang dikatakan banyak orang - ini adalah praktik yang sedikit menjengkelkan, dan ada alasannya, mengapa tag ini menjadi usang.
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 15s linear infinite;
-webkit-animation: example1 15s linear infinite;
animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="example1">
<h3>Scrolling text... </h3>
</div>
Seperti yang dinyatakan sebelumnya: substitusi termudah adalah animasi CSS
Untuk semua kritikus tenda:
Ini adalah alat yang sangat berguna untuk UI, Saya menggunakannya hanya untuk melayang, untuk menampilkan lebih banyak informasi dalam ruang yang terbatas.
Contoh untuk pemutar mp3 sangat bagus, bahkan radio mobil saya menggunakan efek ini untuk menampilkan lagu yang sedang diputar.
Jadi tidak ada yang salah dengan hal itu, menurut pendapat saya...