Sementara untuk percobaan



Perubahan yang dilakukan pada fungsi shiftItems() adalah sebagai berikut:

Menambahkan variabel "height" untuk menyimpan tinggi elemen pertama. Variabel ini digunakan agar penggeseran elemen yang diperlihatkan pada animasi selalu sejajar dengan elemen yang sedang ditampilkan pada layar.

Mengganti nilai transform pada saat awal pemanggilan fungsi shiftItems(). Kita ingin elemen yang sebelumnya tersembunyi di bagian bawah, kemudian bergeser ke atas dengan jarak sejajar dengan tinggi elemen pertama. Oleh karena itu, kita menggeser elemen sejauh "height" pixel ke atas. Nilai "height" dihitung dengan menggunakan method offsetHeight pada elemen pertama.

Mengubah waktu transisi pada saat transform. Kita tidak ingin transisi terjadi pada saat pemanggilan fungsi shiftItems() karena efek transisi akan memengaruhi posisi elemen pertama yang sedang ditampilkan pada layar. Oleh karena itu, kita set waktu transisi ke 0 detik untuk menghilangkan efek transisi saat elemen pertama dipindahkan.

Menambahkan waktu tunggu sebelum mengubah nilai transform. Sebelum mengubah nilai transform kembali ke nilai semula, kita perlu menunggu sejenak untuk memastikan bahwa nilai transform pada saat pemindahan elemen pertama sudah dijalankan dan elemen yang ditampilkan pada layar sudah bergeser sejajar dengan tinggi elemen pertama.

Dengan perbaikan-perbaikan tersebut, maka fungsi shiftItems() akan bekerja dengan lebih baik dan menghasilkan animasi yang lebih halus dan sejajar dengan elemen yang sedang ditampilkan pada layar.


Dalam kode ini, kita memiliki fungsi shiftItems() yang melakukan pergeseran elemen pada daftar dengan memindahkan elemen pertama ke akhir daftar. Kode ini telah diperbaiki untuk menyertakan tinggi elemen pertama dalam penggeseran elemen sehingga pergeseran selalu sejajar dengan elemen yang sedang ditampilkan pada layar. Selain itu, transisi juga diperbaiki untuk menghilangkan efek transisi saat pemindahan elemen pertama.

Fungsi applyAnimation() digunakan untuk mengatur interval pemanggilan fungsi shiftItems() setiap 3 detik. Selain itu, fungsi ini juga menambahkan event listener pada elemen daftar untuk menghentikan dan melanjutkan animasi saat mouse berada di atas daftar.

Dengan menggunakan kode ini, elemen-elemen pada daftar akan bergeser ke atas sejauh tinggi elemen pertama (dalam contoh ini, 90px) secara terus-menerus dengan interval 3 detik, dan animasi akan dihentikan saat mouse berada di atas daftar.

Dalam kode tersebut, kita menggunakan event listener mouseover dan mouseout untuk mengatur penghentian dan lanjutan animasi saat kursor mouse berada di atas daftar. Ketika kursor mouse memasuki daftar, animasi dihentikan dengan menggunakan clearInterval(intervalId), dan saat kursor mouse keluar dari daftar, animasi dilanjutkan kembali dengan menggunakan setInterval(shiftItems, 3000).

Kode lainnya tetap sama seperti sebelumnya, yaitu fungsi shiftItems() untuk melakukan pergeseran elemen pada daftar dengan efek animasi transisi yang diatur menggunakan CSS transform dan transition. Fungsi applyAnimation() digunakan untuk menginisialisasi animasi dengan memanggil setInterval(shiftItems, 3000) dan menambahkan event listener pada elemen daftar untuk mengatur perubahan animasi saat kursor mouse berada di atas atau keluar dari daftar.

Dengan menggunakan kode ini, elemen-elemen pada daftar akan bergeser ke atas sejauh 90px secara terus-menerus dengan interval 3 detik, dan animasi akan dihentikan saat kursor mouse berada di atas daftar, dan dilanjutkan kembali saat kursor mouse keluar dari daftar.

Tidak ada komentar:

Posting Komentar

Wiremesh murah hubungi Afandi - 081233336118. - Ada juga besi beton murah.

Jasa Pembuatan Pagar, Kanopi (+Renovasi)
WA ke 081233336118