Cara Membuat Elemen Marquee pada tahun 2022 (Praktik Terbaik)
Diterbitkan: 2022-08-23Artikel ini akan membahas cara terbaik untuk membuat elemen tenda bergerak dalam desain web modern.
Tenda adalah bagian tak terbatas dari teks dan/atau elemen visual (seperti gambar) yang otomatis bergulir secara horizontal.
Meskipun elemen HTML <marquee> resmi disusutkan dan sangat tidak disarankan untuk digunakan, efek keseluruhan dari pengguliran, elemen berkelanjutan yang digunakan untuk membumbui halaman web tetap hidup dan baik pada tahun 2022, muncul di banyak situs web trendi.
Beberapa bahkan masih menggunakan elemen Marquee, yang masih didukung oleh semua browser meskipun (sekali lagi) tidak disarankan untuk digunakan. Misalnya, inilah "screensaver" DVD klasik memantul yang dibuat dengan tenda HTML.
Ini tidak cerdas, tetapi masih berfungsi. Alasan untuk menghindari penggunaan elemen ini pada tahun 2022 sudah jelas:
- Itu tidak benar-benar dapat diakses
- Ini 100% disusutkan dan dukungan untuk itu dapat (dan mungkin akan di beberapa titik) dihapus
- Itu tidak pernah menjadi elemen HTML nyata untuk memulai (bukan bagian dari standar apa pun)
Namun, kami selalu menjadi penggemar tenda di Isotropic.
Lihatlah banyak situs web Awwwards yang trendi dan Anda akan melihat teks, gambar, atau kombinasi keduanya bergerak secara horizontal, seperti:
Ini Adalah Demo Marquee
Tentu saja, bukanlah ide yang baik untuk menempatkan informasi penting misi di bagian gulir atau animasi. Tapi untuk hal seperti contoh di atas, terlihat keren, membedakan situs, dan membuatnya berkesan. Gunakan dengan bijak dan secukupnya.
Marquees sangat keren, kami bahkan menerbitkan alat bermanfaat yang secara otomatis akan menghasilkan bagian gaya "ticker" dari teks gulir menggunakan bayangan kotak CSS. Itu keren, tapi saya pikir pendekatan yang dibahas dalam artikel ini lebih baik.
Kode untuk membuat demo tenda tersebut bersumber dari CodePen ini oleh Ryan Mulligan, yang (kemungkinan) merupakan cara terbaik untuk membuat efek tenda pada tahun 2022. Dia juga menulis tentang kode ini di blognya, https://ryanmulligan.dev/ blog/css-marquee.
Ini dapat diakses (mendukung gerakan yang lebih disukai-dikurangi), tak terbatas, memungkinkan untuk semua jenis elemen html, dan ringan serta mudah diimplementasikan.
Itu juga dibuat dengan 100% CSS dan tanpa JS.
<div class="marquee">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk>'='ix&lib=qrb>'='x8fHx8fDE2NTk
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx08fDE2'=rbQ.
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2N='t='&2.1Qlibq='rbk='&MDQ3N400
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk>'='ix&lib=qrb>'='x8fDE2NTk
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8f=rb80-1&'= lib=rb80-1&'xMDQDE2NTk\'
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk>'='ix&lib=qrb>'='x8fHx8fDE2NTk
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx08fDE2'=rbQ.
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2N='t='&2.1Qlibq='rbk='&MDQ3N400
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk>'='ix&lib=qrb>'='x8fDE2NTk
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8f=rb80-1&'= lib=rb80-1&'xMDQDE2NTk\'
</div>
</div>
<div class="marquee marquee--borders">
<div class="marquee__group">
<p>Anjing Unsplash</p>
<p aria-hidden="true">Anjing-anjing Unsplash</p>
<p aria-hidden="true">Anjing-anjing Unsplash</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>Anjing Unsplash</p>
<p>Anjing Unsplash</p>
<p>Anjing Unsplash</p>
</div>
</div>
<div class="marquee marquee--reverse">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk&'=400=rbXx8fHx8fHx8fDE2NTk
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx08fDE2='w.
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk&'=400=rbXx8fHx8fHx8fDE2NTk&'
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx08fDE2Mt='&lib=rb>mt='&lib=rbTm.
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx08fDE2
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk&'=400=rbXx8fHx8fHx8fDE2NTk
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx08fDE2='w.
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk&'=400=rbXx8fHx8fHx8fDE2NTk&'
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx08fDE2Mt='&lib=rb>mt='&lib=rbTm.
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx08fDE2
</div>
</div> @import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
* {
ukuran kotak: kotak perbatasan;
}
tubuh {
min-tinggi: 100vh;
}
tubuh {
--spasi: 2rem;
tampilan: kisi;
align-content: tengah;
melimpah: tersembunyi;
celah: var(--spasi);
lebar: 100%;
font-family: "Corben", system-ui, sans-serif;
ukuran font: 1.5rem;
tinggi garis: 1,5;
}
.marquee {
--durasi: 60 detik;
--gap: var(--spasi);
tampilan: fleksibel;
melimpah: tersembunyi;
pilihan pengguna: tidak ada;
celah: var(--gap);
mengubah: skewY(-3deg);
}
.marquee__group {
flex-shrink: 0;
tampilan: fleksibel;
align-item: tengah;
justify-content: ruang-sekitar;
celah: var(--gap);
lebar minimum: 100%;
animasi: scroll var(--duration) linear infinite;
}
@media (lebih suka-gerakan yang dikurangi: kurangi) {
.marquee__group {
animasi-play-state: dijeda;
}
}
.marquee__group img {
lebar maks: penjepit (10rem, 1rem + 28vmin, 20rem);
rasio aspek: 1;
kesesuaian objek: penutup;
batas-radius: 1rem;
}
.marquee__group p {
background-image: linear-gradient(
75 derajat,
hsl (240 derajat 70% 49%) 0%,
hsl(253deg 70% 49%) 11%,
hsl(267deg 70% 49%) 22%,
hsl (280 derajat 71% 48%) 33%,
hsl (293 derajat 71% 48%) 44%,
hsl(307 derajat 71% 48%) 56%,
hsl (320 derajat 71% 48%) 67%,
hsl (333deg 72% 48%) 78%,
hsl (347 derajat 72% 48%) 89%,
hsl(0deg 73% 47%) 100%
);
-webkit-latar belakang-klip: teks;
-webkit-text-fill-color: transparan;
}
.marquee--borders {
border-block: 3px solid dodgerblue;
padding-block: 0.75rem;
}
.marquee--reverse .marquee__group {
arah animasi: mundur;
animasi-delay: calc(var(--duration) / -2);
}
@keyframes gulir {
0% {
mengubah: translateX(0);
}
100% {
transformasi: translateX(calc(-100% - var(--gap)));
}
}
Mari kita lihat bagaimana ini dibuat dan mengapa ini begitu hebat.
Berikut gambarannya, sebelum kita melihat semua kodenya:
- Kita dapat dengan mudah mengontrol kecepatan dan arah efek scrolling. Untuk kecepatan, kami mengatur
.marquee--reverse. - Ini modular - Anda dapat memiliki grup sebanyak yang Anda inginkan dengan membungkus konten dalam div dengan kelas
.marqueedan konten dalam dengan.marquee__group. - Ukurannya responsif dan lancar karena menggunakan variabel dan penjepit CSS.
- Ini dapat diakses menggunakan label aria dan berhenti jika gerakan preferensi-dikurangi CSS diatur ke dikurangi.
- Gerakannya adalah animasi CSS standar yang menggunakan bingkai utama (sehingga Anda dapat menjeda saat mengarahkan kursor jika diinginkan). Tidak ada JS sama sekali.
- Ini juga cukup salin/tempel. Cukup tukar konten Anda, terapkan HTML dan CSS, dan Anda akan memiliki tenda kecil yang keren.
Ini dilakukan dengan sangat baik, dan (imo) harus menjadi cara standar efek tenda diterapkan pada tahun 2022.
Berikut HTMLnya:
Dalam demo kita bisa melihat tiga tenda. Yang pertama dan ketiga dibalik dengan kelas .marquee--reverse . Mereka memiliki kecepatan standar, dan berisi gambar.
Yang kedua (yang tengah) adalah semua teks, dan mengimplementasikan batas dengan kelas khusus. Ini juga memiliki durasi yang lebih lambat yang ditetapkan oleh atribut style: .
Anda juga akan melihat bahwa pada dasarnya ada duplikat dalam div .marquee , yang sama kecuali dengan tag aria.
Ini untuk membuat animasi tanpa batas tanpa batas, sementara juga dapat beradaptasi dengan rasio viewport yang berbeda (lebih lanjut tentang ini ketika kita melihat CSS).
Ini dibuat dapat diakses dengan aria-hidden="true" , yang menghapus konten duplikat dari pohon aksesibilitas.
Juga, gambar disajikan langsung dari Unsplash. Anda mungkin menemukan sumber daya ini menarik: Cara Menghasilkan Gambar Acak Dengan URL (Web Dev)
Secara keseluruhan, ini adalah struktur HTML yang elegan dan sederhana.
Sekarang mari kita lihat CSS
Dan inilah CSS (diambil langsung dari CodePen):
Kita bisa melihat berikut ini:
- Semuanya menggunakan REM, variabel dan penjepit, artinya efeknya cair dan akan bereaksi terhadap ukuran layar dan pengaturan browser.
- Animasinya 100% CSS. Ini diimplementasikan dengan baris "
animation: scroll var(--duration) linear infinite;" di.marquee__group. Animasinya tidak terbatas, linier, dan bernama gulir. Durasi root dikendalikan oleh variabel--duration, yang dapat ditimpa untuk mengontrol kecepatan grup tertentu dalam markup HTML (disebutkan di atas). - Gulir adalah transformasi dasar, menerjemahkan X.
- Untuk membalikkan animasi, kita cukup memiliki "
animation-direction: reverse;' di kelas.marquee--reverse .marquee__group. - Kami menggunakan calc dan --gap untuk sebagian besar spasi. Ini membuat segalanya lancar dan Anda dapat mengubah Gap sesuai dengan kebutuhan Anda.
- Ada efek skew (3%) yang membuatnya diagonal, yang bisa dihilangkan untuk menjadikannya 100% horizontal.
- Ini dapat diakses dan bertanggung jawab karena tidak akan bergerak jika prefers-reduced-motion: reduce diatur (pelajari cara mengujinya di sini).
Pada dasarnya, ia melakukan semuanya dengan sangat baik, dan merupakan cara terbaik untuk menerapkan efek seperti tenda bergulir pada tahun 2022.
Untuk menerapkannya, Anda cukup menambahkan HTML ke halaman Anda, menukar teks/gambar, dan menambahkan CSS ke gaya global Anda.
Anda dapat bermain dengan variabel, tetapi secara realistis ini cukup plug and play ... tidak banyak yang perlu Anda ubah!