Cara Membuat Animasi Teks Revealing dengan CSS3

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.

29 Agustus 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat