Cara Membuat Animasi Efek Mengetik Teks

Cara Membuat Animasi Efek Mengetik Teks

Cara Membuat Animasi Efek Mengetik Teks
Cara Membuat Animasi Efek Mengetik Teks

Cara Membuat Efek Animasi Mengetik Teks dengan CSS & JavaScript, atau Membuat Efek Tulisan Berjalan Seperti Diketik, nah untuk membuat efek seperti ini kita membutuhkan CSS dan JavaScript tentunya, kalau kalian sering mengunjungi website yang berbasis portfolio biasanya suka menemukan efek tulisan berjalan seperti diketik ini, Pada dasarnya, efek Type Otomatis digunakan oleh banyak situs web pada banner atau landing page. Seperti Kalian telah menunjukkan 5-6 kalimat yang mirip kepada pengguna kalian, maka kalian dapat menggunakan program ini untuk visual yang baik, pada Landing page website kalian.

membuat Efek Loop Jenis Karakter Otomatis . Pada dasarnya ada kalimat yang tidak lengkap yaitu “Coding is __”, dan 4 item untuk isilah titik-titik. Saat kalian akan memulai program animasi pengetikan ini maka keempat item akan diketik secara otomatis satu demi satu secara berulang. Dan teks animasi atau kursor pengetikan membuat efek pengetikan sepenuhnya.

Nah jika kalian tertarik dengan programnya da penasaran, kalian bisa melihat preview dibawah ini dan tentunya dengan source code yang disediakan.


Cara Membuat Efek Mengetik dengan JavaScript & CSS

mari kita bahas sedikit tentang program ini. Pertama, admin telah membuat tag div dan menempatkan tag paragraf di dalamnya, tetapi kalimat itu tidak lengkap sekarang di dalam div yang sama admin telah menempatkan dua nama kelas. Kedua tag span ini untuk teks dan kursor pengetikan , juga di file HTML admin telah menautkan file lain seperti CSS, JS .

Sekarang menggunakan CSS untuk menempatkan file teks di tengah seperti yang kalian lihat di preview. Dengan CSS admin memberi tinggi seluruh elemen 100vh, itu berarti akan menutupi layar secara penuh. Di sana admin telah menggunakan font google untuk teks , dan file CDN font yang ditautkan di file CSS menggunakan perintah @import dan menggunakan CSS untuk membuat efek kedipan kursor saat mengetik menggunakan perintah @keyframe

Sekarang di file JavaScript , admin telah mengambil dua elemen text span dan cursor span . Untuk mendapatkan data elemen HTML admin gunakan JavaSript dokumen .querySelector Untuk menyimpan kata-kata dan mengisi kekosongan dalam sebuah array,  admin telah membuat penundaan animasi untuk mengetik kata berikutnya. Sekarang semua fungsi telah selesai menggunakan perintah JS if{} else{}

Kalian akan  mengerti setelah mendapatkan kode , admin tidak bisa menjelaskan semuanya secara tertulis. Untuk membuat program ini, kalian harus membuat 3 file. Pertama untuk HTML , kedua untuk CSS , dan ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat program ini tanpa kesalahan.

Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.

<!DOCTYPE html>
<!-- Code By RuangCoder ( https://www.ruangcoder.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>JavaScript Typing Effect | RuangCoder</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">
    <p>Coding is <span class="typed-text"></span><span class="TypeCursor">&nbsp;</span></p>
  </div>

<script  src="function.js"></script>

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

/* Code By RuangCoder ( https://www.ruangcoder.com ) */
@import url('https://fonts.googleapis.com/css?family=Alata&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Alata', sans-serif;
  background-color: #212121;
  color: #eee;
}
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container p {
  font-size: 3rem;
  padding: 0.5rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  overflow: hidden;
}
.container p span.typed-text {
  font-weight: normal;
  color: #dd7732;
}
.container p span.TypeCursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}
.container p span.TypeCursor.typing {
  animation: none;
}
@keyframes blink {
  0%  { background-color: #ccc; }
  49% { background-color: #ccc; }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: #ccc; }
}
@media (max-width:750px) {
  .container p {
    font-size: 2rem;
  }
}

Langkah terakhir, Buat file JavaScript bernama function.js dan masukkan kodenya.

// Code By RuangCoder ( https://www.ruangcoder.com )
const TypingText = document.querySelector(".typed-text");
const AutoTyping = document.querySelector(".TypeCursor");

const textArray = ["hard.", "Life.", "Emotion.", "Passion."];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; 
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if(!AutoTyping.classList.contains("typing")) AutoTyping.classList.add("typing");
    TypingText.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  } 
  else {
    AutoTyping.classList.remove("typing");
      setTimeout(erase, newTextDelay);
  }
}

function erase() {
    if (charIndex > 0) {
    if(!AutoTyping.classList.contains("typing")) AutoTyping.classList.add("typing");
    TypingText.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  } 
  else {
    AutoTyping.classList.remove("typing");
    textArrayIndex++;
    if(textArrayIndex>=textArray.length) textArrayIndex=0;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function() { 
  if(textArray.length) setTimeout(type, newTextDelay + 250);
});

Penutup

Nah sampai disini kalian telah berhasil Cara Membuat Efek Mengetik dengan JavaScript & CSS, mungkin artikel nya sampai disini saja, semoga bermanfaat buat kalian, dan terimakasih sudah berkunjung, jangan bosan - bosan untuk berkunjung.

Anda mungkin menyukai postingan ini