Cara merekam animasi gulir dan parallax dalam video website

Efek fade-in, kemunculan, parallax, dan bagian yang terkunci hanya terjadi saat halaman benar-benar digulir. Cara merekamnya dalam video, dan mengapa sebagian besar alat perekam halaman penuh melewatkannya.

Aviral LakhanpaulDiperbarui 30 Oktober 20263 menit baca

Jawaban singkatnya

Animasi gulir hanya berjalan saat halaman benar-benar digulir, jadi alat yang menggeser satu tangkapan layar halaman penuh tidak bisa menampilkannya. Rekam layar selagi skrip menggulir halaman, atau pakai renderer yang merekam halaman secara langsung di setiap posisi guliran, seperti mesin Perekaman langsung di Website Scroll Video. Untuk hasil yang lebih cepat tanpa gerakan, jalankan animasi kemunculan sampai keadaan akhirnya sebelum merekam.

Mengapa animasinya hilang

Sebagian besar alat URL-ke-video bekerja dalam dua langkah: mengambil satu tangkapan layar halaman yang sangat tinggi, lalu menggerakkan bingkai menuruninya. Cara ini cepat dan mulus sempurna, tetapi tangkapan layar itu hanya satu momen. Apa pun yang digerakkan oleh posisi guliran, seperti judul yang memudar masuk saat memasuki viewport, gambar parallax, bagian yang terkunci dan berubah selagi kamu menggulir, atau penghitung yang angkanya naik, membeku dalam keadaan pada momen itu.

Tergantung cara halaman dibangun, keadaan itu salah satu dari tiga:

Selesai, yang terlihat baik tetapi statis.
Belum dimulai, yang menyisakan celah kosong di tempat seharusnya ada bagian, karena elemen yang menunggu untuk muncul masih tidak terlihat.
Setengah jalan, tertangkap di tengah memudar atau bergeser, yang terlihat rusak.

Pilihanmu

Cara merekam animasi gulir
Pendekatan	Animasi	Guliran	Kecepatan
Geser gambar diam, kemunculan dituntaskan	Ditampilkan dalam keadaan akhirnya	Dihitung, rata sempurna	Cepat
Perekaman langsung di setiap posisi guliran	Berjalan seperti yang dilihat pengunjung	Dihitung, terkunci per bingkai	Jauh lebih lambat
Rekam layar dengan skrip penggulir	Berjalan secara real time	Serata yang dimungkinkan komputermu	Real time, ditambah penyuntingan

Jalan cepat: tuntaskan dulu animasinya

Jika animasinya hanya kemunculan, yaitu efek memudar dan bergeser yang membawa konten ke tempatnya, halaman biasanya terlihat benar dalam keadaan akhirnya. Di Website Scroll Video, itulah sakelar “Tuntaskan animasi”, dipakai bersama mesin Geser statis yang cepat. Animasi kemunculan dijalankan sampai selesai sebelum halaman dibaca, jadi tidak ada yang tertangkap tak terlihat atau setengah jalan, dan guliran tetap semulus dan secepat render lainnya.

Jalan setia: rekam secara langsung

Jika gerakannya yang utama, seperti di sebagian besar template Framer dan Webflow, situs agensi, dan peluncuran produk, ganti mesin ke Perekaman langsung. Alih-alih menggeser satu gambar, mesin ini menggulir browser sungguhan ke setiap posisi dan mengambil tangkapan layar di sana, sehingga kemunculan, parallax, bagian yang terkunci, dan transformasi yang terkait guliran semuanya berjalan di video persis seperti di halamannya.

Guliran tetap dihitung, jadi serata Geser statis dan terkunci di 24, 30, atau 60 fps.
Jeda, hover, bingkai, dan latar semuanya bisa dipakai, persis seperti dengan Geser statis.
Mesin ini menahan browser sungguhan selama seluruh durasi video, karena itulah render-nya jauh lebih lambat dan menambah 13 kredit ke ekspor. Tersedia di setiap akun sejak ekspor pertama, tanpa paket yang perlu dibuka.

Merekamnya sendiri

Untuk halaman yang tidak bisa dijangkau renderer, rekam layar selagi skrip menggulirnya. Panduan gulir otomatis menyediakan skripnya. Dua hal yang perlu diperhatikan:

Situs yang memakai pustaka smooth-scroll, seperti Lenis atau Locomotive Scroll, sering menggerakkan animasinya dari pustaka itu, bukan dari guliran browser. Skrip yang memanggil window.scrollTo bisa melompatinya. Gulir dengan cara yang diharapkan situs, atau rekam dengan pustaka itu dimatikan dan terima perbedaannya.
Halaman yang penuh animasi adalah yang paling mungkin kehilangan bingkai saat direkam. Tutup semua yang lain, rekam pada 60 fps, dan lihat mengatasi rekaman guliran yang tersendat jika rekamannya masih tersendat.

Coba di situsmu sendiri

Tempel tautan dan lihat pratinjau guliran secara gratis. 51 kredit gratis saat mendaftar, tanpa kartu, dan tanpa watermark di apa pun yang kamu ekspor.

Pertanyaan,
terjawab

Jawaban singkat untuk hal yang biasanya ditanyakan berikutnya.

Kontak

Kenapa ada bagian yang kosong di video gulir website saya?

Itu elemen yang menunggu animasi kemunculan yang dipicu guliran, tetapi animasinya tidak pernah berjalan, karena alatnya merekam gambar diam dari halaman. Tuntaskan animasinya sebelum merekam, atau pakai mesin perekaman langsung yang menggulir halaman sungguhan.

Bisakah saya merekam efek gulir parallax?

Bisa, dengan metode yang benar-benar menggulir halaman: rekaman layar yang digerakkan skrip, atau renderer yang merekam di setiap posisi guliran, seperti Perekaman langsung di Website Scroll Video.

Apakah Perekaman langsung dikenai biaya tambahan?

Perekaman langsung menambah 13 kredit ke ekspor, karena browser sungguhan harus tetap berjalan selama seluruh durasi video. Selain itu, harganya sama.

Lebih sedikit waktu merekam. Lebih banyak waktu berkarya.

Otomatiskan perekaman situs dengan gerak yang bisa disesuaikan, kendali yang cerdas, dan pilihan ekspor yang dirancang untuk kreator masa kini.

Coba sekarang