[WordPress] 外掛分享： Change class in viewport: create animations with pure CSS

前言介紹

  • 這款 WordPress 外掛「Change class in viewport: create animations with pure CSS」是 2021-07-25 上架。
  • 目前有 60 個安裝啟用數。
  • 上一次更新是 2025-04-18，距離現在已有 16 天。
  • 外掛最低要求 WordPress 4.6 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
  • 有 1 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

giuse |

外掛標籤

animations | css effects |

內容簡介

當頁面中的特定元素進入視口時，它會將 CSS 類別「in-viewport」加入該元素。

當同一元素移出視口時，它刪除 CSS 類別「in-viewport」，並添加類別「not-in-viewport」。

要針對這些元素，只需將它們指定 CSS 類別「cciv-el」。

使用一些 CSS 代碼，可以在滾動時添加自定義動畫，非常有用。

這是一個僅使用純 CSS 創建簡單有效動畫的 CSS 開發人員插件。

如果使用者禁用 JavaScript，網頁的 body 將擁有 CSS 類別「cciv-no-script」。當 JavaScript 被禁用時，使用它來避免顯示奇怪的東西。

該插件非常輕盈，只在 footer 添加了幾行純 JavaScript 代碼。

無需額外的 HTTP 請求，也不需要進行額外的數據庫查詢。

如果您測量有無此插件時的性能，您將不會注意到任何差異。

如果：

您知道如何使用純 CSS 創建動畫。
您有啟用要動畫的元素的 CSS 類別。
您可以加入自定義 CSS。

例如，使用以下幾行純 CSS，您可以創建旋轉效果。

.cciv-el{transition: 2s transform ease}
.cciv-el.in-viewport{transform:rotateY(0deg)}
.cciv-el.not-in-viewport{transform:rotateY(180deg)}
.cciv-no-script .cciv-el{transform:none !important}

您可以在 W3Schools 上了解更多關於 CSS 動畫和過渡的資訊：
https://www.w3schools.com/css/css3_animations.asp
https://www.w3schools.com/css/css3_transitions.asp

您可以更改選擇器以便使用過濾器「cciv_el_selector」選擇要動畫的元素。
例如，如果您不想使用 CSS 類別 .cciv-el，而是使用某些特定的元素，在您的子佈景主題中的 functions.php，或在功能型插件中，您可以添加以下程式碼：

add_filter( 'cciv_el_selector','my_cciv_selector' );
function my_cciv_selector( $selector ){
return '#my-custom-id .my-custom-class'; // 元素不再被 .cciv-el 指定，而是使用此處指定的元素選擇器
}

不要再花時間處理繁重的 jQuery 效果，只需要幾行 CSS 代碼，這個插件將使用在 footer 中內置的幾行 100％純 JavaScript 代碼提供其餘功能。

沒有性能損失，如果您具備 CSS 技能，也不會浪費時間。

原文外掛簡介

When a specific element of the page enters the viewport, it adds the CSS class “in-viewport” to that element.
When the same element goes out from the viewport it remove the CSS class “in-viewport” and adds the class “not-in-viewport”.
To target the elements, you just need to assign them the CSS class “cciv-el”.
It’s useful to add your custom animations on scroll just with a few lines of CSS.
This is a plugin for CSS developers who want to add simple but effective animation only with pure CSS.
In case the user disables JavaScript, the body of the page will have the CSS class “cciv-no-script”. Use it to don’t show strange things when JavaScript is disabled.
The plugin is ultra light. It adds a few lines of pure JavaScript code in the footer and nothing else.
No additional HTTP requests, no additional queries to the database.
If you measure the performance with or without this plugin, you will not notice any difference.
This plugin is useful if:

You know how to create an animation in pure CSS.
You have the possibility to assign a CSS class to the element you want to animate.
You have the possibility to add your custom CSS.

With the following few lines of pure CSS for example you can create a rotation effect.
.cciv-el{transition: 2s transform ease}
.cciv-el.in-viewport{transform:rotateY(0deg)}
.cciv-el.not-in-viewport{transform:rotateY(180deg)}
.cciv-no-script .cciv-el{transform:none !important}
You can read more about CSS animations and transitions on W3Schools:
https://www.w3schools.com/css/css3_animations.asp
https://www.w3schools.com/css/css3_transitions.asp
You can change the selector to target the elements that you want to animate using the filter ‘cciv_el_selector’.
If for example instead of the CSS class .cciv-el you want something specific to your case, you can add this code in the functions.php of your child theme if any, or in a functional plugin:
add_filter( 'cciv_el_selector','my_cciv_selector' );
function my_cciv_selector( $selector ){
return '#my-custom-id .my-custom-class'; //The elements will not be target anymore by .cciv-el but by what you specify here
}

