Membuat Teks Slider Dengan CSS
Membuat Teks Slider Dengan CSS - Ada beberapa efek yang bisa dipasang didalam blog, salah satunya adakah slider
Baca Juga
Membuat Teks Slider Dengan CSS - Ada beberapa efek yang bisa dipasang didalam blog, salah satunya adakah slider. Efek slide ini bisa digunakan dalam beberapa elemen seperti pada gambar, teks, video, dan widget. Untuk penggunaannya sendiri, bisa menggunakan beberapa kombinasi kode yaitu CSS, HTML dan Script.
Slide adalah sebuah elemen atau widget yang memiliki efek bergerak dari berbagai sisi. Dengan adanya efek bergerak ini elemen atau widget tersebut disebut sebagai slider. Pergerakan dari slider ini bisa dari arah kanan ke kiri atau sebalik dan dari atas ke bawah atau sebaliknya.
Pembuatan efek slide tidak hanya pada satu aplikasi saja, namun dalam program web html, efek slide juga bisa dilakukan yaitu dengan menggunakan kode kombinasi yaitu CSS, HTML dan Script. Untuk aplikasi sendiri, efek ini biasanya terdapat pada beberapa aplikasis seperti aplikasi pembuatan video atau video maker, Powerpoint, Aplikasi Adobe, dan sebagainya.
Khusus pada website atau blog, efek sliding ini ini ditampilkan dengan cara menggunakan kode CSS dan HTML saja atau CSS, HTML, dan Script. Seperti halnya pada artikel ini, kita akan membuat teks slider dengan CSS saja. Sehingga dengan tanpa menggunakan script, maka tidak akan memberikan pengaruh yang menimbulkan loading blog melambat.
Karena biasanya banyak sekali teman-teman blogger yang enggan memasang sesuatu yang ditampilkan di blog mereka jika masih menggunakan script atau javascript.
Membuat Teks Slider Dengan CSS
Untuk membuat efek bergerak pada teks ini, anda tidak perlu menggunakan javascript atau script lainnya, cukup dengan menggunakan kode CSS, efek bergerak atau sliding untuk teks bisa dipasang di blog anda. Simpan kode CSS dibawah ini kedalam kode template blog anda:
.content-slider{background:rgb(255,221,64);margin:20px auto;padding:20px;width:300px;height:250px}
.slider{margin:0 auto;overflow:visible;position:relative}
.mask{overflow:hidden;height:200px}
.slider ul{margin:0;padding:20px;position:relative}
.slider li{width:250px;height:250px;position:absolute;right:-325px;list-style:none}
.slider .quote{font-size:20px;font-style:italic}
.slider .source{font-size:15px;text-align:right}
.content-slider .link{background:#47cf73;display:inline-block;padding:10px 15px;font-size:12px;border-radius:25px;float:right;bottom:0}
.content-slider .link a{color:#ffffff}
.slider li.anim1{animation:cycle 30s linear infinite}
.slider li.anim2{animation:cycle2 30s linear infinite}
.slider li.anim3{animation:cycle3 30s linear infinite}
.slider li.anim4{animation:cycle4 30s linear infinite}
.slider li.anim5{animation:cycle5 30s linear infinite}
.slider:hover li{animation-play-state:paused}
@keyframes cycle{0%{right:0}4%{right:0}16%{right:0;opacity:1;z-index:0}20%{right:325px;opacity:0;z-index:0}21%{right:-325px;opacity:0;z-index:-1}50%{right:-325px;opacity:0;z-index:-1}92%{right:-325px;opacity:0;z-index:0}96%{right:-325px;opacity:0}100%{right:0;opacity:1}}
@keyframes cycle2{0%{right:-325px;opacity:0}16%{right:-325px;opacity:0}20%{right:0;opacity:1}24%{right:0;opacity:1}36%{right:0;opacity:1;z-index:0}40%{right:325px;opacity:0;z-index:0}41%{right:-325px;opacity:0;z-index:-1}100%{right:-325px;opacity:0;z-index:-1}}
@keyframes cycle3{0%{right:-325px;opacity:0}36%{right:-325px;opacity:0}40%{right:0;opacity:1}44%{right:0;opacity:1}56%{right:0;opacity:1;z-index:0}60%{right:325px;opacity:0;z-index:0}61%{right:-325px;opacity:0;z-index:-1}100%{right:-325px;opacity:0;z-index:-1}}
@keyframes cycle4{0%{right:-325px;opacity:0}56%{right:-325px;opacity:0}60%{right:0;opacity:1}64%{right:0;opacity:1}76%{right:0;opacity:1;z-index:0}80%{right:325px;opacity:0;z-index:0}81%{right:-325px;opacity:0;z-index:-1}100%{right:-325px;opacity:0;z-index:-1}}
@keyframes cycle5{0%{right:-325px;opacity:0}76%{right:-325px;opacity:0}80%{right:0;opacity:1}84%{right:0;opacity:1}96%{right:0;opacity:1;z-index:0}100%{right:325px;opacity:0;z-index:0}}
Harap diperhatikan! Jika didalam kode template blog anda memiliki kode yang sama untuk tag IDnya yang digunakan, lebih baik diganti dengan ID yang lainnya.
.content-slider dan .slider adalah tad ID class yang digunakan pada kode CSS slide ini. Jika dalam kode template blog anda menggunakan ID yang sama, lebih baik diganti, agar tidak merusak tampilan yang lainnya dengn ID yang sama.
Penggunaan Efek Slide CSS
Efek slide pada kode CSS ini menggunakan efek bergerak dari kanan ke kiri dan juga sliding akan berhenti saat kursor diarahkan. Kode yang digunakan adalah keyframes sebagai berikut:
@keyframes cycle{0%{right:0}4%{right:0}16%{right:0;opacity:1;z-index:0}20%{right:325px;opacity:0;z-index:0}21%{right:-325px;opacity:0;z-index:-1}50%{right:-325px;opacity:0;z-index:-1}92%{right:-325px;opacity:0;z-index:0}96%{right:-325px;opacity:0}100%{right:0;opacity:1}}
@keyframes cycle2{0%{right:-325px;opacity:0}16%{right:-325px;opacity:0}20%{right:0;opacity:1}24%{right:0;opacity:1}36%{right:0;opacity:1;z-index:0}40%{right:325px;opacity:0;z-index:0}41%{right:-325px;opacity:0;z-index:-1}100%{right:-325px;opacity:0;z-index:-1}}
@keyframes cycle3{0%{right:-325px;opacity:0}36%{right:-325px;opacity:0}40%{right:0;opacity:1}44%{right:0;opacity:1}56%{right:0;opacity:1;z-index:0}60%{right:325px;opacity:0;z-index:0}61%{right:-325px;opacity:0;z-index:-1}100%{right:-325px;opacity:0;z-index:-1}}
@keyframes cycle4{0%{right:-325px;opacity:0}56%{right:-325px;opacity:0}60%{right:0;opacity:1}64%{right:0;opacity:1}76%{right:0;opacity:1;z-index:0}80%{right:325px;opacity:0;z-index:0}81%{right:-325px;opacity:0;z-index:-1}100%{right:-325px;opacity:0;z-index:-1}}
@keyframes cycle5{0%{right:-325px;opacity:0}76%{right:-325px;opacity:0}80%{right:0;opacity:1}84%{right:0;opacity:1}96%{right:0;opacity:1;z-index:0}100%{right:325px;opacity:0;z-index:0}}
Apakah bisa mengatur arah slidingnya? Bisa saja, atur bagian arah atau posisi pada right di kode CSS dan kode keyframes. Silahkan dicoba dan agar bisa langsung melihat hasilnya, gunakan layanan Codepen untuk membuat dan mengelola kode CSS yang anda butuhkan.
Kode HTML Teks Slider
Untuk menjalankan kode CSS yang sudah dibuat maka perlu kode HTML untuk memulainya. Gunakan kode HTML b=dibawah ini dan pasang di widget atau dimana saja di halaman blog anda.
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">Ini adalah contoh teks yang bisa diedita atau diganti.</div>
<div class="source">- Saya</div>
</li>
<li class="anim2">
<div class="quote">Ganti teks disini sesuai dengan teks yang anda inginkan.</div>
<div class="source">- Kamu</div>
</li>
<li class="anim3">
<div class="quote">Kalimat disini bisa diganti dengan kalimat yang kamu suka.</div>
<div class="source">- Kalian</div>
</li>
<li class="anim4">
<div class="quote">Tulisan teks yang kamu buat ada dibagian ini.</div>
<div class="source">- Anda</div>
</li>
<li class="anim5">
<div class="quote">Gunakan kalimat berbeda untuk ditulis disini.</div>
<div class="source">- Kami</div>
</li>
</ul>
</div>
<div class="link"><a href="#">All Quotes</a></div>
</div>
</div>
Hasilnya seperti apa? Demo hasil dari teks slider ini bisa langsung dilihat dibawah ini:
-
Ini adalah contoh teks yang bisa diedita atau diganti.- Saya
-
Ganti teks disini sesuai dengan teks yang anda inginkan.- Kamu
-
Kalimat disini bisa diganti dengan kalimat yang kamu suka.- Kalian
-
Tulisan teks yang kamu buat ada dibagian ini.- Anda
-
Gunakan kalimat berbeda untuk ditulis disini.- Kami
Dengan membuat teks slider seperti diatas, tentunya tidak akan mengganggu loading blog karena kode tersebut tidak menggunakan javascript atau script lainnya. Murni dengan menggunakan kode CSS dan HTML saja.
Apakah Bisa Diganti Menggunakan Gambar?
Untuk mengganti teks dengan gambar atau image slider, ada beberapa perubahan yang harus dilakukan pada kode CSS diatas. Tentunya saya tidak akan membahasnya pada artikel ini.
Fungsi Memasang Slider
Jika sebuah efek atau hal lainnya yang dipasang dalam blog memiliki fungsi dan manfaat, anda bisa memasangnya kedalam blog ada. Namun jika tidak ada fungsinya sama sekali, lebih baik jangan. Begitu juga dengan memasang slider di blog. Apakah ada gunanya? Hanya anda yang bisa menjawab pertanyaan ini. Semoga bermanfaat.
