You are currently viewing Cara Membuat Text Marquee di WordPress Tanpa Plugin

Cara Membuat Text Marquee di WordPress Tanpa Plugin

Tekstil Marquee telah menjadi bagian dari kenangan masa lalu dunia web, namun ada saat-saat tertentu di mana efek berjalan ini mungkin menjadi solusi yang tepat untuk kebutuhan tertentu.

WordPress, sebagai platform CMS yang paling banyak digunakan, memberikan fleksibilitas untuk menambahkan efek marquee dengan mudah. Dalam artikel ini, kita akan membahas bagaimana cara melakukannya.

 

Apa Itu Text Marquee?

Marquee adalah efek animasi yang memungkinkan teks atau gambar bergerak melintasi layar, baik secara horizontal maupun vertikal. Ini awalnya diintroduksi sebagai tag HTML <marquee>, tetapi seiring waktu, metode yang lebih modern dan fleksibel telah mengambil alih, terutama melalui CSS dan JavaScript.

 

Langkah-langkah Membuat Text Marquee di WordPress

Langsung menggunakan kode

Anda bisa membuat teks marque dengan menggunakan kode langsung ini.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marquee Post</title>
    <style>
        #marqueeContainer {
            height: 50px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: flex-start; /* Ubah dari center ke flex-start untuk rata kiri */
        }

        #marqueeLink {
            transform: translateY(100%);
            transition: transform 0.1s;
        }
    </style>
</head>

<body>

    <div id="marqueeContainer">
        <a href="" id="marqueeLink">Loading...</a>
    </div>

    <script>
        const texts = [
            { text: "ABC", link: "https://abc.com" },
            { text: "DEF", link: "https://def.com" },
            { text: "GHI", link: "https://ghi.com" }
        ];

        function getRandomText() {
            return texts[Math.floor(Math.random() * texts.length)];
        }

        function updateMarquee() {
            const marqueeLink = document.getElementById("marqueeLink");
            const randomText = getRandomText();
            marqueeLink.textContent = randomText.text;
            marqueeLink.href = randomText.link;
            marqueeLink.style.transform = "translateY(100%)"; // Start from below

            // Quickly move the text into view
            setTimeout(() => {
                marqueeLink.style.transform = "translateY(0%)";
            }, 0);

            // Wait for 3 seconds, then go to the next random text
            setTimeout(() => {
                marqueeLink.style.transform = "translateY(-100%)"; // Exit to the top
                setTimeout(updateMarquee, 100);
            }, 3100);
        }

        // Initiate the marquee
        updateMarquee();
    </script>

</body>

</html>

Penyesuaian

Mengubah kecepatan transisi: setTimeout(updateMarquee, 100); silahkan ganti angka 100 (0,1 detik) menjadi durasi yang Anda inginkan.

Waktu tunggu: }, 3100);. Waktu tunggu yang di setup dalam kode tersebut adalah 3 detik, dan harus ditambahkan dengan kecepatan transisi sebanyak 100 milidetik. Jika ingin waktu tunggu nya lebih lama, silahkan ubah angka nya menjadi lebih besar.

Informasi lain

Kode dari teks marque diatas memiliki animasi dari bawah ke atas.

 

Penutup

Sementara marquee mungkin dianggap ketinggalan zaman dalam banyak hal, ada situasi di mana efek ini mungkin tepat apa yang Anda butuhkan.

Dengan WordPress, menambahkan dan mengkustomisasi marquee menjadi proses yang mudah. Ingatlah untuk selalu menguji dan memastikan bahwa fitur apa pun yang Anda tambahkan ke situs Anda meningkatkan, bukan mengurangi, pengalaman pengguna.

Leave a Reply