Membuat video dari website: cara menggulirnya secara otomatis

Buka halamannya, buka DevTools (F12, atau ⌥ ⌘ I di Mac), tempel kode ini di Console, lalu tekan Enter. Skrip menunggu tiga detik agar kamu sempat menyalakan perekam, lalu menggulir dari atas ke bawah mengikuti kurva ease-in-out selama waktu yang kamu tentukan.

const SECONDS = 20;        // berapa lama guliran berlangsung
const WAIT = 3;            // waktu untuk menyalakan perekam

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);

• scrollBehavior = 'auto' itu penting. Banyak situs memasang scroll-behavior: smooth, yang mengubah setiap gerakan kecil skrip menjadi animasi tersendiri dan langsung memunculkan lagi efek tersendat.
• requestAnimationFrame menggerakkan halaman sekali untuk setiap bingkai yang ditampilkan, jadi guliran serata yang dimungkinkan layarmu.
• Gulir ke bawah lalu kembali sekali secara manual sebelum menjalankannya, agar gambar yang dimuat belakangan sudah ada di tempatnya dan tinggi halaman tidak berubah di tengah rekaman.
• Situs yang dibangun dengan pustaka smooth-scroll seperti Lenis atau Locomotive Scroll mengatur guliran sendiri dan bisa melawan skrip. Jika halamannya tersentak-sentak, itulah sebabnya.

Dengan skrip, laju bingkai masih bergantung pada perekam dan komputermu. Renderer menghilangkan keduanya: Website Scroll Video membaca seluruh halaman sekali, lalu menghitung posisinya di setiap bingkai video 24, 30, atau 60 fps yang terkunci, sehingga halaman yang berat tidak bisa kehilangan bingkai dan halaman yang panjang tidak bisa melenceng. Kamu mengatur hal yang sama seperti di skrip, dalam detik dan lewat kurva, lalu melihat pratinjau hasilnya sebelum mengeluarkan apa pun.

Ukur halaman dalam satuan layar: tinggi penuhnya dibagi tinggi jendela. Landing page pada umumnya lima sampai delapan layar. Lalu:

Lebih cepat dari satu layar per detik, teks akan mengabur, terutama pada 30 fps atau di GIF. Lebih lambat dari tiga, penonton mulai kehilangan perhatian. Jika satu bagian lebih penting dari yang lain, jeda di bagian itu lebih baik daripada memperlambat seluruh halaman; Website Scroll Video mengizinkan hingga 6 jeda, masing-masing antara 0,5 dan 5 detik.

• Halus (ease-in-out). Mulai dari diam, melaju, lalu berhenti dengan tenang. Pilihan bawaan yang tepat: kedua ujungnya terlihat disengaja, bukan terpotong.
• Meluncur (ease-out). Berangkat cepat lalu melambat sampai berhenti, seperti sentilan di trackpad. Cocok untuk cuplikan pendek yang perlu dibuka dengan energi.
• Linier. Satu kecepatan dari awal sampai akhir. Paling cocok untuk loop latar, karena perubahan tempo sekecil apa pun menarik perhatian.
• Denyut. Bergerak satu bagian, berhenti, lalu bergerak lagi. Terasa seperti seseorang membuka-buka situs halaman demi halaman, cocok untuk tur produk.

Video yang bergulir ke bawah lalu langsung melompat ke atas memperlihatkan lompatan saat berulang. Sebaiknya gulir ke bawah lalu kembali ke atas mengikuti kurva yang sama: bingkai terakhir sama dengan bingkai pertama dan loop-nya mulus. Di Website Scroll Video, itulah pemutaran Turun lalu kembali, dengan jeda opsional di bawah sebelum kembali dan di atas sebelum loop dimulai lagi.