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






Lebih baru Lebih lama