• 主頁
  • 文章
  • 科技類
  • 如何使用運動效果為圖像製作動畫（旋轉、縮放、滾動和透明度）

如何使用運動效果為圖像製作動畫（旋轉、縮放、滾動和透明度）

已發表: 2019-05-06

在我們的 Motion Effects 教程之後收到了巨大的積極響應之後，我們決定將它們收集到一篇文章中，以幫助您非常輕鬆地製作更多交互式網站。

我們將涵蓋：

  • 旋轉、水平和縮放效果
  • 圖像透明效果
  • 旋轉和縮放圖像
  • 獎勵技巧：動畫文本重疊效果

所以讓我們開始吧……

圖像動畫：旋轉、水平滾動、垂直滾動和縮放

在本視頻中，您將學習如何向 Elementor 設計添加滾動效果，使圖像看起來好像在訪客向下滾動頁面時正在擺動、滑動、浮動或前進。

1. 圖像旋轉：使圖像擺動

要使圖像擺動，請單擊“高級”選項卡，打開“運動效果”部分，然後打開“滾動效果” 。

然後，單擊旋轉選項並選擇旋轉圖像的方向。

為了使動畫流暢，還將速度滑塊設置為1 。

最後，您可以將視口設置為默認值 - 0% 和 100%：

how-to-add-scrolling-effects-to-your-website
最後，將Y 錨點設置為頂部，使您的圖像從頂部“擺動”。

2. 圖像水平滾動：如何製作圖像幻燈片

要製作圖像幻燈片，請像在上一節中一樣打開滾動效果。 然後，打開水平滾動並：
  • 選擇您希望圖像滑動的方向
  • 將速度設置為10
how-to-add-scrolling-effects-to-your-website-2

就是這樣！ 當訪問者向下滾動頁面時，您的圖像將滑動。

3. 圖像垂直滾動：如何使圖像浮動

要使圖像浮動，請啟用滾動效果。 然後，啟用垂直滾動並將方向設置為向下

how-to-add-scrolling-effects-to-your-website-3
就是這樣！ 您可以將其他設置保留為默認值。

4. 圖像比例：如何創建圖像縮放

使用最後一個，當訪問者向下滾動時，它看起來好像圖像正在向訪問者移動。 另一種思考方式是圖像“下沉”。

首先，打開滾動效果。 然後，啟用垂直滾動並：

  • 將方向設置為向下
  • 將視口設置在0%到40% 之間
how-to-add-scrolling-effects-to-your-website-4

然後，單擊Scale選項並將Speed設置為6 。 此外，使用視口設置使底部20%和頂部80%。

就是這樣。

既然您知道如何使用滾動效果，請嘗試使用您自己的設計來創建一些很棒的東西！

圖像透明度：使圖像和背景在滾動時消失

在本視頻中，您將學習如何使用視口設置在訪問者瀏覽您的網站時創建酷炫的運動效果。 您可以對背景和部分以及各個小部件應用運動效果，這為您創建的效果類型提供了很大的靈活性。 開始：
  • 選擇圖片
  • 轉到高級選項卡
  • 找到運動效果部分
  • 打開滾動效果
然後，啟用水平滾動使您的圖像在用戶向下滾動頁面時從左向右移動。 您還可以調整速度設置，使運動更快或更慢：
how-to-use-motion-effects-viewport-settings-1

接下來，讓我們深入研究視口選項，看看它是如何工作的。

首先，定義術語很重要——訪問者的視口是用戶設備屏幕的可見大小。

視口選項讓您可以根據訪問者的視口選擇何時開始和停止您選擇的滾動效果：

例如，如果您將視口的底部設置為 0%，將頂部設置為 100%，則圖像將在訪問者視口底部可見時立即開始移動。 更重要的是，當圖像位於訪問者視口的中間（或 50% ）時，圖像將到達其“原始”位置，並且將繼續移動直到到達頂部（100%）。

所以這裡是整個效果的詳細信息：

  • 當圖像第一次出現在訪問者的視口中時，圖像將從原始位置的左側開始（訪問者的視口在 0% 處）
  • 它將到​​達訪問者視口中間的原始位置（訪問者視口為 50% ）
  • 當訪問者不斷滾動時，它將繼續滑動到其原始位置的右側（直到達到 100%）
how-to-use-motion-effects-viewport-settings-2

另一方面，如果將視口底部設置為 50%，將頂部設置為 100%：

  • 圖像將從其原始位置開始。
  • 一旦圖像位於訪問者視口的中間 (50%)，它將開始向右移動，直到圖像到達訪問者視口的頂部 (100%)。

讓我們看看另一種類型的滾動效果，以了解視口的工作原理......

透明效果示例

對於此示例，打開透明度選項並：
  • 將方向設置為淡入
  • 將級別設置為10 （這使圖像開始時非常透明）
如果您將底部視口設置為 0%，將頂部設置為 100%，則圖像在第一次出現在訪問者視口 (0%) 的底部時將是透明的。 隨著圖像向上移動，它會變得不那麼透明，當它到達訪問者視口的頂部 (100%) 時，最終會恢復到原來的外觀。 如果你想扭轉這種情況，你可以選擇Fade Out 。 然後，圖像將首先顯示為正常，並隨著訪問者向下滾動而增加透明度。 最後，另一個選項是Fade Out In 。 有了這個，圖像將淡出開始，然後隨著訪問者不斷滾動而再次出現。 如果您使用Fade Out In將底部視口設置為 40%，將頂部視口設置為 60%，則：
  • 圖像將從 0% 淡出到 40%
  • 它會在 40% 到 60% 之間保持淡出
  • 一旦達到 60%，它將在 60% 和 100% 之間再次開始淡入
