用blast.js动画文字

借助库的帮助，如今使用 CSS 或 JavaScript 动画化 HTML 元素或多或少是一项简单的任务。但是，你只能动画化完整的现有元素。

这意味着，如果你想动画化段落中的单个单词，你必须将单词包装在单个元素（如 span）中，然后相应地定位它。

如果你只有这样一两个 span 元素，这不是什么大问题，但如果你想动画化段落中的每个字符呢？对于每个字符，你都必须创建一个 span，这会添加许多额外的标记，并使文本难以编辑。这就是 Blast.js 存在的原因。

关键要点

• Blast.js 是一个 jQuery 插件，允许动画化 HTML 中的单个字符、单词或句子。它通过将选定的文本包装在单个元素（如 span）中，然后动画化这些元素来实现这一点。
• 该插件提供了许多自定义选项，包括选择包装元素、搜索和突出显示特定单词或单词组以及控制动画速度和样式的能力。它还确保文本中现有的元素不会被移除或损坏。
• 尽管 Blast.js 功能强大，但并非所有用户都需要它，特别是那些不需要动画化文本的用户。但是，对于那些需要动画化文本的用户来说，它可以成为在网页中添加动态和交互元素的强大工具。

什么是 Blast.js？

Blast.js 是一个 jQuery 插件，允许你动画化单个字符、单词或句子。在本文中，我将提供一些示例，以便你可以了解如何使用 Blast.js。要使用 Blast.js 并尝试下面的示例，你需要 jQuery 以及 Blast.js 文件，该文件可以在 Blast.js 的项目网站上找到。

如前所述，Blast.js 允许我们在字符、单词或句子周围创建元素，但该库不仅限于这些选项。在下一节中，我们将看到一些具体的示例来介绍一些选项。我们将看到的选项列表并非详尽无遗；完整的可用选项列表可以在项目的网站上找到。

动画化我们的第一段文本

在这个第一个示例中，我们将动画化一个标题，逐个字符地将它们向右移动。唯一需要的 HTML 代码如下：

<h1 id="">></h1>Hello World!>

在包含 jQuery 和 Blast.js 之后，本部分中的下一段代码将全部位于 jQuery 的 ready 处理程序中的自定义 JavaScript 文件中，以确保页面已准备好：

$(function() {
  // 动画代码
});

现在我们可以动画化我们的标题了。在我们的示例中，仅使用 $('h1') 来定位元素就足够了，但在你的情况下，你将使用任何合适的选择器来定位元素。

Blast.js 在 jQuery 对象上提供了一种新方法：.blast()，它接受一个参数：一个列出所有你想要使用的选项的对象。在这个第一个示例中，我们将只使用一个选项 delimiter: 'character'，表示我们想要逐个字符地动画化我们的标题。

如果我们没有包含该参数，则将使用默认值 'word'（而不是“character”，因此将在每个单词（而不是每个字符，就像我们在这里想要的那样）周围创建一个 span。

<h1 id="">></h1>Hello World!>

这样，我们的简单 h1 元素将被动画化，并将生成以下 DOM：

$(function() {
  // 动画代码
});

请注意，单词之间的空格已被保留，并且没有被封装到 span 中。

现在，我们需要检索生成的 span 元素。例如，你可以尝试 $('.blast')，但是有一种更简单的方法。默认情况下，.blast() 方法返回生成的元素，因此你只需要将它们存储在一个变量中即可检索这些元素。

$('h1').blast({
  delimiter: 'character'
});

获取生成的元素很有用，但并非一直如此。因此，如果你希望 .blast() 方法返回父元素（你正在动画化的主要元素）而不是生成的元素，可以使用另一个选项：returnGenerated。默认情况下，它设置为 true；将其设置为 false，你将拥有你的父元素：

<h1 id="class-blast-root"> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

让我们回到我们的示例，来动画化我们收集的元素。我们将借助 jQuery 的 .each() 方法，逐个字符地动画化每个字符。

.each() 方法将为存储在 jQuery 对象中的每个元素执行一个函数。以下是我们将使用的函数，在注释中进行了解释。

var chars = $('h1').blast({
  delimiter: 'character'
});

代码解释：首先，我们使用 $(this) 检索当前元素（在本例中为当前字符）。我们将其相对位置初始化为零，最后，我们动画化此位置。

