Kursus Web Design Grogol | Membuat Text Animasi dengan HTML CSS

Hallo teman-teman, pada kesempatan kali ini kami kursus web design grogol akan membahas tentang Membuat Text Animasi dengan HTML CSS. sebelumnya pada sebuah website itu banyak sekali text tetapi text tersebut membosankan atau tidak keren.

nah disini kami kursus web design grogol akan Membuat Text Animasi dengan HTML CSS. agar text yang ada pada website kita terlihat lebih keren dan tidak membosankan.
oke langsung saja
Pertama buat file htmlnya terlebih dahulu, lalu copy script html dibawah ini :

<section class="container">
  <h1 class="title">
    <span>Hallo</span>
    <span>DumetSchool</span>
  </h1>
  
  <h2 class="title">
    <span>Terbaik dan Nomor 1</span>
  </h2>
</section>

setelah htmlnya sekarang masukan script cssnya seperti dibawah ini :

@import "https://fonts.googleapis.com/css?family=Baloo+Paaji";
html, body {
  height: 100%;
}

body {
  font-family: 'Baloo Paaji', cursive;
  background: #1e90ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 400px;
  height: 220px;
  position: relative;
}

h1, h2 {
  font-size: 75px;
  text-transform: uppercase;
}
h1 span, h2 span {
  width: 100%;
  float: left;
  color: #ffffff;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  opacity: 0;
  animation-name: titleAnimation;
  animation-timing-function: ease;
  animation-duration: 3s;
}

h1 span {
  animation-delay: 0.6s;
  -webkit-animation-fill-mode: forwards;
}
h1 span:first-child {
  animation-delay: 0.7s;
}
h1 span:last-child {
  color: #ffe221;
  animation-delay: 0.5s;
}

h2 {
  top: 0;
  position: absolute;
}
h2 span {
  animation-delay: 4.1s;
  -webkit-animation-fill-mode: forwards;
}
h2 span:first-child {
  animation-delay: 4.2s;
}
h2 span:last-child {
  color: #ffe221;
  animation-delay: 4s;
}


@keyframes titleAnimation {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);
  }
  80% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 30%);
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% -30%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% -30%, 0 100%, 0 100%);
  }
}

jika sudah dengan style css nya, coba teman-teman simpan dan jalankan/run dibrowser yang teman-teman gunakan.

maka hasilnya akan terlihat seperti pada gambar dibawah ini :

jika hasilnya sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam Membuat Text Animasi dengan HTML CSS.

sekian pembahasan kali ini tentang Membuat Text Animasi dengan HTML CSS. semoga dapat banyak referensi mengenai animasi design website, sampai bertemu di pembahasan selanjutnya dari kami kursus web design grogol.
Terimakasih.

Membuat Text Animasi dengan HTML CSS

Kategori