ScrollingMockup.io 只要五分鐘就能製作漂亮、捲動網頁效果的模型影片

如果有在關注免費資源網路社群的文章，可能會注意到有不少文章會使用帶有電腦或手機螢幕畫面做為首圖，這不是由我拍攝，而是透過各種模型工具（Mockups）產生器製作而成，只要預先選擇要使用的素材，再加上網址或擷圖就能線上將它們整合在一起，舉例來說，Mockup Photos 就收錄數千張高畫質素材，使用者也可以自行上傳相片整合；或是以前我經常使用 Smartmockups 也能製作出以假亂真的好看模型照，對於要展示畫面來說也更有質感。

本文要推薦「ScrollingMockup.io」是一個製作模型影片（Mockup videos）的工具，不同於前面提到的模型工具只能套用相片，這項服務可以做出捲動特定網頁效果影片，同時整合預先選擇好的圖庫素材中，看起來就像真的在捲動網頁。

如果要看範例，可以直接拖曳到本文章最後，我有製作了一個範例影片。

使用者在 ScrollingMockup.io 除了設定要擷取錄製的頁面網址，也能選擇要錄製的長度、一開始的暫停時間，製作後產生為 .mp4 影片格式免費下載。要注意的是免費方案每個月只能免費製作三段影片，付費升級可以提高配額，亦或是加入自己的背景音樂，價格最低每月 $3.99 美金。

ScrollingMockup.io
https://scrollingmockup.io/

使用教學

STEP 1

開啟 ScrollingMockup.io 網站建議先點選右上角「Get started for free」免費註冊帳號，註冊時輸入 Email、設定一組密碼就能完成。

STEP 2

接著從「Templates」選擇要使用的模型圖庫，不過目前的素材還不多，有 iMac 和 MacBook 分別在不同樣式背景的效果。

STEP 3

選擇要使用的素材後，在設定頁面第一個欄位填入要擷取錄製的網站網址，免費版無法上傳自己的背景音樂，這項功能需要升級才能使用，接著設定一下影片長度（預設 15 秒）和一開始的暫停時間（預設 2 秒），也就是從第三秒才會開始捲動網頁。

STEP 4

設定完點選「Generate My Scrolling Mockup!」開始處理，ScrollingMockup.io 會在影片製作完成後以 Email 通知使用者，在此之前可以先離開網站，不過處理時間也不會太長，大概幾分鐘左右就會收到通知。

完成後回到 ScrollingMockup.io 點選後方的「Mockup」即可下載、獲取 MP4 影片。

STEP 5

下圖就是我以 ScrollingMockup.io 製作出來的模型影片，讀者可以稍微瀏覽一下看看是不是自己需要的效果，如果喜歡，透過這項服務就能做到，完全不用額外安裝軟體，非常好玩！