[WordPress] 外掛分享: Animate In View

首頁外掛目錄 › Animate In View
1,000+
安裝啟用
★★★★
4.5/5 分(2 則評價)
41 天前
最後更新
問題解決
WordPress 5.9+ PHP 7.0+ v1.2.2 上架:2022-04-25

內容簡介

Animate In View 外掛提供一種快速且簡單的原生技術,能夠在內容進入使用者視野時觸發平滑的動畫效果,讓網站內容更具吸引力。

【主要功能】
• 輕量且快速,專注於單一功能
• 設定動畫觸發的閾值
• 支援一次或每次進出視野時動畫觸發
• 可選擇從左、右進場或僅淡入
• 自訂動畫類別名稱以添加自定義動畫

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.2.2) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Animate In View」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

Using a fast, simple, native technique, the Animate In View block will watch over inner blocks you add within it and when they come into the user’s view, it will simply fade and optionally slide in.
Trigger simple, smooth, modern animations as the content enters the screen.

Follow @kevinbatdorf on Twitter
View on GitHub

Features

Both lightweight and fast, and only does one thing.
Set a threshold for when the block starts to animate.
Run only once, or each time it comes in/out of view.
Wrap any existing block with the Animate In block with the push of a button.
Transition in left, right, or neither (fade only).
Fade only mode: Set the starting position to “none”
Change the class name used to add your own custom animations.

General Tips & Tricks

You can wrap the currently selected block with an Animate In View block by pressing the icon toward the end of the toolbar.
You may need to place the block within a group block to ensure content styling is consistent. Some themes may require a group block be at the top level. Alternatively, the Animate In View block has alignment controls enabled just in case.
You may need to tweak things if your layouts have custom classes or styles applied. Try copy/pasting the classes, or try to nest the blocks in a way that doesn’t affect the theme styling.
Nest blocks to stagger animations. The animations won’t start until all are in view, then one by one. But make sure you don’t use an area too large for the viewport.
The Animate In View block comes with a single nested group block by default, but you may use others as well.
Use the list view to drag and drop blocks into the Animate In View block.
Open an issue if you need an assist. I’m happy to take a look.

延伸相關外掛

文章
Filter
Mastodon