Don’t lose time any more with heavy jQuery effects, you need just a few lines of CSS, the rest is given by this plugin using few lines of 100% pure JavaScript inlined in the footer.
No performance loss, and no time loss if you have CSS skills.
Help
If you need help open a thread on the support forum of this plugin.
Please, before posting enable the debugging in wp-config.php. Need a step-by-step guide? Read this detailed tutorial on how to enable debugging in WordPress to learn more.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Change class in viewport: create animations with pure CSS」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

0.0.1 | 0.0.2 | 0.0.3 | 0.0.5 | trunk |

延伸相關外掛（你可能也想知道）

  • Crelly Slider 》Crelly Slider 是一款免費/開源的響應式 WordPress 輪播外掛，支援圖層。使用強大的拖放式建構器，您可以添加文字、圖片、YouTube/Vimeo 影片，並為每個元素...。
  • LottieFiles – Lottie block for Gutenberg 》LottieFiles for WordPress 提供您超過 50,000 個免費的 Lottie 動畫，您可以輕鬆地在您的網站上嵌入這些動畫。添加動畫快速簡單：只需要將您選擇的動畫拖放...。
  • Lottie Player- Great Lottie Player Solution 》Lottie Player 是 WordPress 的 Gutenberg 區塊編輯器中一個非常有用的區塊外掛程式，其中包含了許多功能，可以幫助您將 LottieFiles 動畫嵌入到 WordPress ...。
  • Animentor – Lottie & Bodymovin for Elementor 》這是一個非官方的 WordPress 外掛，可在 Elementor 頁面建構器 中增加 Lottie 小工具。, 特點, , 直觀的使用者介面，所有內容皆可透過小工具控制項直接於 Ele...。
  • Image Hover Effects For WPBakery Page Builder 》圖像懸停效果 - WPBakery Page Builder 是一個令人驚嘆的外掛程式，可讓用戶在圖像上添加40多種帶標題的懸停效果。此附加元件為 Visual Composer 添加了20個...。
  • Easy Textillate 》這個外掛允許你在文章、頁面或網站元件中使用shortcode向任何文字添加動畫，你也可以使用PHP代碼直接將文字動畫添加到主題檔案中。, 這個外掛完全利用了Texti...。
  • Dynamic Animations for Elementor 》這是一個 Elementor 的外掛程式，因此在啟用插件之前必須先安裝免費的 Elementor。, 對於每個小工具，您可以設置許多高級且令人難以置信的效果和動畫。, 查看...。
  • Rescue Shortcodes 》啟用此外掛後，將新增一個按鈕到 WordPress 文字編輯器，以方便地插入文章或頁面中的短代碼。, 包含以下短代碼：, , 按鈕 – 包括無限顏色和圖示等眾多...。
  • Page Transition 》Page Transition 是一個簡單易用的 WordPress 外掛程式，可使用 CSS3 動畫效果添加頁面轉換。讓您的網頁展現現代化的動畫效果。, 您可以為頁面進入和離開時分...。
  • Animate Blocks 》當 Gutenberg 專案中的區塊進入檢視範圍時，可啟用動畫效果。, , 可與所有現有的 Gutenberg 區塊共同運作, 提供 27 種不同的動畫效果選擇, 可使用自定義延遲...。
  • MotionMagic 》- MotionMagic 是一個 WordPress 外掛程式，增強了 Gutenberg 編輯器的功能。, - 可以讓任何區塊添加 CSS 動畫效果，例如滾動、懸停和點擊。, - 完全兼容任何...。
  • tsParticles WP Block 》官方 tsParticles WordPress Plugin, 輕鬆地創建高度可定制的粒子、煙花和碎屑動畫，並將它們用作網站的動態背景。, 現已提供給 Web 構件、Vue.js (2.x 和 3....。
  • imaGenius 》使用這個簡碼，你可以輕鬆地為你的文章或頁面添加華麗的圖片。, , 英語/義大利語演示, 英語/義大利語文檔, WordPress義大利語Google+社群, 這個簡碼由三個主...。
  • Animate WP 》只需安裝和啟用即可。此外掛附帶了104種純CSS動畫效果。, 啟用此外掛後，您可以點擊「WP Animate Settings」以獲取所有類名，並將其複製並粘貼到您的元素中。...。
  • AKDev Spline animation – Delight your users experience with 3d scroll animations. 》**總結文案:**, , 這是一個新的 WordPress Gutenberg 外掛：AKDev Spline 動畫！告別乏味的網站，迎接交互式的 3D 魔法。藉由這個外掛，您可以輕鬆地添加令人...。

文章
Filter
Apply Filters
Close
Mastodon