网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
Fallblatt是一个可定制的jQuery文本动画插件,类似于机场和火车站的随机动画显示任何文本特效。
1.在html文档中添加jquery库和Fallblatt插件文件。
<link href="fallblatt.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="fallblatt.js"></script>
2. 创建一个容器。
<div id="splitFlapExample"></div>
3. 初始化插件
$("#splitFlapExample").fallBlatt({
// options here
})
4. 在屏上显示等待文本。
$("#splitFlapCanvas").fallBlatt("display", {
// customize position here
pos: [x,y],
// text to animate
content: "A"
});
5.自定义动画选项。
$("#splitFlapExample").fallBlatt({
flapHeight: 120,
flapWidth: 90,
flapScale: 1,
flapSpacingExtraHeight: 0,
flapSpacingExtraWidth: 0,
flapCharset: {
// Index 0 is the default character (space)
// If an unknown character is observed, the last char from the list will be used
chars: " 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ'‘?’“!”(%)[#]{@}/&\\<-_+÷×=>$€:;,.~*rbgyow",
options: {
// "CHAR": [List of classes to attach to this char]
"(": ["splitFlapCharBrackets"],
"%": ["splitFlapCharSpecial"],
")": ["splitFlapCharBrackets"],
"[": ["splitFlapCharBrackets"],
"#": ["splitFlapCharSpecial"],
"]": ["splitFlapCharBrackets"],
"{": ["splitFlapCharBrackets"],
"@": ["splitFlapCharSpecial"],
"}": ["splitFlapCharBrackets"],
"/": ["splitFlapCharBrackets"],
"&": ["splitFlapCharSpecial"],
"\\": ["splitFlapCharBrackets"],
"_": ["splitFlapCharExtremes"],
"$": ["splitFlapCharSpecial"],
":": ["splitFlapCharExtremes"],
";": ["splitFlapCharExtremes"],
",": ["splitFlapCharExtremes"],
"~": ["splitFlapCharTilde"],
"*": ["splitFlapCharAsterisk"],
"r": ["splitFlapCharColourBase", "splitFlapCharColourRed"],
"b": ["splitFlapCharColourBase", "splitFlapCharColourBlue"],
"g": ["splitFlapCharColourBase", "splitFlapCharColourGreen"],
"y": ["splitFlapCharColourBase", "splitFlapCharColourYellow"],
"o": ["splitFlapCharColourBase", "splitFlapCharColourOrange"],
"w": ["splitFlapCharColourBase", "splitFlapCharColourWhite"]
}
},
flapCss: {
flapContainerScaleClass: "splitFlapScaleLayer",
flapContainerClass: "splitFlapContainer",
flapContainerDividerBaseClass: "splitFlapContainerDividerBase",
flapContainerDividerClass: "splitFlapContainerDivider",
flapContainerDividerLinkLeftClass: "splitFlapContainerDividerLinkLeft",
flapContainerDividerLinkRightClass: "splitFlapContainerDividerLinkRight",
flapContainerCharClass: "splitFlapContainerChar"
}
})
转载请注明来源:jquery炫酷随机动画显示文本特效插件(Fallblatt)
本文永久链接地址:https://www.moyouyouw.cn/code/710.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论