Cara membuat animasi teks di css

25/02/2018 Risman Hakim 5176 Website

Table of Contents Show

Langkah 1 : Membuat Animasi Teks Magic dengan CSS
Langkah 2 : Membuat Animasi Teks Magic dengan CSS

Membuat Animasi Teks Magic dengan CSS - Pada artikel berikut ini saya akan berbagi referensi dan tutorial sederhana mengenai animasi pada sebuah teks, yaitu animasi teks magic. Jika kalian sedang mencari animasi ataupun efek pada suatu objek, tutorial ini cocok sekali untuk kalian coba, karena tutorial ini sangat mudah sekali dan juga sederhana tapi animasi yang ditampilkan cukup menarik. Untuk animasi yang akan kita buat nanti kita akan dibantu dengan CSS untuk menjalankan animasi pada teksnya. Baiklah langsung saja kita akan praktekan bagaimana Membuat Animasi Teks Magic dengan CSS berikut ini.

Langkah 1 : Membuat Animasi Teks Magic dengan CSS

Kita mulai dengan langkah pertama yakni kita akan membuat struktur awal untuk membuat animasi teks magic dan menambahkan beberapa teks sebagai objek animasinya dengan sintak HTML berikut.

<body>
   <div class="wrapper">
      <h2 class="text1">DUMET</h2>
      <h2 class="text2">SCHOOL.</h2>
   </div>
</body>

Langkah 2 : Membuat Animasi Teks Magic dengan CSS

Selanjutnya, barulah kita akan membuat animasi pada teks diatas dengan sintak CSS berikut.

@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
body{
line-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
background: #EEEEEE;
}
.wrapper{
position: absolute;
width: 100%;
top: 50%;
bottom: 50%;
filter: contrast(10);
}
h2{
font-family: 'Fredoka One', cursive;
width: 100%;
text-align: center;
position: absolute;
font-size: 100px;
margin: 0;
color: #0E69B7;
}

@keyframes animate {
0% { opacity: 0; filter: blur(28px)}
10% { opacity: 0; }
90% { opacity: 1; }
}
.text1{
animation: animate 6s infinite alternate-reverse;
}
.text2{
animation: animate 6s infinite alternate;
}

Dengan menambahkan sintak CSS keyframe kita telah atur animasi dengan mengatur blur, dan tingkat opacity dan tentunya animasi pergantian teks seolah - olah teks bergantian seperti magic.
Setelah semua sintak telah diketikan, simpan filenya kemudian silahkan buka dibrowser masing - masing dan lihat hasilnya. Selesai
Baik, itulah tadi tutorial sederhana mengenai Animasi Teks Magic dengan CSS, semoga tutorial ini bisa bermanfaat dan menambah referensi kalian dalam membuat animasi dengan CSS. Selamat mencoba :)

Artikel, Web Design, HTML CSS, website

18/07/2019 Risman Hakim 2142 Website

Cara Membuat Animasi Pergantian Teks dengan CSS - Penerapan animasi pada halaman website menjadikan tampilan lebih menarik dan lebih hidup. Ada banyak sekali animasi yang bisa diterapkan pada halaman website dan tentu nya setiap animasi pada halaman website berbeda dan menyesuaikan dengan kebutuhan. Begiu juga dengan cara pembuatan animasi nya ada banyak cara, bisa membuat animasi dengan CSS, dengan jQuery ataupun dengan yang lain nya. Nah, pada kesempatan kali ini saya akan bagikan tutorial animasi sederhana yaitu bagaimana Cara Membuat Animasi Pergantian Teks dengan CSS. Simak langkah - langkah nya berikut ini.

Kode HTML

Langkah pertama untuk membuat animasi ini adalah membuat kerangka sederhana dan tentunya membuat elemen teks nya untuk dijadikan animasi.

<body>
<div class="container">
<h3>DUMET <span id="title">School.</span></h3>
<div class="animate-text">
<span>Kursus Website</span>
<span>Digital Marketing</span>
<span>Desain Grafis</span>
<span>Kursus Terbaik</span>
<span>Di Jakarta & Depok</span>
</div>
</div>
</body>

Setelah membuat elemen teks nya seperti diatas, langkah selanjutnya adalah kita akan mendesain layout dan memberikan animasi pergantian pada teks nya dengan kode CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Righteous|Courgette&display=swap');
body{
font-family: 'Righteous', cursive;
background: #dfe6e9;
font-size: 120px;
}

.container {
text-align: center;
display: block;
padding-top: 200px;
}

.container h3 {
color: #34ace0;

}
#title {
color: #2C3A47;
font-size: 110px;
}

.animate-text {
margin-top: -165px;
margin-left: 140px;
}
.animate-text span {
font-family: 'Courgette', cursive;
font-size: 50px;
color: #cc8e35;
}

.animate-text span:nth-child(2) { animation-delay: 3s; }
.animate-text span:nth-child(3) { animation-delay: 6s; }
.animate-text span:nth-child(4) { animation-delay: 9s; }
.animate-text span:nth-child(5) { animation-delay: 12s; }

.animate-text span {
position: absolute;
opacity: 0;
overflow: hidden;
animation: animate 30s linear infinite 0s;
}

@-webkit-keyframes animate {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px); }
17% { opacity: 1; -webkit-transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); }
}

Langkah selanjutnya, setelah mengetikan semua kode HTML dan CSS diatas silahkan simpan file nya dengan nama index.html kemduian untuk melihat hasilnya buka pada browser.

Baiklah, cukup sekian tutorial bagaimana Cara Membuat Animasi Pergantian Teks dengan CSS semoga tutorial ini bisa bermanfaat, selamat mencoba dan sampai jumpa lagi di tutorial selanjutnya :)

Web Design, HTML CSS