Berikut ini adalah kode script untuk membuat Tool efek teks generator yang bisa langsung di pasang di blog atau website anda
Text effect generator adalah alat, sering kali menggunakan kecerdasan buatan (AI), yang memungkinkan pengguna membuat modifikasi visual menarik pada teks agar lebih ekspresif. Pengguna dapat membuat efek dari berbagai pilihan yang tersedia atau dengan mendeskripsikan efek yang diinginkan menggunakan perintah teks sederhana, seperti mengubah tampilan huruf menjadi lebih artistik, dengan bayangan, atau lainnya.
- Alat berbasis AI: Alat ini menggunakan kecerdasan buatan untuk membantu menghasilkan efek teks yang unik dan memukau secara otomatis berdasarkan masukan dari pengguna.
- Membuat efek visual: Kegunaannya adalah untuk mengubah teks biasa menjadi lebih dinamis dan menarik untuk berbagai keperluan, seperti materi pemasaran, postingan media sosial, atau proyek pribadi.
- Fleksibel: Pengguna dapat memilih dari berbagai template efek teks yang sudah jadi atau membuat efek kustom sendiri dengan cara mendeskripsikan efek yang diinginkan.
- Kustomisasi: Setelah mendapatkan hasil, pengguna sering kali dapat menyesuaikan lebih lanjut, seperti memilih jenis font, warna latar belakang, atau variasi tampilan efek.
klik untuk menyalin
👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Generator with Effects + Auto CSS</title>
<style>
/* Gravity */
.gravity { animation: gravity 2s infinite ease-in-out; display:inline-block; }
@keyframes gravity { 0%,100%{transform:translateY(0);} 50%{transform:translateY(20px);} }
/* Bounce */
.bounce { animation:bounce 2s infinite; display:inline-block; }
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-20px);} }
/* Float */
.float { animation:float 3s infinite; display:inline-block; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
/* Shadow */
.shadow { text-shadow:2px 2px 5px rgba(0,0,0,0.5); }
/* Button */
.button-effect {
display:inline-block; padding:10px 20px; background:#4caf50;
color:#fff; border:none; border-radius:5px; cursor:pointer;
transition:0.2s;
}
.button-effect:hover { transform:scale(1.1); background:#45a049; }
/* Rainbow */
.rainbow { animation:rainbow 2s infinite linear; display:inline-block; }
@keyframes rainbow {
0%{color:red;} 20%{color:orange;} 40%{color:yellow;}
60%{color:green;} 80%{color:blue;} 100%{color:purple;}
}
/* Moving */
.moving { animation:moving 2s infinite linear; display:inline-block; }
@keyframes moving {
0%{transform:translateX(0);} 50%{transform:translateX(20px);} 100%{transform:translateX(0);}
}
</style>
<style>
.output-box {
background:#f4f4f4; border:1px solid #ddd; padding:10px;
margin-top:10px; font-family:monospace; white-space:pre-wrap;
}
</style>
</head>
<body>
<h2>Generator Tulisan dengan Efek + Output CSS</h2>
<textarea id="inputText" rows="4" cols="50" placeholder="Masukkan teks..."></textarea><br>
<select id="effect">
<option value="bold">Bold</option>
<option value="underline">Underline</option>
<option value="line-through">Coret Tengah</option>
<option value="color">Berwarna</option>
<option value="rainbow">Rainbow</option>
<option value="moving">Bergerak</option>
<option value="gravity">Gravity</option>
<option value="bounce">Bounce</option>
<option value="float">Melayang</option>
<option value="uppercase">Huruf Besar</option>
<option value="unique">Huruf Karakter Unik</option>
<option value="button">Efek Button</option>
<option value="shadow">Bayangan</option>
</select>
<button onclick="generateText()">Generate</button>
<h3>Preview:</h3>
<div id="output" style="font-size:24px; margin-bottom:20px;"></div>
<h3>Salin Kode Lengkap (CSS + HTML):</h3>
<div id="htmlCode" class="output-box"></div>
<script>
const cssBlock = `
<style>
.gravity { animation: gravity 2s infinite ease-in-out; display:inline-block; }
@keyframes gravity { 0%,100%{transform:translateY(0);} 50%{transform:translateY(20px);} }
.bounce { animation:bounce 2s infinite; display:inline-block; }
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-20px);} }
.float { animation:float 3s infinite; display:inline-block; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.shadow { text-shadow:2px 2px 5px rgba(0,0,0,0.5); }
.button-effect {
display:inline-block; padding:10px 20px; background:#4caf50;
color:#fff; border:none; border-radius:5px; cursor:pointer;
transition:0.2s;
}
.button-effect:hover { transform:scale(1.1); background:#45a049; }
.rainbow { animation:rainbow 2s infinite linear; display:inline-block; }
@keyframes rainbow {
0%{color:red;} 20%{color:orange;} 40%{color:yellow;}
60%{color:green;} 80%{color:blue;} 100%{color:purple;}
}
.moving { animation:moving 2s infinite linear; display:inline-block; }
@keyframes moving {
0%{transform:translateX(0);} 50%{transform:translateX(20px);} 100%{transform:translateX(0);}
}
</style>
`;
function generateText() {
const text = document.getElementById('inputText').value;
const effect = document.getElementById('effect').value;
let style = "";
let className = "";
let transformedText = text;
switch (effect) {
case "bold": style = "font-weight:bold;"; break;
case "underline": style = "text-decoration:underline;"; break;
case "line-through": style = "text-decoration:line-through;"; break;
case "color": style = "color:red;"; break;
case "rainbow": className = "rainbow"; break;
case "moving": className = "moving"; break;
case "gravity": className = "gravity"; break;
case "bounce": className = "bounce"; break;
case "float": className = "float"; break;
case "uppercase": transformedText = text.toUpperCase(); break;
case "unique":
transformedText = text.split("").map(c => `&#${c.charCodeAt(0)};`).join("");
break;
case "button": className = "button-effect"; break;
case "shadow": className = "shadow"; break;
}
const spanHTML = `<span style="${style}" class="${className}">${transformedText}</span>`;
document.getElementById('output').innerHTML = spanHTML;
document.getElementById('htmlCode').textContent =
(cssBlock + "\n" + spanHTML).trim();
}
</script>
</body>
</html>
Komentar untuk Kode Script Generator text efek