Web 文本动画
为使用 Blast.js 实现动画准备文本元素
Blast 能够将页面上的文本进行拆分
安装
<html>
<head>My Page</head>
<body>
My content.
<script src="jquery.js"></script>
<script src="velocity.js"></script>
<script src="blast.js"></script>
</body>
</html>
选项：delimiter(分隔符)
$element.blast({ delimiter: "sentence" });//"character" (字符)、 "word" (单词)或 "sentence"(句子)
选项：customClass(自定义类)
<div>
Hi Mom
</div>
$("div").blast({ delimiter: "word" , customClass: "myClass" });
上述 div 会变成：
<div>
<span>Hi</span>
<span>Mom</span>
</div>
选项：generateValueClass(生成值类)
<div>
Hi Mom
</div>
$("div").blast({ delimiter: "word" , generateValueClass: true });
上述 div 会变成：
<div>
<span>Hi</span>
<span>Mom</span>
</div
选项：tag(标签)
<div>
Hi Mom
</div
// 将"div"元素用作包装器标签
$("div").blast({ delimiter: "word" , tag: "div" });
上述 div 会变成：
<div>
<div>Hi</div>
<div>Mom</div>
</div>
命令：reverse(反转)
<div>
<div>Hi</div>
<div>Mom</div>
</div>
进行了如下的 Blast 调用:
$("div").blast(false);
上述 div 会变回原样：
<div>
Hi Mom
</div>
让文本过渡进入视图或离开视图
替换已有文本
//马上替换 -> 隐藏 -> 渐变透明度显示出来
$("div")
.html("This is our new message.")
.blast({ delimiter: "word" })
.css("opacity", 0);
.velocity({ opacity: 1 });
错开动画
$("div")
.html("This is our new message.")
.blast({ delimiter: "word" })
.css("opacity", 0);
.velocity("transition.fadeIn", { stagger: 50 });//添加一个50毫秒的延迟
过渡文本离开视图
// 选择之前已拆分的文本
$("div .blast").velocity(
// 使用适当的UI pack效果让现有文本以动画方式离开视图
"transition.fadeOut",
{
// 像错开进入动画一样错开离开动画
stagger: 50,
backwards: true,
// 当文本离开视图的动画完成以后,开始文本进入视图的动画
complete: function() {
// 继续进行文本进入视图的动画
$("div")
.html(message)
.blast({ delimiter: "word" })
.css("opacity", 0)
.velocity({ opacity: 1 }, { stagger: 50 });
}
}
);
文字装饰
<div>
Hi Mom
</div>
// 将div用Blast拆开,然后遍历生成的文本元素
$("div").blast({ delimiter: "character" }).each(function(i, element) {
// 使用任意公式依次减少每个元素的oapcity值
var adjustedOpacity = 1 - i/10;
element.style.opacity = adjustedOpacity;
});如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： 动画工作流
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论