內容簡介
當頁面中的特定元素進入視口時，它會將 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 技能，也不會浪費時間。
外掛標籤
開發者團隊
② 後台搜尋「Change class in viewport: create animations with pure 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.
