Animasi Text Scrolling Menggunakan Jquery

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.

21 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat