Kode html teks Ini adalah teks berjalan di Google Sites!
Kode html teks Ini adalah teks berjalan di Google Sites!
Embedded Files
<html>
<body>
<marquee font style="bold" scrolldelay="10">
<font size="5" face="Bedrock">
<font color="#035efc">Ini adalah teks berjalan di Google Sites!
</marquee>
</body>
Kode Html teks Ini adalah teks berjalan di Google Sites!
Kode Html teks Ini adalah teks berjalan di Google Sites!
<div style="overflow: hidden; white-space: nowrap;">
<p id="moving-text" style="display: inline-block; font-size: 20px; font-weight: bold; color: red;">
Ini adalah teks berjalan di Google Sites!
</p>
</div>
<script>
let text = document.getElementById("moving-text");
let position = 0;
function moveText() {
position += 2;
if (position > window.innerWidth) {
position = -text.offsetWidth;
}
text.style.transform = `translateX(${position}px)`;
requestAnimationFrame(moveText);
}
moveText();
</script>
________________________
________________________
Penjelasan Kode:
Penjelasan Kode:
overflow: hidden; white-space: nowrap; → Mencegah teks melompat ke baris baru.
JavaScript digunakan untuk menggerakkan teks dari kiri ke kanan secara otomatis.
requestAnimationFrame(moveText); → Membuat animasi lebih halus.
Kode HTML teks dua baris teks bergerak di Google Sites:
Kode HTML teks dua baris teks bergerak di Google Sites:
<div style="overflow: hidden; width: 100%; height: 100px; position: relative; background: #f0f0f0; padding-top: 10px;">
<!-- Teks berjalan -->
<div id="moving-text" style="font-size: 20px; font-weight: bold; color: red; position: absolute; white-space: nowrap;">
Ini adalah teks berjalan!
</div>
<!-- Teks diam -->
<div style="font-size: 20px; font-weight: bold; color: blue; margin-top: 40px;">
Ini adalah teks diam.
</div>
</div>
<script>
function animateText(textElement, speed) {
let position = -textElement.offsetWidth;
function moveText() {
position += speed;
if (position > window.innerWidth) {
position = -textElement.offsetWidth;
}
textElement.style.transform = `translateX(${position}px)`;
requestAnimationFrame(moveText);
}
moveText();
}
document.addEventListener("DOMContentLoaded", function () {
animateText(document.getElementById("moving-text"), 2); // Hanya teks pertama yang berjalan
});
</script>
____________________
Penjelasan Kode:
Penjelasan Kode:
Dua baris teks berjalan dengan warna merah dan biru.
Fungsi animateText() menggerakkan teks secara independen.
Baris kedua bergerak lebih cepat (speed: 3) dibandingkan baris pertama (speed: 2).
Kode HTML teks dua baris teks bergerak di Google Sites:
Kode HTML teks dua baris teks bergerak di Google Sites:
<div style="overflow: hidden; white-space: nowrap;">
<p id="moving-text1" style="display: inline-block; font-size: 20px; font-weight: bold; color: red;">
Ini adalah teks berjalan baris pertama!
</p>
<br>
<p id="moving-text2" style="display: inline-block; font-size: 20px; font-weight: bold; color: blue;">
Ini adalah teks berjalan baris kedua!
</p>
</div>
<script>
function animateText(textElement, speed) {
let position = 0;
function moveText() {
position += speed;
if (position > window.innerWidth) {
position = -textElement.offsetWidth;
}
textElement.style.transform = `translateX(${position}px)`;
requestAnimationFrame(moveText);
}
moveText();
}
animateText(document.getElementById("moving-text1"), 2); // Baris pertama
animateText(document.getElementById("moving-text2"), 3); // Baris kedua (lebih cepat)
</script>
____________________
Penjelasan Kode:
Penjelasan Kode:
✅ Menambahkan height: 100px; pada div utama agar elemen tidak hilang.
✅ Menghapus position: absolute; dari teks diam supaya tidak terpengaruh layout.
✅ Menggunakan transform: translateX(); untuk animasi teks berjalan, yang lebih aman untuk Google Sites.
✅ Menjalankan JavaScript setelah halaman dimuat (DOMContentLoaded), agar teks berjalan tidak hilang karena skrip dijalankan sebelum elemen dibuat.
Page updated
Google Sites
Report abuse