Cara Membuat Animasi Teks Revealing dengan CSS3

29/08/2017    Risman Hakim    830     Website

Dalam dunia desain web ada banyak istilah yang sering digunakan dalam membuat sebuah komponen, seperti berikut adalah istilah revealing dalam sebuah animasi pada tampilan web. Mungkin diantara kalian masih ada yang bingung seperti apa animasi revealing itu, tapi sekarang tidak perlu bingung lagi karena sekarang saya akan kasih tau kalain bentuk dari animasi revealing, nah, daripada penasaran langsung saja kita praktekan Cara Membuat Animasi Teks Revealing dengan CSS3. simak langkah-langkahnya berikut ini.

Pada kasus animasi berikut ini kita akan membuat animasi dengan bantuan CSS3, karena seperti yang kita ketahui CSS3 sudah cukup canggih dalam membuat sebuah animasi. Namun sebelumnya kita akan membuat struktur awal terlebih dahulu dengan menggunakan kode HTML5 untuk membuat objek sebagai animasi nya yakni dengan teks seperti berikut.

<body>
    <div><span class="bold">Lorem Ipsum</span></div>
    <div>
      <span>is simply dummy text of. </span>
    </div>
</body>

Setelah objek animasi telah dibuat, langkah selanjutnya adalah kita akan berikan desain dan yang paling utama adalah memberikan animasi revealingnya, untuk itu kita akan ketikan dengan kode CSS3 seperti berikut.

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

body {
  text-align:center;
  background:url(https://www.toptal.com/designers/subtlepatterns/patterns/notebook.png);
  color:#555;
  font-family:'Roboto';
  font-weight:300;
  font-size:32px;
  padding-top:40vh;
  height:100vh;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

div {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}
.bold {font-weight: bold; font-size:36px;}

div:first-of-type {
  animation: showup 7s infinite;
}

div:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
}

div:last-of-type span {
  margin-left:-355px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}


p {
  font-size:12px;
  color:#999

Setelah semua kode HTML5 dan CSS3 telah dibuat, langkah terakhir simpan filenya kemudian coba buka pada browser dan lihat tampilan anismai revealing nya, maka akan secara otomatis teks pada browser akan menampilkan sebuah animasi yang cukup menarik untuk kita lihat. 

Nah, bagaimana, cukup menarik bukan animasi revealing nya ? silahkan kalian bisa aplikasikan animasi ini pada web yang kalian punya. Sekian tutorial mengenai Cara Membuat Animasi Teks Revealing dengan CSS3, semoga bermanfaat dan selamat mencoba.

Artikel, Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More