在库的帮助下,如今使用CSS或JavaScript为HTML元素制作动画几乎是一件容易的事。 但是您只能为完整的现有元素设置动画。
这意味着如果要为段落中的单个单词设置动画,则必须将单词包装在单个元素中(例如span
),然后相应地将其定位。
如果只有这样一个或两个span
元素,那没什么大不了的,但是如果要为段落中的每个字符设置动画怎么办? 对于每个字符,您都必须创建一个span
,这会增加很多额外的标记并使文本难以编辑。 这就是为什么存在Blast.js 。
Blast.js是一个jQuery插件,可让您为单个字符,单词或句子设置动画。 在本文中,我将提供一些示例,以便您可以了解如何使用Blast.js。 要使用Blast.js并尝试下面的示例,您将需要jQuery,当然还需要Blast.js文件,该文件可以在Blast.js 的项目网站上找到 。
如前所述,Blast.js允许我们围绕字符,单词或句子创建元素,但是库不仅限于这些选项。 在下一节中,我们将看到一些具体示例来介绍一些选项。 我们将看到的选项列表并不详尽; 可用选项的完整列表可以在项目的网站上找到。
在第一个示例中,我们将展开标题以动画化每个角色,并将其逐个向右移动。 所需的唯一HTML代码如下:
<h1>Hello World!</h1>
包括jQuery和Blast.js之后,此部分的下一部分代码将全部放在jQuery ready处理程序内的自定义JavaScript文件中,以确保页面已准备就绪:
$(function() {
// Animation code
});
现在我们可以爆破我们的头衔了。 在我们的示例中,仅使用$('h1')
定位元素就足够了,但是在您的情况下,您将使用适合于定位元素的任何选择器。
Blast.js在jQuery对象上提供了一种新方法: .blast()
,它具有一个参数:列出您要使用的所有选项的对象。 在第一个示例中,我们将仅使用一个选项, delimiter: 'character'
,指示我们要逐字符展开标题字符。
如果我们未包含该参数,则将使用默认值'word'
(而不是“ character”),因此将在每个单词周围创建span
(而不是我们想要的每个字符周围)。
$('h1').blast({
delimiter: 'character'
});
这样,我们的简单h1
元素将被爆炸,并生成以下生成的DOM:
<h1 class="blast-root">
<span class="blast">H</span>
<span class="blast">e</span>
<span class="blast">l</span>
<span class="blast">l</span>
<span class="blast">o</span>
<span class="blast">W</span>
<span class="blast">o</span>
<span class="blast">r</span>
<span class="blast">l</span>
<span class="blast">d</span>
<span class="blast">!</span>
</h1>
请注意,单词之间的空格已保留,尚未封装为span
。
现在,我们需要检索生成的span
元素。 例如,您可以尝试$('.blast')
,但是有一种更简单的方法。 默认情况下, .blast()
方法返回生成的元素,因此检索这些元素的唯一要做的就是将它们存储在变量中。
var chars = $('h1').blast({
delimiter: 'character'
});
获取生成的元素很有用,但并非总是如此。 因此,如果您希望.blast()
方法返回父元素(您正在爆炸的主要元素)而不是生成的元素,则可以使用另一种方法来完成: returnGenerated
。 默认情况下,它设置为true
; 将其设置为false
,您将拥有您的父元素:
var chars = $('h1').blast({
delimiter: 'character',
returnGenerated: false
});
让我们回到示例中来对我们收集的元素进行动画处理。 多亏了jQuery的.each()
方法,我们将为每个字符一个动画。
.each()
方法将为存储在jQuery对象中的每个元素执行一个函数。 这是我们将使用的,在注释中进行了解释。
// A character by character animation
chars.each(function(i) {
// initialize position
$(this).css({
position: 'relative',
left: 0
})
// Delay: we don't want to animate
// characters simultaneously
.delay(i * 45)
// Animate to the right
.animate({ left: '50px' }, 300);
});
解释代码:首先,我们使用$(this)
检索当前元素(即本例中的当前字符$(this)
。 我们将其相对位置初始化为零,最后为该位置设置动画。
如代码中的相应注释所述, .delay()
方法使用i * 45
在定义的毫秒数后启动动画,其中i
是jQuery提供的计数器(我们将其作为参数传入)。 对于第一个字符, i
等于0
,所以动画立即启动,然后等于1
,第二个字符在45毫秒后动画,依此类推。
我们的动画已经准备就绪,可以正常工作! 您可以在下面查看实时示例。
见笔Blast.js例如由SitePoint( @SitePoint上) CodePen 。
默认情况下,将创建span
元素,这是我们大多数时候想要的。 但是有时候我们想和其他元素一起玩,例如strong
, em
甚至div
和p
。 使用Blast.js,这是可能的。
为此,在下一个示例中,我们将创建一个段落,其中每个单词将使用随机颜色进行样式化,并封装在em
元素中。
首先,我们需要一个函数来为我们提供一个随机数。 我们将使用原生JavaScript中提供的Math.random()
的修改版本。
function rand(min, max) {
return parseInt(Math.round(min + Math.random() * (max - min)));
}
这个新函数将为我们提供一个介于min
和max
之间的随机整数,这是传递给函数的参数。
现在,我们可以为段落添加颜色了。 首先,我们使用定界符'word'
来展开段落。 我们添加了一个新选项: tag
,它使我们能够指示我们希望Blast.js用于生成元素的标签。 而不是默认的'span'
我们将其设置为'em'
。
var words = $('p').blast({
delimiter: 'word',
tag: 'em'
});
现在,我们所有的单词都封装在em
标记内。 对于每个标签,我们.css()
jQuery的.css()
方法和自定义的rand()
函数来定义新颜色:
words.each(function() {
$(this).css('color',
'rgb(' + rand(0, 255) + ',
' + rand(0, 255) + ',
' + rand(0, 255) + ')');
});
接下来,我们将添加另一行代码,以介绍如何检索父元素的初始状态(即,如何删除所有这些额外生成的标记)。
为此,可以将.blast()
方法的值设置为false
。 这告诉Blast.js,先前调用此方法添加的所有标签将被删除。
您可以在下面查看此示例的实时版本。
见笔Blast.js色彩演示由SitePoint( @SitePoint上) CodePen 。
请注意,将.blast(false)
方法应用于尚未由Blast.js转换的元素将不会执行任何操作。
默认情况下,Blast.js会围绕文本中的每个单词,字符或句子创建元素。 但是,您也只能定位一个单词或一组单词:Blast.js然后将每个出现的单词或一组单词封装到一个元素中。 为此,我们使用带有字符串作为值的search
选项,而不是delimiter
选项。
为了演示,我们将创建一个包含输入和提交按钮的表单。 用户将在输入中指示要在特定段落中搜索的单词,然后Blast.js将搜索到的术语封装到span
元素中。
<form method="get" action="search.html">
<p>
<input type="text" name="s" id="s" placeholder="Search">
<input type="submit" value="Go!">
</p>
</form>
我们将在表单上使用submit
事件执行此操作。
$('form').submit(function(e) {
$('#awesometext').blast(false).blast({
search: $('#s').val(),
customClass: 'search',
generateIndexID: true
});
e.preventDefault();
});
指令e.preventDefault();
包含以禁用表单的默认行为,即提交表单。
我们使用正确的选择器检索我们的段落,然后第一次使用false
值应用.blast()
方法。 这样,如果用户先前执行了其他搜索,则将清除这些搜索。
接下来,我们再次使用.blast()
方法,这次搜索所需的术语。 为此,我们使用search
选项,为其提供输入值。 另外两个选项不是强制性的,但是它们很有用,我想向您展示它们的存在。
customClass
选项允许我们将自己的类名称添加到生成的元素中。 如果查看前面示例中生成的元素,您肯定会看到它们都具有blast
类。 使用customClass
,可以添加一个或多个类。
generateIndexID
选项是布尔值。 设置为true
,它将为每个生成的元素添加一个ID。 要工作,它需要使用customClass
选项。 在这里,我们选择了class search
,因此第一个生成的元素将具有ID search-1
,第二个元素将具有search-2
,依此类推。
为了使我们的示例有用,我们需要在CSS中添加一些规则以突出显示所生成的元素。 例如,您可以应用以下规则。
.search {
background-color: #0096ff;
color: #fff;
}
#search-1 {
font-weight: bold;
}
您可以在下面查看此示例的实时版本。 尝试输入页面上显示的现有单词之一以查看效果。
见笔Blast.js搜索例如由SitePoint( @SitePoint上) CodePen 。
现在,我们已经了解了Blast.js的工作原理,这是一个需要回答的重要问题。 由于我们将.blast()
方法应用于容器,如果该容器已经包含文本节点以外的其他元素,该怎么办? 例如,如果对下一段应用爆炸,会发生什么?
<p>Hello <span>World</span>!</p>
Blast.js不会破坏您的DOM树。 在这种情况下,将不会删除现有的span
元素,而是将创建一个新的(具有blast
类的元素)。 通过在上一段中执行$('p').blast()
,我们产生以下结果:
<p class="blast-root">
<span class="blast">Hello</span>
<span>
<span class="blast">World</span>
</span>
<span class="blast">!</span>
</p>
最后:如果这个现有的span
元素实际上是Blast.js生成的span
怎么办? 答案取决于您想做什么。
假设我们已将.blast()
方法应用于将delimiter
选项设置为'word'
的段落,如果再次应用相同的方法,则在创建新元素之前,将删除先前生成的元素,即使新元素调用使用搜索而不是定界符。
但是,如果您搜索了一个词,然后再次调用.blast()
方法来搜索一个新词,则旧的搜索将不会被删除。 在上一部分的最后一个示例中,尝试删除.blast(false)
调用。 在这种情况下,新搜索将突出显示,而旧搜索也将突出显示。
Blast.js并非对所有人有用,有些人可能认为完全没有必要。 但是,如果要为文本设置动画,这可能是您可以找到的最佳选择之一。
如上所述,您可以找到其他选项来定制生成的元素。 如果选择,您甚至可以禁用ARIA属性。
如果您对如何以创造性的方式使用它有任何想法,或者您已经使用此工具或其他工具为文本设置动画,请随时在讨论中告知我们。
From: https://www.sitepoint.com/animating-text-with-blast-js/