如代码中相应的注释所示，.delay() 方法在定义的毫秒数后启动动画，使用 i * 45，其中 i 是 jQuery 提供的计数器（我们将其作为参数传递）。对于第一个字符，i 等于 0，因此动画立即启动，然后它等于 1，第二个字符在 45 毫秒后动画化，依此类推。

我们的动画已准备就绪，并且可以运行！你可以在下面的实时示例中查看。

选择你的包装元素

默认情况下，会创建 span 元素，这通常是我们想要的。但有时我们想使用其他元素，例如 strong、em 甚至 div 和 p。使用 Blast.js，这是可能的。

为此，在我们的下一个示例中，我们将创建一个段落，其中每个单词都将使用随机颜色进行样式化并封装在 em 元素中。

首先，我们需要一个函数来为我们提供一个随机数。我们将使用在原生 JavaScript 中可用的修改后的 Math.random() 版本。

var chars = $('h1').blast({
  delimiter: 'character',
  returnGenerated: false
});

这个新函数将为我们提供 min 和 max 之间的随机整数，这些整数作为参数传递到函数中。

现在我们准备为我们的段落着色了。首先，我们使用 delimiter 'word' 动画化我们的段落。我们添加了一个新选项：tag，它允许我们指示我们希望 Blast.js 使用的标签来生成元素。我们将它设置为 'em'，而不是默认的 'span'。

<h1 id="">></h1>Hello World!>

现在我们所有的单词都被封装在 em 标签中了。对于每个标签，我们使用 jQuery 的 .css() 方法和我们的自定义 rand() 函数定义一个新的颜色：

$(function() {
  // 动画代码
});

接下来，我们将添加另一行代码来介绍如何检索父元素的初始状态（即如何移除所有这些额外的生成的标签）。

为此，你可以为 .blast() 方法赋予 false 值。这告诉 Blast.js，将移除使用此方法的先前调用添加的所有标签。

你可以在下面的实时版本中查看此示例。尝试键入页面上显示的现有单词之一以查看效果。

使用 Blast.js 搜索

默认情况下，Blast.js 将在文本中的每个单词、字符或句子周围创建元素。但你也可以只定位一个单词或一组单词：Blast.js 然后将单词或单词组的每个出现都封装到一个元素中。为此，我们将使用 search 选项，其值为字符串，而不是 delimiter 选项。

为了演示，我们将创建一个包含输入和提交按钮的表单。用户将在输入中指示要在特定段落中搜索的单词，然后 Blast.js 将将搜索的术语封装到 span 元素中。

$('h1').blast({
  delimiter: 'character'
});

我们将使用表单上的提交事件来执行此操作。

<h1 id="class-blast-root"> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

指令 e.preventDefault(); 用于禁用表单的默认行为，即提交表单。

我们在第一次使用 false 值应用 .blast() 方法之前，使用正确的选择器检索我们的段落。这样，如果用户之前执行了其他搜索，这些搜索将被清除。

接下来，我们再次使用 .blast() 方法，这次是搜索所需的术语。为此，我们使用 search 选项，为其提供输入的值。另外两个选项不是强制性的，但我希望向你展示它们的存在。

customClass 选项允许我们将我们自己的类名添加到生成的元素中。如果你查看了前面示例中生成的元素，你肯定会看到它们都具有 blast 类。使用 customClass，你可以添加一个或多个类。

generateIndexID 选项是一个布尔值。设置为 true，它将向每个生成的元素添加一个 ID。要工作，它需要使用 customClass 选项。在这里，我们选择了类 search，因此第一个生成的元素将具有 ID search-1，第二个元素将具有 search-2，依此类推。

为了使我们的示例有用，我们需要在 CSS 中添加一些规则来突出显示生成的元素。例如，你可以应用以下规则。

var chars = $('h1').blast({
  delimiter: 'character'
});

你可以在下面的实时版本中查看此示例。尝试键入页面上显示的现有单词之一以查看效果。

现有元素呢？

在我们了解了 Blast.js 的工作原理之后，现在有一个重要的问题需要回答。由于我们将 .blast() 方法应用于容器，如果此容器除了文本节点之外还包含其他元素会怎样？例如，如果我们将爆炸应用于以下段落会怎样？

<h1 id="">></h1>Hello World!>

