Cara menggunakan text-transform animation css

Question

Hallo guys, kali ini gw akan membagikan script sederhana membuat efek text bergelombang dengan menggunakan bahasa pemrograman CSS. Tanpa banyak basa basi mari kita buat scriptnya. Seperti biasa, kita buat 2 file terlebih dahulu dengan nama index.html dan style.css. Kemudian untuk fileindex.html kita ketikkan script sebagai berikut :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Wavy text animation</title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
    <div class="wavy">
        <span style="--i:1;">O</span>
        <span style="--i:2;">P</span>
        <span style="--i:3;">R</span>
        <span style="--i:4;">E</span>
        <span style="--i:5;">K</span>
    </div>
</body>
</html>

Lalu untuk file style.css kita ketikkan script sebagai berikut :

* 
{
    margin: 0;
    padding: 0;
    font-family: calibri;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}
.wavy 
{
    position: relative;
    -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.2));
}
.wavy span
{
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 8em;
    text-transform: uppercase;
    animation: animate 1s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--i));
}
@keyframes animate
{
    0%
    {
        transform: translateY(0px);
    }
    20%
    {   
        transform: translateY(-20px);
    }
    40%,100%
    {
        transform: translateY(0px);
    }
}

Setelah itu jangan lupa di save dan jalankan scriptnya. Untuk outputnya nanti hasilnya akan seperti ini :

Bagaimana menurut kalian ? silahkan tulisakan komentar kalian di kolom komentar. jika kalian suka tips dan trick lainnya stay tuned terus ya. untuk tips dan trick lainnya yang tidak kalah menarik bisa akses kesini.

Itulah tadi script sederhana yang bisa gw share, semoga bisa bermanfaat bagi kalian yang sedang belajar ataupun yang sedang mengembangkan website. Tidak lupa juga apabila ingin source codenya bisa di download dibawah ya.

Sekian artikel mengenai Cara Membuat Teks Animasi Glitch Dengan CSS di Blogger yang penulis bagikan untuk kamu. Jika kamu memiliki pertanyaan perihal artikel ini, jangn sungkan untuk berkomentar di bawah ya. Semoga bermanfaat.

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Animasi Text dengan HTML dan CSS. sebelumnya pada sebuah website itu banyak sekali sebuah text atau kalimat tetapi text tersebut sangat membosankan atau tidak ada animasi sedikitpun.

Jadi disini saya akan memberikan contoh tentang Cara Membuat Animasi Text dengan HTML dan CSS. agar text yang ada pada website kita terlihat lebih keren dan tidak membosankan.

oke langsung saja kita mulai

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 sudah dengan htmlnya, sekarang masukan script cssnya seperti dibawah ini :

<style>
@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%);
  }
}

</style>

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 Cara Membuat Animasi Text dengan HTML dan CSS.

sekian pembahasan kali ini tentang Cara Membuat Animasi Text dengan HTML dan CSS. semoga dapat banyak referensi mengenai animasi design website, sampai bertemu di pembahasan selanjutnya.

kode css

Cara menggunakan text-transform animation css

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social