內容簡介
使用快速、簡單、本地化技術,Animate In View 區塊會監視您在其中添加的內部區塊,當它們進入使用者的視野時,它會簡單地淡入淡出,並可選擇性地滑出。
當內容進入螢幕時啟動簡單、流暢、現代動畫效果。
在 Twitter 上關注 @kevinbatdorf
在 GitHub 上查看
功能
輕量且高速,只執行一項功能。
設定區塊開始動畫的閾值。
僅在區塊進入/離開視野時執行一次或多次。
透過按一下按鈕,可將任何現有區塊包裝到 Animate In 區塊中。
延伸左、右或不延伸(僅淡入淡出)的過渡。
更改用於添加自訂動畫的類別名稱。
常見提示與技巧
您可以透過在工具列末端按下圖示,以 Animate In View 區塊包裝目前選取的區塊。
您可能需要將區塊置於群組區塊中,以確保內容樣式一致。某些佈景主題可能要求群組區塊位於頂級。或者,Animate In View 區塊已啟用對齊控制。
如果您的版面有套用自訂類別或樣式,您可能需要微調一些東西。嘗試複製/貼上類別,或以不影響佈景主題樣式的方式巢狀排列區塊。
巢狀排列區塊以逐一展示動畫。當所有區塊進入視野時,動畫才會開始,一個接一個。但請確定不要使用面積過大的區塊,以符合視窗大小。
Animate In View 區塊預設會帶有單一嵌套群組區塊,但您也可使用其他區塊。
使用清單檢視以拖放區塊至 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.