Blast.js 不会破坏你的 DOM 树。在这种情况下，现有的 span 元素不会被移除，并且会创建一个新的 span 元素（带有 blast 类）。通过对上述段落执行 $('p').blast()，我们将生成以下结果：

$(function() {
  // 动画代码
});

最后：如果这个现有的 span 元素实际上是由 Blast.js 生成的 span 元素呢？答案取决于你想要做什么。

假设我们将 .blast() 方法应用于一个段落，并将 delimiter 选项设置为 'word'，如果我们再次应用相同的方法，则在创建新元素之前，将移除先前生成的元素，即使新的调用使用搜索而不是分隔符也是如此。

但是，如果你搜索了一个术语，并再次调用 .blast() 方法来搜索一个新术语，则旧的搜索不会被移除。在我们上一部分的最后一个示例中，尝试移除 .blast(false) 调用。在这种情况下，将突出显示新的搜索，但旧的搜索也将保持突出显示。

总之

Blast.js 并非对每个人都有用，有些人可能会认为它完全没有必要。但是，如果你想动画化文本，这可能是你能找到的最佳选项之一。

如上所述，你可以找到其他选项来自定义生成的元素。你甚至可以选择禁用 ARIA 属性。

如果你对如何以创造性的方式使用它有任何想法，或者如果你使用过这个或其他工具来动画化文本，请随时在讨论中告诉我们。

关于使用 Blast.js 动画化文本的常见问题解答 (FAQ)

如何在我的项目中安装 Blast.js？

要在你的项目中安装 Blast.js，你可以使用 npm 或 Bower。如果你使用 npm，你可以通过运行命令 npm install blast-text 来安装它。如果你使用 Bower，则命令是 bower install blast-text。安装后，你可以使用 script 标签将其包含在你的 HTML 文件中。记住在 Blast.js 之前包含 jQuery，因为它是一个 jQuery 插件。

Blast.js 中有哪些不同的分隔符？

Blast.js 提供了四个不同的分隔符：character、word、sentence 和 element。character 分隔符将文本分解成单个字符。word 分隔符将文本分解成单词。sentence 分隔符将文本分解成句子。element 分隔符将文本分解成 HTML 元素。

如何使用 Blast.js 动画化文本？

要使用 Blast.js 动画化文本，你首先需要使用 jQuery 选择要动画化的文本。然后，你可以使用 .blast() 方法将文本分解成片段。之后，你可以使用 CSS 或 jQuery 来动画化这些片段。

我可以在没有 jQuery 的情况下使用 Blast.js 吗？

不可以，Blast.js 是一个 jQuery 插件，因此它需要 jQuery 才能工作。你需要在包含 Blast.js 之前在你的项目中包含 jQuery。

如何在 Blast.js 中使用自定义分隔符？

要在 Blast.js 中使用自定义分隔符，你可以将正则表达式传递给 .blast() 方法。正则表达式应该匹配你想要用作分隔符的字符。

为什么我的 Blast.js 动画不起作用？

如果你的 Blast.js 动画不起作用，可能有几个原因。首先，确保你在你的项目中包含了 jQuery 和 Blast.js。其次，检查你是否正确使用了 .blast() 方法。第三，检查你的 CSS 或 jQuery 动画代码是否正确。

我可以使用 Blast.js 动画化 HTML 元素吗？

是的，你可以使用 Blast.js 动画化 HTML 元素。你可以使用 element 分隔符将 HTML 分解成单个元素，然后使用 CSS 或 jQuery 来动画化它们。

如何控制 Blast.js 动画的速度？

Blast.js 动画的速度由 CSS 或 jQuery 动画代码控制，而不是由 Blast.js 本身控制。你可以通过更改动画代码中的 duration 参数来调整速度。

我可以将 Blast.js 与其他 JavaScript 库一起使用吗？

是的，你可以将 Blast.js 与其他 JavaScript 库一起使用。但是，由于 Blast.js 是一个 jQuery 插件，你需要在你的项目中包含 jQuery。

如何从我的文本中移除 Blast.js 效果？

要从你的文本中移除 Blast.js 效果，你可以使用 .unblast() 方法。此方法将文本恢复到其原始状态，移除所有 Blast.js 效果。

以上是用blast.js动画文字的详细内容。更多信息请关注PHP中文网其他相关文章！