Skip to content Skip to sidebar Skip to footer

Widget HTML #1

Home / Pemrograman

Cara Membuat Animasi Menulis Teks Dengan Html, CSS dan JavaScript

Typing Text

Cara Membuat Animasi Menulis Teks Dengan Html, CSS dan JavaScript | Sesuai dengan judul pada artikel kali ini kita akan membahas bagaimana cara membuat text typing animation yang simpel dan keren pastinya.

Tutorial ini di buat untuk temen-temen yang mungkin agak males untuk membuat animasi typingnya secara manual, Maka pada tutorial kali ini kita akan membuat animasi typing menggunakan library JavaScript yaitu typed.js.

Cara Membuat Animasi Menulis Teks Dengan Html, CSS dan JavaScript

Saya harap temen-temen yang membaca artikel ini sudah memahami html dan css dasar. karena disini saya tidak menjelaskan secara detail tentang cara penggunaan class pada element HTML dan cara untuk memhubungkan file CSS ke dalam HTML.

Apa Itu Typed.js?

Typed.js adalah sebuah plugin JavaScript yang memberikan efek teks menulis secara otomatis pada website kita sesuai dengan tujuan JavaScript yang menjadikan website menjadi interaktif. Typed.js dibuat oleh Matt Boldt di Texas, Us.

1. Membuat Script Typing Animation

Di awal kita membuat script untuk animasi menulis teksnya, sesuai dengan kata-kata yang ingin kita buat. kalian bisa copy source codenya di bawah ini. 

<script>
    var typing = new Typed(".text", {
      strings: ["", "Rizal", "a Student", "a Blogger", "a Front End Developer"],
      typeSpeed: 100,
      delaySpeed: 100,
      loop: true,
    });
  </script>

Fungsi

  • strings : ['Rizal' , 'a Student'] : Teks apa yang ingin di tampilkan.
  • typeSpeed : 100 : Seberapa cepat proses teks mengetik.
  • delaySpeed : 100 : Seberapa lama jeda teks untuk mengulang.
  • loop : true : Kondisi teks apakah looping atau tidak.

2. Membuat HTML Typing Animation

Yang kedua kita membuat file htmlnya, jangan lupa untuk memasukkan library typed.js dan script typing animation yang telah kita buat di bawah tag </body>, kalian bisa copy source codenya di bawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--Menhubungkan Html Dengan CSS-->
    <link rel="stylesheet" href="style.css" />
    <!--Menambahkan Library typed.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-typing-animation</title>
  </head>
  <body>
    <div class="hai">Hello! I'm</div>
    <div class="text"></div>
  </body>
  <!--Masukkan Script Typing Teksnya yg telah dibuat disini ! -->
</html>

Hubungkan html dengan ccs seperti yang ada pada source code di atas. selanjutnya kita akan buat css nya.

3. Membuat CSS Typing Animation

Terakhir kita buat cssnya, CSS ini berfungsi untuk mengatur layout, merubah ukuran, warna background danlainnya. dan pastinya untuk mempercantik kerangka HTML yang telah kita buat diatas. Kalian Bisa Kostumisasi css yang admin berikan sesuai dengan keinginan kalian.

/* Menambahkan font dari google*/
@import url("https://fonts.googleapis.com/css2?family=Secular+One:[email protected];300;400&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Styling Body */
body {
  background-color: #121212;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
/* Styling teks pada class hai */
.hai {
  color: white;
  font-size: 50px;
  padding: 15px;
  font-family: sans-serif;
  font-weight: 220;
  font-family: "Secular One", san-serif;
}
/* Styling teks typing animasi pada clas text */
.text {
  color: white;
  border-right: 2px solid #b9b9b9;
  font-size: 50px;
  font-family: sans-serif;
  color: #ff8c00;
  font-weight: 420;
  font-family: "Secular One", sans-serif;
}

Akhir Kata

Sekian Tutorial Cara Membuat Animasi Menulis Teks Dengan Html, CSS dan JavaScript Semoga tutorial ini dapat bermanfaat buat teman-teman, dan jangan lupa untuk selalu support dengan cara share artikel ini dan membaca informasi-informasi menarik lainnya yang ada di wyvorz.com