Sharing Teknologi – Membuat Animasi Sponsor Slider HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi Sponsor Slider HTML CSS Di WordPress.
CSS adalah singkatan dari Cascading Style Sheets, yang mana ada 3 versi: CSS1, CSS2 dan CSS3. CSS adalah aturan untuk mengelola banyak elemen pada halaman web agar lebih terstruktur dan konsisten.
CSS3 adalah versi terbaru dari CSS yang dapat melakukan banyak hal yang berkaitan dengan desain web. CSS3 memiliki kemampuan untuk membuat animasi warna menjadi animasi 3D pada halaman web.
CSS sangat membantu meningkatkan tampilan dan nuansa halaman web seperti memberikan warna, bayangan kotak, padding, margin, perataan, posisi, dan efek pengetikan atau ketukan. HTML (HyperText Markup Language) merupakan bahasa markup yang saat ini paling dominan dalam hal pembuatan website.
Dengan HTML, sebuah halaman web dapat dibuat sedemikian rupa sehingga menjadi lebih interaktif dan menarik. Karena HTML menggabungkan berbagai elemen seperti teks, multimedia, link, dan elemen pendukung lainnya menjadi satu kesatuan.
Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..
Di kesempatan kali ini, kami akan berbagi tutorial Membuat Slider Sponsor Animate Menggunakan HTML CSS.
NB: kami menggunakan tambahan CSS dari bootstrap.
Membuat Animasi Sponsor Slider
Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.
HTML
<div class="sponsorslider position-relative px-3 py-5 my-1">
<section class="ribbon sponsor-slider">
<div>
<div class="row">
<div class="col-12">
<!---->
<!---->
<!---->
<!---->
<div>
<!---->
<div class="marquee">
<ul class="marquee__content">
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" title="sponsor slider 1" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="sponsor slider 1" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" title="sponsor slider 2" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="sponsor slider 2" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" title="sponsor slider 3" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" alt="sponsor slider 3" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-5-HTML-CSS.webp" title="sponsor slider 4" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-5-HTML-CSS.webp" alt="sponsor slider 4" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" title="sponsor slider 5" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="sponsor slider 5" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-3-HTML-CSS.webp" title="sponsor slider 6" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-3-HTML-CSS.webp" alt="sponsor slider 6" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-2-HTML-CSS.webp" title="sponsor slider 7" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-2-HTML-CSS.webp" alt="sponsor slider 7" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" title="sponsor slider 8" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="sponsor slider 8" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/05/Simbol-Di-HTML-Untuk-Website-Atau-Blog.webp" title="sponsor slider 9" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/05/Simbol-Di-HTML-Untuk-Website-Atau-Blog.webp" alt="sponsor slider 9" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/05/Berbagai-Tag-Pada-HTML5-Untuk-Belajar-Pemograman.webp" title="sponsor slider 10" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/05/Berbagai-Tag-Pada-HTML5-Untuk-Belajar-Pemograman.webp" alt="sponsor slider 10" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/03/Membuat-Polygons-Bangun-Datar-Menggunakan-CSS-Di-Wordpress.webp" title="sponsor slider 11" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/03/Membuat-Polygons-Bangun-Datar-Menggunakan-CSS-Di-Wordpress.webp" alt="sponsor slider 111" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/01/Membuat-Animasi-Festival-Bulan-Menggunakan-CSS-Di-WordPress.webp" title="sponsor slider 12" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/01/Membuat-Animasi-Festival-Bulan-Menggunakan-CSS-Di-WordPress.webp" alt="sponsor slider 12" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/06/Cara-Membuat-File-Zip-Di-Komputer-Secara-Mudah.jpg" title="sponsor slider 13" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/06/Cara-Membuat-File-Zip-Di-Komputer-Secara-Mudah.jpg" alt="sponsor slider 13" loading="lazy"></a></li>
</ul>
<ul aria-hidden="true" class="marquee__content">
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" title="sponsor slider 1" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="sponsor slider 1" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" title="sponsor slider 2" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="sponsor slider 2" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" title="sponsor slider 3" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" alt="sponsor slider 3" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-5-HTML-CSS.webp" title="sponsor slider 4" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-5-HTML-CSS.webp" alt="sponsor slider 4" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" title="sponsor slider 5" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="sponsor slider 5" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-3-HTML-CSS.webp" title="sponsor slider 6" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-3-HTML-CSS.webp" alt="sponsor slider 6" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-2-HTML-CSS.webp" title="sponsor slider 7" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-2-HTML-CSS.webp" alt="sponsor slider 7" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" title="sponsor slider 8" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="sponsor slider 8" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/05/Simbol-Di-HTML-Untuk-Website-Atau-Blog.webp" title="sponsor slider 9" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/05/Simbol-Di-HTML-Untuk-Website-Atau-Blog.webp" alt="sponsor slider 9" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/05/Berbagai-Tag-Pada-HTML5-Untuk-Belajar-Pemograman.webp" title="sponsor slider 10" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/05/Berbagai-Tag-Pada-HTML5-Untuk-Belajar-Pemograman.webp" alt="sponsor slider 10" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/03/Membuat-Polygons-Bangun-Datar-Menggunakan-CSS-Di-Wordpress.webp" title="sponsor slider 11" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/03/Membuat-Polygons-Bangun-Datar-Menggunakan-CSS-Di-Wordpress.webp" alt="sponsor slider 111" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2022/01/Membuat-Animasi-Festival-Bulan-Menggunakan-CSS-Di-WordPress.webp" title="sponsor slider 12" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/01/Membuat-Animasi-Festival-Bulan-Menggunakan-CSS-Di-WordPress.webp" alt="sponsor slider 12" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/06/Cara-Membuat-File-Zip-Di-Komputer-Secara-Mudah.jpg" title="sponsor slider 13" class="d-block bg-white"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/06/Cara-Membuat-File-Zip-Di-Komputer-Secara-Mudah.jpg" alt="sponsor slider 13" loading="lazy"></a></li>
</ul>
</div>
</div>
<div style="margin-top: 2rem;">
<div class="marquee">
<ul class="marquee__content">
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/04/Tips-Mengatasi-Smartphone-Android-Lemot.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/04/Tips-Mengatasi-Smartphone-Android-Lemot.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/03/Video-YouTube-Views-Terbanyak-Versi-TeknodotVisitklatendotCom.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/03/Video-YouTube-Views-Terbanyak-Versi-TeknodotVisitklatendotCom.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Tips-Menjaga-Kesehatan-Mata-Saat-Sering-Menatap-Layar-Komputer.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Tips-Menjaga-Kesehatan-Mata-Saat-Sering-Menatap-Layar-Komputer.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Baterai-Laptop-Cepat-Rusak-Mungkin-Ini-Penyebabnya.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Baterai-Laptop-Cepat-Rusak-Mungkin-Ini-Penyebabnya.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Mengeringkan-Ponsel-Kebasahan-Inilah-Caranya.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Mengeringkan-Ponsel-Kebasahan-Inilah-Caranya.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Tips-Merawat-Laptop-Supaya-Awet-Dan-Tidak-Mudah-Rusak.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Tips-Merawat-Laptop-Supaya-Awet-Dan-Tidak-Mudah-Rusak.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Kinerja-Komputer-Menurun-Ini-Penyebabnya.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Kinerja-Komputer-Menurun-Ini-Penyebabnya.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Cara-Merawat-Komputer-Agar-Awet-Dan-Tidak-Gampang-Rusak.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Cara-Merawat-Komputer-Agar-Awet-Dan-Tidak-Gampang-Rusak.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Laptop-Terinfeksi-Spyware-Ini-Tandanya.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Laptop-Terinfeksi-Spyware-Ini-Tandanya.jpg" loading="lazy"></a></li>
</ul>
<ul aria-hidden="true" class="marquee__content">
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/04/Tips-Mengatasi-Smartphone-Android-Lemot.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/04/Tips-Mengatasi-Smartphone-Android-Lemot.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/03/Video-YouTube-Views-Terbanyak-Versi-TeknodotVisitklatendotCom.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/03/Video-YouTube-Views-Terbanyak-Versi-TeknodotVisitklatendotCom.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Tips-Menjaga-Kesehatan-Mata-Saat-Sering-Menatap-Layar-Komputer.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Tips-Menjaga-Kesehatan-Mata-Saat-Sering-Menatap-Layar-Komputer.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Baterai-Laptop-Cepat-Rusak-Mungkin-Ini-Penyebabnya.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Baterai-Laptop-Cepat-Rusak-Mungkin-Ini-Penyebabnya.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Mengeringkan-Ponsel-Kebasahan-Inilah-Caranya.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Mengeringkan-Ponsel-Kebasahan-Inilah-Caranya.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Tips-Merawat-Laptop-Supaya-Awet-Dan-Tidak-Mudah-Rusak.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Tips-Merawat-Laptop-Supaya-Awet-Dan-Tidak-Mudah-Rusak.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Kinerja-Komputer-Menurun-Ini-Penyebabnya.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Kinerja-Komputer-Menurun-Ini-Penyebabnya.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Cara-Merawat-Komputer-Agar-Awet-Dan-Tidak-Gampang-Rusak.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Cara-Merawat-Komputer-Agar-Awet-Dan-Tidak-Gampang-Rusak.jpg" loading="lazy"></a></li>
<li><a data-toggle="lightbox" data-gallery="sponsor-slider2" href="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Laptop-Terinfeksi-Spyware-Ini-Tandanya.jpg"><img src="https://teknologi.visitklaten.com/wp-content/uploads/2021/02/Laptop-Terinfeksi-Spyware-Ini-Tandanya.jpg" loading="lazy"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Style CSS
.sponsorslider .marquee {
--gap: 1rem;
position: relative;
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
}
.sponsorslider .marquee__content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
.sponsorslider .marquee__content {
animation: scroll 20s linear infinite;
}
.sponsorslider .marquee:hover .marquee__content {
animation-play-state: paused;
}
.sponsorslider img {
height: 150px;
object-fit:cover:
width:100%
}
@keyframes scroll-abs {
from {
transform: translateX(calc(100% + var(--gap)));
}
to {
transform: translateX(0);
}
}
Hasil
Tampilannya kurang lebih bisa dilihat dibawah ini.
Lihat Full Screen
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar