內容簡介
### 網站開啟時顯示開場動畫的 WordPress 外掛總結：
- 外掛包含三種不同的開場動畫效果，分為三個區塊，使用者可以選擇喜歡的動畫效果。
- 所有區塊都有取消顯示動畫的功能，但需要安裝並啟用 BLOCK COLLECTIONS 外掛才能使用此功能。
- 安裝外掛後，將註冊以下三個區塊，可在區塊編輯器或網站編輯器中使用（確認與 WordPress 6.4.3 版本相容）。
### 問題與答案
1. 這個外掛的主要功能是什麼？
- 提供網站開啟時顯示開場動畫效果。
2. 使用者可以選擇幾種不同的開場動畫效果？
- 使用者可以選擇三種不同的開場動畫效果。
3. 如何取消顯示動畫的功能？
- 安裝並啟用 BLOCK COLLECTIONS 外掛後，使用者可以在每個區塊底部右側找到一個 checkbox，滑鼠移到螢幕右下方時顯示，可用來取消顯示動畫。
4. 使用者可以選擇的字體有哪幾種？
- 使用者可以選擇 EduVICWANTBeginner 和 Roboto 兩種字體。
5. Logo Anime 區塊使用了什麼外掛來生成 SVG 檔案？
- Logo Anime 區塊使用了一個名為 opentype.js 的外掛來從字體中生成 SVG 檔案的路徑。
外掛標籤
開發者團隊
原文外掛簡介
This is a block that displays an opening animation when a website opens. There are three types of animations, divided into three blocks, and you can select your favorite animation.
All blocks have a feature that allows viewers to choose not to display animations again. However, to use this feature, the BLOCK COLLECTIONS plugin must be installed and enabled.
If you download the zip file and install the plugin from the WordPress management screen, it will function as a plugin.
When you install this plugin, the following three blocks will be registered, and you can use them in the block editor or site editor (confirmed to work with WordPress 6.4.3).
Below is an overview of the functions of each block.
1. Logo Anime
Converts a string to an SVG file and creates an animation that traces its surroundings. The string can be set freely. There are two fonts to choose from: EduVICWANTBeginner and Roboto.
2.Tea Time
Produces an animation that plays the set character string as a caption. The string can be set freely. The caption rises like steam from the cup and disappears. The length of this animation is adjustable.
3.Welcome
We will create an animation in which a pen draws the word “Welcome”. In this version, the string is fixed to “Welcome”.
You can select the ending animation from the following five options.
1. Vertical slide
2. Horizontal slide
3. Vertical opening
4. Lateral opening
5. Circular expansion
The opening animation will be created by combining these animations with the animations of each block.
Please see the screenshot to see what the specific animation looks like.
In each block, there is a checkbox located at the bottom right of the screen that allows the viewer to choose not to display the animation next time. This checkbox is always displayed while the animation is running, but it disappears after the animation ends and appears when the user moves the mouse cursor to the bottom right of the screen.
Related Links
Github
source code
block-class-package:GitHub
block-class-package:Packagist
itmar-block-packages:npm
itmar-block-packages:GitHub
Arbitrary section
Logo Anime Block uses a plugin called opentype.js to generate the path of the svg file from the font type. The source code and terms of use are posted here.
All blocks has a switch function that prevents the opening animation from being displayed, but for this to work the BLOCK COLLECTIONS plugin must be installed and enabled.
The blocks provided by this plugin can be placed one block per web page. Even if you try to place multiple blocks, an error message will appear and you will not be able to place them.
However, it is possible to place it on web pages other than the top page, so multiple blocks can be placed on the entire website.
PHP class management is now done using Composer.
GitHub
Packagist
I decided to make functions and components common to other plugins into npm packages, and install and use them from npm.
npm
GitHub
