Posts

Efek Animasi Kata Pada Text Dengan CSS Animations

ta

Dalam tutorial hari ini kita akan membuat efek tipografi. Idenya adalah untuk membuat animasi pada beberapa kata. Kata-kata itu akan bertukar dengan Kata lainnya menggunakan Animation pada CSS.

Harap dicatat: Hasil tutorial ini hanya akan bekerja pada browser yang mendukung CSS Animations.

Hasil akhirnya bisa kalian lihat disini.

Markup HTML

Disini kita akan memiliki wrapper utama dengan h2 heading yang berisi span tingkat pertama dan 2 divisi untuk kata yang akan diberi animasi:

<section class="rw-wrapper">
  <h2 class="rw-sentence">
    <span>Real poetry is like</span>
    <span>creating</span>
    <div class="rw-words rw-words-1">
      <span>breathtaking moments</span>
      <span>lovely sounds</span>
      <span>incredible magic</span>
      <span>unseen experiences</span>
      <span>happy feelings</span>
      <span>beautiful butterflies</span>
    </div>
    <br />
    <span>with a silent touch of</span>
    <div class="rw-words rw-words-2">
      <span>sugar</span>
      <span>spice</span>
      <span>colors</span>
      <span>happiness</span>
      <span>wonder</span>
      <span>happiness</span>
    </div>
  </h2>
</section>

Sekarang, abaikan placeholder, kita buat setiap span dari rw-word untuk tampil pada waktu yang ditentukan. Untuk itu kita akan menggunakan CSS Animations. Kita akan membuat satu animasi untuk setiap divisi dan setiap span akan menjalankannya, hanya dengan penundaan yang berbeda. Jadi, mari kita lihat CSS berikut ini.

CSS3

Pertama, kita beri style untuk wrapper utama dan posisikan ditengah halaman:

.rw-wrapper{
  width: 80%;
  position: relative;
  margin: 110px auto 0 auto;
  font-family: 'Bree Serif';
  padding: 10px;
}

Kita akan tambahkan beberapa text shadow ke semua elemen di dalam heading:

.rw-sentence{
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

Dan lakukan styling pada teks pada span:

.rw-sentence span{
  color: #444;
  white-space: nowrap;
  font-size: 200%;
  font-weight: normal;
}

Divisi akan ditampilkan sebagai elemen inline, yang akan memungkinkan kita untuk memasukkan mereka ke dalam kalimat tanpa merusak kalimatnya:

.rw-words{
  display: inline;
  text-indent: 10px;
}

Setiap span dalam div rw-word akan diposisikan absolute dan kita sembunyikan setiap overflow:

.rw-words span{
  position: absolute;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  color: #6b969d;
}

Sekarang, kita akan menjalankan 2 animasi. Seperti yang disebutkan sebelumnya, kita akan menjalankan animasi yang sama untuk semua span dalam 1 div, hanya dengan penundaan/delay yang berbeda:

.rw-words-1 span{
  animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
  animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
  animation-delay: 3s; 
  color: #6b889d;
}
.rw-words span:nth-child(3) { 
  animation-delay: 6s; 
  color: #6b739d;	
}
.rw-words span:nth-child(4) { 
  animation-delay: 9s; 
  color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
  animation-delay: 12s; 
  color: #8d6b9d;
}
.rw-words span:nth-child(6) {  
  animation-delay: 15s; 
  color: #9b6b9d;
}

Animasi yang kita buat akan menjalankan satu siklus, yang berarti bahwa setiap span akan ditampilkan sekali selama 3 detik delay/penundaan. Semua animasi akan berjalan 6 (jumlah kata) * 3 (waktu tampil) = 18 detik. Kita perlu mengatur pesentase yang tepat untuk nilai opacity(atau apapun yang membuat span muncul). Dengan membagi 6 dengan 18 kita dapatkan hasil 0,333… yang akan  menjadi 33% untuk langkah keyframenya. Setelah tweaking dan melihat apa yang paling cocok, kita buat dengan animasi berikut untuk kata-kata pertama:

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
  25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

Kita akan buat itu memudar/fade di dalam span dan juga buat animasi untuk tingginya.

Animasi untuk kata yang ada didalam div kedua akan memudar dan menganimasikan widthnya. Kita tambahkan sedikit untuk persentase keyframe, karena kita ingin kata ini muncul sedikit lebih lambat dari kata pertama:

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
  20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

Dengan demikian animasinya akan berjalan dengan lancar, kalian juga bisa mencoba CSS Animation yang lain. Hasilnya bisa kalian lihat disini.

Sekian tutorial hari ini. Terima kasih..