Tutorial Membuat Free Glitter Text Generator (HTML + CSS + JS)
Table of Contents
.webp) |
| Tutorial Membuat Free Glitter Text Generator |
Asik-Belajar - Glitter Text Generator memungkinkan pengunjung membuat tulisan berkilau dengan efek glitter yang bisa dikustomisasi: warna, ukuran, dan efek animasi. Cocok untuk blog bertema kreatif, fashion, anak muda, atau web personal. bisa lihat pada tool glitter di sini
🎯 Fitur yang Akan Kita Buat
-
Input teks dari pengguna.
-
Pilih warna glitter (warna utama + efek).
-
Pilih ukuran teks.
-
Efek berkilau animasi.
-
Salin hasil HTML dengan tombol “Copy”.
🧩 1. HTML Dasar
Tambahkan kode ini di dalam halaman blog atau file HTML kamu:
<div id="glitter-generator">
<h2>Buat Glitter Text Kamu:</h2>
<input type="text" id="inputText" placeholder="Tulis teks di sini">
<br><br>
<label>Warna Teks:</label>
<input type="color" id="colorPicker" value="#ff00cc">
<label>Ukuran:</label>
<input type="number" id="fontSize" value="36" min="12" max="100"> px
<br><br>
<button onclick="generateGlitter()">Buat Glitter</button>
<h3>Hasil:</h3>
<div id="preview" class="glitter-text"></div>
<h4>Kode HTML:</h4>
<textarea id="htmlCode" rows="4" style="width:100%"></textarea>
<button onclick="copyCode()">Copy Kode</button>
</div>
🎨 2. CSS untuk Efek Glitter
Tambahkan kode ini di <style> atau sebelum </head>:
<style>
#glitter-generator {
max-width: 500px;
margin: auto;
text-align: center;
font-family: sans-serif;
}
.glitter-text {
font-weight: bold;
background: linear-gradient(45deg, #ff00cc, #3333ff, #ffcc00);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: glitterMove 2s linear infinite;
display: inline-block;
margin-top: 20px;
}
@keyframes glitterMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
⚙️ 3. JavaScript untuk Fungsi Generator
Tambahkan kode berikut sebelum </body>:
<script>
function generateGlitter() {
const text = document.getElementById("inputText").value || "Glitter Text";
const color = document.getElementById("colorPicker").value;
const size = document.getElementById("fontSize").value;
const preview = document.getElementById("preview");
preview.style.fontSize = size + "px";
preview.innerText = text;
// Gradient dengan warna utama
preview.style.background = `linear-gradient(45deg, ${color}, #ffffff, ${color})`;
const htmlOutput = `<span style="
font-weight: bold;
background: linear-gradient(45deg, ${color}, #ffffff, ${color});
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: glitterMove 2s linear infinite;
font-size: ${size}px;
">${text}</span>`;
document.getElementById("htmlCode").value = htmlOutput;
}
function copyCode() {
const code = document.getElementById("htmlCode");
code.select();
document.execCommand("copy");
alert("Kode HTML disalin!");
}
</script>
📸 4. Hasil Akhir
Dengan form sederhana, pengunjung bisa:
-
Mengetik teks
-
Memilih warna & ukuran
-
Melihat pratinjau berkilau
-
Menyalin kode HTML untuk dipasang di blog, forum, atau bio media sosial.
🎁 Bonus (Opsional): Tambahkan Font Fancy
Tambahkan di <head>:
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
Lalu ubah CSS:
.glitter-text {
font-family: 'Pacifico', cursive;
}
Dengan tutorial ini kamu sudah berhasil membuat:
-
Glitter Text Generator responsif dan interaktif.
-
Efek teks animasi berkilau dengan warna kustom.
-
Kode HTML siap salin.
💡 Cocok untuk halaman dekoratif, blog pribadi, bahkan bisa dikembangkan jadi widget!
wow this nice n good post,thnxs this info n good luck
tapi kebetulan saya kurang suka dgn yg keralp kerlip
jadi blog saya tetep sepi animasi