Cara Membuat Animasi Teks Sliding dengan CSS

Pilihan Editor :

Cara Membuat Animasi Teks Sliding dengan CSS
KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini saya bagikan informasi mengenai "Cara Membuat Animasi Teks Sliding dengan CSS", teknik ini terinspirasi dari salah satu slogan Traveloka yang mungkin sudah sering kalian lihat di televisi. Slogan tersebut adalah :

Traveloka dulu, ANU kemudian

yang biasanya dianimasikan seperti ini :
Traveloka dulu,
Belanja
Travel
Lebaran
kemudian

Tertarik ingin membuatnya?

Berikut adalah Cara Membuat Animasi Teks Sliding dengan CSS

1. Buka Akun Blogger > Pilih Tema > Pilih Edit HTML
2. Copy kode CSS dibawah ini, lalu paste diatas kode ]]></b:skin>
.contentrazone {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-wrapperazone {
  font-size: 14px;
  color:#000;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sliderazone{
  height: 25px;
  padding-left:5px;
  overflow: hidden;
}
.sliderazone div {
  color:#fff;
  height: 50px;
  margin-bottom: 50px;
  padding: 0px 15px;
  text-align: center;
  box-sizing: border-box;
}
.sliderazone-text1 {
  background: orange;
  animation: sliderazone 5s linear infinite;
}
.sliderazone-text2 {
  background: blue;
}
.sliderazone-text3 {
  background: purple;
}
@keyframes sliderazone {
  0% {margin-top:-300px;}
  5% {margin-top:-200px;}
  33% {margin-top:-200px;}
  38% {margin-top:-100px;}
  66% {margin-top:-100px;}
  71% {margin-top:0px;}
  100% {margin-top:0px;}
}

3. Copy kode HTML dibawah ini, paste ditempat yang kalian inginkan (terserah deh mau diletakkan dimana)
<div class="contentrazone">
<div class="slider-wrapperazone">
Ayo Belajar
<div class="sliderazone">
<div class="sliderazone-text1">HTML</div>
<div class="sliderazone-text2">CSS</div>
<div class="sliderazone-text3">PHP</div>
</div></div></div>
4. Simpan Template

Hasil jadi :
Ayo Belajar
HTML
CSS
PHP

Gampang bangets kan?! Sisanya bisa kalian eksplor sendiri. Itulah informasi mengenai "Cara Membuat Animasi Teks Sliding dengan CSS", selamat mencoba dan semoga bermanfaat. Goodluck!!

Kurazone dulu,
klik iklan
share
Komentar
kemudian

BACA JUGA ARTIKEL MENARIK LAINNYA:

3 komentar :

  1. Wah keren banget... Mau juga dong belajar bikin animasi teks sliding dari CSS. Eh, tapi bisa diedit nggak sih?

    BalasHapus
  2. Keren banget, keren terus, keren maksimal.....

    Ya Kurazone.....

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.