how-to-use-motion-effects-viewport-settings-3

現在您知道視口設置的工作原理，您可以嘗試使用不同的設置來找到您喜歡的效果。

在旋轉和縮放效果中使用 X 和 Y 錨點

在本視頻中，您將了解 Elementor運動效果中旋轉和縮放效果的X和Y錨點。

最後，您將知道如何應用這些設置在您的站點上創建一些很酷的運動效果。

首先，選擇要添加效果的圖像，然後：

  • 轉到高級選項卡
  • 找到運動效果設置
  • 打開滾動效果
how-to-use-x-and-y-motion-effects

旋轉效果中的錨點

讓我們從旋轉效果開始。 單擊旋轉效果旁邊的鉛筆圖標將其打開 - 您可以將設置保留為默認值。 然後，查找下面顯示的X 錨點和Y 錨點設置。 X 和 Y 錨點確定圖像旋轉的軸。 默認情況下，兩者都設置為Center ，這意味著圖像將旋轉，就好像圖像中心有一個“大頭針”一樣。 但是，更改 X 和/或 Y 錨點會導致不同的旋轉效果。 例如，如果將X 錨點設置在左側，將Y 錨點設置在頂部，圖像將像這樣圍繞左上角旋轉：
how-to-use-x-and-y-motion-effects-2
或者，如果設置X錨點中心，和Y錨點到頂部時，圖像會旋轉，就像它是一幅畫，你掛在頂部。 明白了嗎？ 讓我們再看一個。 如果您將X 錨點更改為右側，現在圖像將開始旋轉，就好像它被固定在右上角一樣。 讓我們總結一下。 X 錨點確定圖像在 x 軸上旋轉的位置：
how-to-use-x-and-y-motion-effects-5
Y 錨點對垂直方向也做同樣的事情：
how-to-use-x-and-y-motion-effects-6

比例效應中的錨點

現在您了解了基本概念，讓我們看看這個相同的想法如何與Scale效果一起使用。

首先，禁用旋轉效果，打開縮放效果，然後：

  • 設置向上擴展的方向
  • 將速度設置為-5

默認情況下， X 錨點和Y 錨點都設置為Center ，這意味著圖像向圖像小部件的中心縮小。

另一方面，如果您將錨點設置為Left和Top ，則圖像將向左上角縮小。

這與旋轉效果完全相同。

既然您知道 X 和 Y 錨點的工作原理，請繼續使用這些設置來創建您想要的確切效果。

獎勵技巧：動畫文本重疊效果

在本視頻中，您將學習如何使用 Elementor Motion Effects 中的水平滾動功能在您的網站上創建簡潔的動畫文本效果。

當訪問者滾動時，您將能夠在頁面上移動文本。 通過一些調整，您甚至可以讓文本在移動時改變顏色。

在本例中，我們將介紹如何創建多個動畫標題：

  • 一個簡單的灰色標題，向右移動並保持相同的顏色
  • 向左移動的白色和粉紅色標題，一旦穿過粉紅色背景，就會從白色變為粉紅色
animated-text-effect-1

創建第一個標題 - Just Motion

讓我們從純灰色標題開始。

選擇標題，然後：

  • 轉到高級選項卡
  • 找到運動效果部分
  • 打開滾動效果

然後，單擊水平滾動效果旁邊的鉛筆以輸入其設置：

  • 將方向更改為您希望文本滾動的方向（在我們的示例中為“向右”）
  • 將速度和視口設置保留為默認值

就是這樣！ 當訪問者向下滾動頁面時，您的標題將向右滑動。

創建第二個標題 - 運動和顏色變化

現在，讓我們更高級一點，讓標題隨著移動而改變顏色。 這個過程包括：
  • 創建重複的內部部分
  • 使用溢出：隱藏選項隱藏其中一個部分的標題，一旦它超出內部部分
首先，向要放置標題的部分添加一個新的內部部分小部件，然後刪除左列。 然後，將最小高度設置為 450 像素：
animated-text-effect-2
然後，轉到樣式選項卡並將背景顏色設置為粉紅色。 最後，轉到“高級”選項卡並將左填充設置為 33%。 接下來，添加標題小部件並根據您的喜好設置樣式。 你應該在內部部分有這樣的標題：
animated-text-effect-3

現在，編輯標題小部件並在高級選項卡中打開滾動效果。 然後，啟用水平滾動設置並將選項保留為默認值。

現在，您的標題將向左移動，但還不會改變顏色。 即使在白色背景上，您也可以看到它仍然是白色的。

讓我們解決這個問題……

接下來，複製內部部分。 現在，您將擁有兩個相同的內部部分和標題。 您可以使用導航器重命名這些部分以幫助您記住哪個是哪個：

animated-text-effect-5
現在，轉到底部內部部分（重複部分）並將其背景顏色更改為白色。 您還需要將標題顏色更改為與原始內部部分中的背景顏色相同的顏色。 然後，將 450 px 的負上邊距添加到底部內部部分。 現在，底部（重複）內部部分應該出現在原始內部部分的“頂部”。 為了解決這個問題，設置Z指數為重複的部分為1，設置Z指數為原節2。 接下來，您需要確保當它移動到內部部分的寬度之外時只顯示粉紅色的標題。 您可以在下面看到我們想要的示例：
animated-text-effect-6

要實現此效果，請轉到原始內部部分的設置。 在Layout選項卡中，找到Overflow選項並將其設置為Hidden 。

就是這樣！ 現在，一旦它滾動經過內部部分，只會出現重複部分的標題，這會創建整潔的變色文本效果。