フェードイン、出現アニメーション、パララックス、固定されるセクションは、ページが実際にスクロールしているときにしか起きません。それを動画に収める方法と、ページ全体をキャプチャするツールの多くがそれを取りこぼす理由。
Aviral Lakhanpaul 更新5 分で読めます
スクロールアニメーションは、ページが実際にスクロールしているあいだにしか動きません。そのため、ページ全体のスクリーンショット 1 枚の上をパンするツールでは見せられません。スクリプトでページをスクロールさせながら画面録画するか、Website Scroll Video の「ライブ収録」エンジンのように、スクロール位置ごとにページを実際に撮影するレンダラーを使いましょう。動きはなくてもいいから手早く済ませたいなら、収録の前に登場アニメーションを完了した状態まで進めておきます。
URL から動画を作るツールの多くは、2 段階で動きます。まずページの非常に縦長なスクリーンショットを 1 枚撮り、その上でフレームを下へ動かします。速くて完全になめらかですが、スクリーンショットはある一瞬を切り取ったものにすぎません。ビューポートに入るとフェードインする見出し、パララックスの画像、スクロール中に固定されて変化するセクション、カウントアップする数字など、スクロール位置で動くものはすべて、その瞬間の状態で止まってしまいます。
ページの作り方によって、その状態は次の 3 つのどれかになります。
| 方法 | アニメーション | スクロール | 速さ |
|---|---|---|---|
| 登場アニメーションを完了させて静止画をパン | 完了した状態で表示 | 計算で生成、完全に均一 | 速い |
| スクロール位置ごとにライブで収録 | 訪問者が見るとおりに再生 | 計算で生成、フレームレート固定 | かなり遅い |
| スクリプトでスクロールさせて画面録画 | リアルタイムで再生 | パソコンが許す範囲で均一 | リアルタイム＋編集 |
アニメーションが、コンテンツを所定の位置に運ぶフェードやスライドといった登場時のものだけなら、ページはたいてい完了した状態で問題なく見えます。Website Scroll Video では、高速な「静止パン」エンジンと組み合わせて使う「アニメーションを最後まで進める」スイッチがこれに当たります。ページを読み込む前に登場アニメーションを最後まで進めるので、見えないままや途中で止まったまま写るものはなく、スクロールもほかと同じくなめらかで、すばやくレンダリングできます。
多くの Framer や Webflow のテンプレート、制作会社のサイト、製品のローンチのように、動きそのものが見どころなら、エンジンを「ライブ収録」に切り替えます。1 枚の画像の上をパンするのではなく、本物のブラウザを各位置までスクロールさせてその場で撮影するので、出現アニメーション、パララックス、固定されるセクション、スクロールに連動する変形が、ページ上とまったく同じように動画の中で再生されます。
レンダラーが届かないページなら、スクリプトでスクロールさせながら画面録画します。スクリプトは自動スクロールのガイドにあります。注意すべき点は 2 つです。
window.scrollTo を呼ぶスクリプトでは、アニメーションが飛ばされることがあります。サイトが想定しているやり方でスクロールするか、ライブラリを無効にして録画し、違いが出ることは受け入れましょう。リンクを貼れば、スクロールのプレビューは無料です。登録すると 51 クレジットが無料で付き、クレジットカードは不要。書き出した動画にウォーターマークは入りません。
それは、スクロールで発動するはずの登場アニメーションを待ったまま、一度も発動しなかった要素です。ツールがページの静止画を撮ったためです。収録の前にアニメーションを完了させるか、実際のページをスクロールするライブ収録のエンジンを使ってください。
できます。ページを実際にスクロールする方法を使ってください。スクリプトでスクロールさせた画面録画か、Website Scroll Video の「ライブ収録」のように、スクロール位置ごとに撮影するレンダラーです。
動画の長さのあいだずっと本物のブラウザを動かし続けるため、書き出しに 13 クレジットが加算されます。それ以外の料金は変わりません。
