textillate 是一款基于 jQuery 的 npm 包，用于在网页上创建漂亮的文字动画效果。本文将介绍如何使用 textillate 实现各种文字动画效果，并附带示例代码。
安装和引入
首先，需要安装 textillate 包。可以通过 npm 命令进行安装：
npm install textillate
然后，在 HTML 文件中引入 jQuery 和 textillate 的 JS 和 CSS 文件：
-- -------------------- ---- -------
--------- -----
------
------
----------------- ------------
----- ---------------- ------------------------------------------------------------------------------- --
------- -----------------------------------------------------------
------- -------------------------------------------------------------------------------------------------------
-------
------
---- ------------------ ------------
------- -------------------------
-------
-------注意，除了 textillate 的 JS 和 CSS 文件之外，还需要引入一个叫做 animate.css 的 CSS 文件，这是 textillate 内置的动画库。也可以使用其他的动画库，只需要将其引入即可。
基本用法
通过以下代码，可以实现一个简单的 textillate 动画效果：
$("#mytext").textillate({
in: { effect: "fadeIn" },
out: { effect: "fadeOut" }
});这段代码表示，当 #mytext 元素显示时，使用 fadeIn 动画效果；当隐藏时，使用 fadeOut 动画效果。
更多动画效果
除了 fadeIn 和 fadeOut 之外，textillate 还支持很多其他的动画效果。以下是一些示例：
字母逐个出现
$("#mytext").textillate({
initialDelay: 500, // 初始延迟 0.5 秒
in: {
effect: "fadeInLeftBig",
delay: 50, // 每个字母间隔 50 毫秒
shuffle: true // 随机顺序
}
});单词逐个出现
$("#mytext").textillate({
initialDelay: 500,
in: {
effect: "fadeInRightBig",
delayScale: 1.5, // 延迟时间的缩放因子
delay: 100 // 每个单词间隔 100 毫秒
}
});字母打乱后逐个出现
$("#mytext").textillate({
initialDelay: 500,
in: {
effect: "rollIn",
delay: 50,
shuffle: true // 打乱顺序
}
});字母逐个变形
$("#mytext").textillate({
initialDelay: 500,
in: {
effect: "tada",
delay: 50
}
});自定义动画效果
如果想要创建自定义的动画效果，可以使用 onIn和 onOut 方法。这两个方法会在元素显示和隐藏时分别调用。
-- -------------------- ---- -------
-------------------------
------------- ----
--- -
------- -----------
------ --
--
---- -
------- ------------
------ --
--
----- -------- -- -
-- --------
------------------------- -------
--
------ -------- -- -
-- --------
------------------------- ---------
-
---
-------------------------------------- - -------- ---------- -
------ ------------------ -- -
-- -------------
---
--
--
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------