Parallax Overview - Google Web Designer
-
0:05 - 0:09大家好，我是 Google Web Designer
開發人員 Nivesh -
0:09 - 0:11這部影片會大致介紹
-
0:11 - 0:13如何使用視差元件建立視差動畫
-
0:13 - 0:14如何使用視差元件建立視差動畫
-
0:15 - 0:17把頁面往上或往下捲動時
-
0:17 - 0:18前景和背景圖片的移動速度不同
可創造出深度錯覺 -
0:18 - 0:22前景和背景圖片的移動速度不同
可創造出深度錯覺 -
0:23 - 0:26視差元件是靠廣告發佈商的網站
將網頁捲動事件呈現為廣告 -
0:26 - 0:29視差元件是靠廣告發佈商的網站
將網頁捲動事件呈現為廣告 -
0:29 - 0:30視差元件會因應捲動事件
創造出圖片動畫 -
0:30 - 0:33視差元件會因應捲動事件
創造出圖片動畫 -
0:33 - 0:37如想查看其他視差動畫範例
-
0:37 - 0:39可依序點選 [檔案] > [從範本新增...]
-
0:41 - 0:45然後選取 [Display & Video 360 視差] 類別
-
0:48 - 0:52這裡會顯示
視差範例在瀏覽器中的樣子 -
0:56 - 0:58捲動頁面時
可看到這些圖片會水平和垂直移動 -
0:58 - 1:02捲動頁面時
可看到這些圖片會水平和垂直移動 -
1:05 - 1:08接著來建立視差動畫吧！
-
1:09 - 1:12依序點選 [檔案] > [新增]
-
1:16 - 1:20視差元件的環境必須為
Display & Video 360 -
1:24 - 1:27如要在專案中新增視差元件
-
1:27 - 1:28請開啟「元件」面板
-
1:30 - 1:32然後從互動資料夾中
將視差元件拖曳至中心區域 -
1:32 - 1:35然後從互動資料夾中
將視差元件拖曳至中心區域 -
1:39 - 1:41如要設定視差元件
-
1:41 - 1:42請前往「屬性」面板
-
1:43 - 1:46然後點選圖片控制項
-
1:46 - 1:49或者在元件上按兩下
-
1:50 - 1:54首先，為視差動畫加入圖片
-
1:54 - 1:56新增圖片的方法
是從檔案系統將檔案拖曳至中心區域 -
1:56 - 2:00新增圖片的方法
是從檔案系統將檔案拖曳至中心區域 -
2:00 - 2:01或「圖層」面板
-
2:05 - 2:08你也可以點選「圖層」面板上的
加號按鈕 -
2:08 - 2:11然後從檔案系統新增圖片
-
2:15 - 2:17如要為圖層重新排序
-
2:17 - 2:20可將圖層拖曳至「圖層」面板
-
2:21 - 2:25圖層的順序會決定顯示的前後位置
-
2:25 - 2:29排序較高的圖層會顯示在
較低圖層的前面 -
2:31 - 2:33你也可以選擇顯示或隱藏圖片
-
2:33 - 2:35做法是按一下縮圖區域
-
2:36 - 2:38點選眼睛圖示
-
2:38 - 2:40也能顯示或隱藏圖片
-
2:41 - 2:44隱藏部分圖層可讓調整其他圖層更容易
-
2:44 - 2:46這裡我要隱藏所有圖層
-
2:46 - 2:52只留下產品、文字和這片大葉子
-
2:53 - 2:56「設定」對話方塊有三個分頁
-
2:56 - 2:58「起始」、「結束」和「預覽」
-
2:58 - 3:00如要設定視差動畫
-
3:00 - 3:03請將各圖層放到要顯示的
動畫起始和結束位置 -
3:03 - 3:05請將各圖層放到要顯示的
動畫起始和結束位置 -
3:05 - 3:09起始位置是指元件在網頁中
首次出現的位置 -
3:12 - 3:15就是這裡，元件首次出現的部分
-
3:15 - 3:18結束位置則是指
元件離開檢視點的地方 -
3:18 - 3:23結束位置則是指
元件離開檢視點的地方 -
3:25 - 3:27首先，設定起始位置
-
3:29 - 3:31我要再次隱藏這片大葉子
-
3:31 - 3:36然後用滑鼠把產品移到中央
-
3:36 - 3:38我也可以用方向鍵移動
-
3:39 - 3:40按住 Shift 鍵
-
3:40 - 3:42就能一次移動 10 個像素
-
3:43 - 3:47或者直接在「圖層屬性」面板
輸入位置也可以 -
3:51 - 3:55如果想快速將起始位置的值
複製到結束位置 -
3:55 - 3:59請點選複製位置值按鈕
-
4:05 - 4:09讓我來調整一下大葉子的
起始和結束位置 -
4:16 - 4:20拖曳滑鼠時如果按住 Shift 鍵
可固定移動方向 -
4:20 - 4:21拖曳滑鼠時如果按住 Shift 鍵
可固定移動方向 -
4:21 - 4:24我要把葉子移到結束位置的另一端
-
4:26 - 4:31我還可以開啟「進階屬性」面板中的
[顯示幽靈圖層] 選項 -
4:32 - 4:35這樣畫面上就會以半透明的方式
顯示其他非編輯中分頁的圖片 -
4:35 - 4:38這樣畫面上就會以半透明的方式
顯示其他非編輯中分頁的圖片 -
4:39 - 4:40幽靈圖層只用做參考
-
4:40 - 4:42不會顯示在預覽或已發佈檔案中
-
4:44 - 4:45現在我們來預覽
-
4:54 - 4:55你可以上下捲動
-
4:55 - 4:59查看可見圖層在行動裝置範本中的表現
-
4:59 - 5:03點選 [起始] 或 [結束] 分頁標籤
就能繼續編輯檔案 -
5:03 - 5:08這裡我要把加/減速選項
變更為 [先加速後減速] -
5:08 - 5:13並讓文字從 0.3 淡出為 1
-
5:14 - 5:16然後再次預覽
-
5:23 - 5:25你也可以設定圖層的寬度及高度
-
5:25 - 5:29我要把葉子的寬度改為 250 像素
-
5:31 - 5:33這裡的長寬比已鎖定
-
5:33 - 5:35所以高度會自動更新
-
5:37 - 5:38請注意，圖層在起始和結束位置
都會維持在指定大小 -
5:38 - 5:41請注意，圖層在起始和結束位置
都會維持在指定大小 -
5:41 - 5:44亦即動畫裡的尺寸不會變化
-
5:45 - 5:47完成元件設定後
-
5:47 - 5:48點選 [儲存]
-
5:48 - 5:51就可回到平常的
Google Web Designer 介面 -
5:51 - 5:55為了節省時間
我直接回到已設好所有動畫的範本檔案 -
5:55 - 5:57為了節省時間
我直接回到已設好所有動畫的範本檔案 -
5:57 - 6:00接著前往「屬性」面板的 [捲動係數] 部分
-
6:00 - 6:02接著前往「屬性」面板的 [捲動係數] 部分
-
6:03 - 6:08捲動係數屬性僅限用於
Google Web Designer 中心區域的顯示畫面 -
6:08 - 6:11調整這個值
就能看到廣告以不同捲動係數呈現的樣貌 -
6:11 - 6:13調整這個值
就能看到廣告以不同捲動係數呈現的樣貌 -
6:14 - 6:17你也可以在瀏覽器中預覽廣告
-
6:19 - 6:20在瀏覽器中預覽時
-
6:20 - 6:23預覽頁面會模擬
廣告在網頁上的顯示方式 -
6:23 - 6:27同時提供足夠內容
讓你能捲動到元件上方及下方 -
6:31 - 6:35你可以在有行動號召按鈕和結束動作等
完整廣告內容的情況下 -
6:35 - 6:37你可以在有行動號召按鈕和結束動作等
完整廣告內容的情況下 -
6:37 - 6:39查看視差動畫如何呈現
-
6:39 - 6:41感謝觀賞
|
Amara Bot edited Chinese, Traditional subtitles for Parallax Overview - Google Web Designer |