Animasi Text Scrolling Menggunakan Jquery

21/10/2019    Shelli Ripati    65     Website

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan membuat Animasi Text Scrolling Menggunakan Jquery. Dimana animasi text scrolling ini adalah animasi text yang akan bergerak saat kita melakukan scroll pada halaman browser atau website. Langkah pertama untuk dapat membuat Animasi Text Scrolling Menggunakan Jquery kita buat struktur htmlnya seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animasi Text Scrolling Menggunakan Jquery</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        .col-12{
            height: 1000px;
        }
        h4{
            position: fixed;
            top:50%;
            transform: translateY(-50%);
            left:500px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 bg-warning">
                <h4 class="text-primary"> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </h4>
            </div>
        </div>
    </div>
</body>
</html>

Jika teman-teman perhatikan untuk struktur htmlnya, disini saya membuat kalimat menggunakan tag h4 yang mana h4 saya berikan style css dengan attribute dengan posisi fixed yang kemudian leftnya saya atur 500px.

Jika sudah maka tahap selanjutnya saya akan membuat animasi scrolling menggunakan jquery dengan menggunakan event on scroll seperti script di bawah ini. 

<scrip tsrc="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).on("scroll",function(){
            $("h4").css("left", Math.max(500 - 0.35*window.scrollY));
        })
    </script>

Jika teman-teman buka di halaman browser maka ketika teman-teman melakukan scrolling pada halaman website maka secara otomatis text yang di dalam tag h4 pun akan ikut bergerak. Untuk menggerakkannya disini saya mengubah nilai dari attribute dari left dengan menggunakan fungsi Math.max() berdasarkan nilai scroll yang dikalikan 0.35 dan dikurangi 500 dari nilai left sebelumnya.

Demikian artikel tentang cara Animasi Text Scrolling Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More