<-- IE錯誤修正 --> RiS社群 | FileMaker 跨平台企業應用 - 瀏覽單個文章 - Scrola 建立自動捲動網站效果的影片,設計網頁或簡報都很好用
瀏覽單個文章
  #1 (permalink)  
舊 2019-01-08
wowria wowria 目前離線
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 Scrola 建立自動捲動網站效果的影片,設計網頁或簡報都很好用

Click the image to open in full size.

儘管有很多可以建立網站擷圖的軟體或網路服務,卻很少有人工具能幫你製作出動態效果的網頁畫面,這是什麼意思呢?簡單來說,就像是使用者實際在瀏覽網頁的感覺,會透過捲動方式慢慢往下瀏覽頁面,將這段過程錄製為影片格式,可以在網頁設計或投影片簡報中作為範例,雖然以螢幕錄影工具可以做到,但免不了需要花點時間編輯後製,還好科技就是用來解決問題,而現在已經有網路服務能幫你製作出網站瀏覽影片。



本文要推薦的「Scrola」就是一款協助使用者建立瀏覽網頁影片的線上工具,它可以在使用者輸入網址後產生瀏覽網頁的影片動畫,還能調整網頁對齊位置、裝置和瀏覽捲動速度,最終製作為 .mp4 影片格式讓使用者下載。

這類工具較少見,從以前到現在我還沒看過相同的服務,不過產生的影片倒是蠻有用,如果你想設計一個動態效果的網站(其實類似效果也有在一些大型網站看過),但又不知道怎麼錄製實際瀏覽網頁的動態影片,Scrola 可以幫助你。要注意的是免費版會有浮水印,但不影響使用,若要獲取無限制容量、無浮水印和匯出 .webm 格式可付費升級 Pro 版。

網站名稱:Scrola
網站鏈結:https://scrola.app/

使用教學

STEP 1

開啟 Scrola 網站,點選 RegisterCreate an Account 註冊建立帳號,註冊時必須填入姓名或公司名稱、Email、密碼,註冊後不用收取驗證信就能立即使用。

Click the image to open in full size.

STEP 2

登入 Scrola 後直接輸入要擷取、製作成影片效果的網頁網址,或是直接上傳一段完整的網頁擷圖,Scrola 一樣可以幫你加入動態瀏覽效果。

Click the image to open in full size.

STEP 3

第一步 Scrola 會詢問你想要的對齊方式,如果沒有太多想法,直接選擇 Screenshot Only 即可,另外還可以選擇將網頁對準在畫面中央或靠近底部。

Click the image to open in full size.

接著選擇你要在製作擷圖時使用的裝置,Scrola 提供行動裝置包括智慧型手機、平板電腦和一般桌面電腦三種,沒有特別需求的話就選擇電腦。

Click the image to open in full size.

因為製作出來的影片會有捲動網頁效果,必須先設定捲動的速度,速度部份分為慢速、中速和快速,我在這裡是選擇「Slow」也就是最慢速度作為測試使用。

Click the image to open in full size.

STEP 4

在進入最後步驟前,Scrola 會先給出一個預覽你的設定效果,看看這樣的速度和對齊方式有沒有符合你的期望,如果不滿意可回到之前的設定頁面調整捲動速度或使用的裝置。

Click the image to open in full size.

一切就緒,Scrola 需要一些時間製作並轉換為適當格式,依照我的經驗,大約幾分鐘時間就會搞定。完成前將滑鼠游標移動到縮圖上方,會顯示 Scrola 正在進行相關程序。

Click the image to open in full size.

STEP 5

完成後點選「Download」就能將 Scrola 製作的瀏覽網頁影片畫面下載為 .mp4 格式,前面有提到免費版在影片右下角會有一個小小的浮水印,不過不影響使用,如果需要更乾淨完整的影片必須付費升級。

Click the image to open in full size.

下方影片就是利用 Scrola 製作出來的範例效果:



值得一試的三個理由:
  1. 輸入網址就能線上產生捲動網頁效果的影片
  2. 可調整頁面捲動速度、裝置和對齊方式
  3. 製作為 .mp4 格式免費下載,移除浮水印需付費
喜歡 Scrola 建立自動捲動網站效果的影片,設計網頁或簡報都很好用 嗎?歡迎將免費資源網路社群加入書籤,以 Facebook、Twitter 或 Google+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章