Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Animasi Running Text . Pada pembahasan kali ini kita akan belajar bagaimana caranya membuat sebuah running text untuk website. Running text dalam sebuah website biasanya di gunakan untuk media informasi atau sebuah promosi. Pada tutorial kali ini saya tidak menggunakan running text pada fungsi CSS tapi menggunakan fungsi javasript karena lebih bagus efek yang di timbul dan lebih hidup.
Oke langsung saja kita mulai, pertama – tama kalian semua bikin terlebih dulu file HTML-nya.
Disini saya udah membuat file html-nya silahkan teman – teman ikuti, jika ada yang ingin memasang ke dalam websitenya silah teman – teman custom sendiri.
Running_text.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Cara Membuat Animasi Running Text
Dumetschool Menyediakan Kursus
Oke dari HTML di atas kita akan membuat running teks terhadap elemen tag html
, dimana kita nantinya akan memanfaatkan atribut dari elemen tag HTML yaitu class typewrite untuk menampilkan sebuah teks yang ada pada data-type. Oke kalau sudah kita akan masuk pada pembuatan CSS supaya teks yang akan saya buat lebih rapi dan lebih enak di lihat.
Silahkan teman – teman lihat script CSS di bawah ini;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.Running {
padding: 80px 0;
background-color: #3498db;
}
.container {
width:900px;
margin: auto;
overflow: hidden;
}
.Running h2 {
float: left;
padding-right: 5px;
color: #331d1d;
font-size: 24px;
font-family:Regular;
color:#ecf0f1;
}
.Running .wrap {
color:#e67e22;
}
img {
position:relative;
top:3px;
}
Oke kalau sudah silahkan teman – teman save dan jalan browsernya, untuk melihat hasilnya silahkan teman – teman klik Demo, Oke itulah tadi pembahasan saya tentang Cara Membuat Animasi Running Text , semoga bermanfaat.