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 :
yang biasanya dianimasikan seperti ini :
Traveloka dulu, ANU kemudian
yang biasanya dianimasikan seperti ini :
Tertarik ingin membuatnya?
Berikut adalah Cara Membuat Animasi Teks Sliding dengan CSS
1. Buka Akun Blogger > Pilih Tema > Pilih Edit HTML2. 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 TemplateHasil jadi :
Gampang bangets kan?! Sisanya bisa kalian eksplor sendiri. Itulah informasi mengenai "Cara Membuat Animasi Teks Sliding dengan CSS", selamat mencoba dan semoga bermanfaat. Goodluck!!