Cara Membuat Program Animasi Sederhana Menggunakan JavaScript Beserta Contohnya

afyadm

https://www.gabuttech.com/

Animasi adalah cara yang efektif untuk menarik perhatian pengunjung situs web Anda. Dalam artikel ini, kita akan belajar cara membuat animasi sederhana menggunakan bahasa pemrograman JavaScript. Animasi sederhana ini akan membantu Anda memahami dasar-dasar pembuatan animasi web.

Cara Coding Animasi Sederhana Menggunakan JavaScript Beserta Contohnya :

1. Persiapan:

Sebelum kita memulai, pastikan Anda telah menyertakan JavaScript di halaman HTML Anda. Anda dapat melakukannya dengan menambahkan elemen <script> ke dalam dokumen HTML Anda. Berikut ini adalah contoh HTML sederhana yang telah menyertakan JavaScript:

html :

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Animasi Sederhana Menggunakan JavaScript</title>

</head>

<body>

    <!– Konten halaman web Anda akan ada di sini –>

    

    <!– Menyertakan JavaScript –>

    <script src=”script.js”></script>

</body>

</html>

2. Membuat Animasi dengan JavaScript:

Berikut adalah contoh kode JavaScript untuk membuat animasi sederhana yang menggeser elemen HTML ke kanan:

javascript :

// Mengambil elemen yang akan dianimasikan

const elemenAnimasi = document.getElementById(“animasi”);


// Menyimpan posisi awal elemen

let posisi = 0;


// Fungsi untuk menjalankan animasi

function animasi() {

    posisi += 1; // Pindahkan elemen ke kanan

    elemenAnimasi.style.left = posisi + “px”; // Terapkan perubahan posisi

    if (posisi >= 200) {

        clearInterval(id); // Menghentikan animasi saat mencapai posisi tertentu

    }

}


// Memulai animasi dengan interval 10 milidetik

const id = setInterval(animasi, 10);

3. Tambahkan Elemen HTML yang Dianimasikan:

Anda perlu menambahkan elemen HTML yang akan dianimasikan. Dalam contoh ini, kami menggunakan elemen <div> dengan ID “animasi”:

html :

<div id=”animasi” style=”position: absolute; width: 50px; height: 50px; background-color: red;”></div>

Kesimpulan:

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat animasi sederhana menggunakan JavaScript. Animasi ini akan menggeser elemen HTML ke kanan dengan interval waktu tertentu. Ini adalah dasar-dasar pembuatan animasi web, dan dari sini, Anda dapat menjelajahi teknik dan konsep yang lebih canggih untuk menciptakan animasi yang lebih menarik di situs web Anda. Animasi dapat digunakan untuk meningkatkan interaktivitas dan daya tarik halaman web Anda.

Also Read

Bagikan:

Tags

Tinggalkan komentar