`

textillate.js 文字动画

阅读更多

textillate.js是一款强大的文字插件,若配合animate.css、fittext、lettering一起使用,这样做出来的文字特效很完美。

在线实例

实例演示

使用方法

  1. <div id="texts">Welcome To shouce</div>
复制
  1. $(function() { 
  2.     $('#texts').fitText(3.2, {maxFontSize: 18}).textillate({initialDelay: 1000, in: {delay: 3, shuffle: true}}); 
  3. })
复制

参数详解

参数 描述 默认值
selector 目标选择器 .texts
loop 是否循环 false
minDisplayTime 最小间隔时间 2000
initialDelay 初始化间隔时间 0
in {       effect: 'fadeInLeftBig',       delayScale: 1.5,       delay: 50,       sync: false,       reverse: false,       shuffle: false,       callback: function () {}     } -
out {       effect: 'hinge',       delayScale: 1.5,       delay: 50,       sync: false,       reverse: false,       shuffle: false,       callback: function () {}     } -
autoStart 自动开始 true
callback 回调函数 function () {} -

 

2
0
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    textillate.js文本动画示例及JS插件资源

    Textillate.js是一个基于JavaScript的文本动画库,它为网页中的文本赋予了生动的动画效果,使得原本静止的文本变得动态且吸引人。这个库简单易用,兼容现代浏览器,为网页设计师和开发者提供了一种便捷的方式来提升...

    CSS3实现文字动画Textillate.js.zip

    Textillate.js 是一个神奇的 jQuery 插件,可用于创建 CSS3 实现的文字动画特效,基于 Animate.css 和 Lettering.js 实现。使用 Textillate.js 你可以轻松创建你想要的动画文字效果,提供的效果有:闪现、反弹、震动...

    textillate演示N种不同的文字动画

    《textillate演示N种不同的文字动画》 在网页设计中,动态效果是吸引用户注意力、提升用户体验的重要手段。Textillate是一款基于jQuery的插件,它为网页文本赋予了丰富的动画效果,使得静态的文字变得生动有趣。...

    textillate( 文本动画插件 ).rar

    这款插件能够轻松实现各种各样的文字动画效果,提升网页的视觉吸引力。 ### 一、安装与引入 要使用textillate,首先需要确保你的项目中已经包含了jQuery和Lettering.js。之后,可以通过下载textillate的源代码或...

    textillate动画初探

    Textillate是一种JavaScript库,它结合了Lettering.js(用于分离HTML文本中的每个字母)和Animate.css(提供多种动画效果),为开发者提供了创建炫酷文字动画的能力。通过Textillate,你可以轻松地将各种动画效果...

    H5 文字loading动画

    4. **Text animation libraries**:如AnimateText.js或Textillate.js,这些库可以帮助开发者轻松创建复杂的文字动画。 5. **响应式设计**:确保加载动画在不同设备和屏幕尺寸上都能良好运行,这通常需要使用媒体...

    animate.css制作酷炫文字特效

    除了 Textillate.js,还可以使用其他插件,如 Typewriter.js 或 AnimateText.js,它们同样可以结合 animate.css 使用,实现各种文字动画效果。 通过灵活组合 animate.css 提供的不同动画类和 jQuery 文字动画插件,...

    javascript经典特效---文字特殊效果.rar

    9. **文本动画库**:有许多开源的JavaScript库,如Textillate、Typed.js、ScrollMagic等,可以帮助开发者轻松创建复杂的文字动画效果,无需从零开始编写代码。 10. **响应式文字**:随着浏览器窗口大小的变化,文字...

    js各种特效

    例如,Textillate.js库提供了一种简单的方式来实现复杂的文字动画序列。 这些特效的实现往往需要良好的前端开发基础,包括HTML结构、CSS布局和样式以及JavaScript事件处理和DOM操作。为了优化性能,通常需要考虑...

    印刷术:一些简单的印刷术组件。 可能是

    1. **Type.js**: 这是一个轻量级的库,允许开发者控制文字动画,如逐字显示文本,改变字体大小或颜色,以及创建各种吸引人的文字效果。 2. **Lettering.js**: 专为标题和段落设计,它可以帮助分离每个字母或数字,...

    web网页制作特效代码

    另外,通过JavaScript库如Textillate或Lettering.js,可以实现文字动画,如字母逐个显现、闪烁、旋转等效果。 4. 鼠标效果:鼠标悬停效果是提升用户互动性的常见手法,如按钮悬停时改变颜色、形状,或者图片预览等...

    jquery特效

    jQuery是一种高效的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。自2006年发布以来,jQuery迅速成为Web开发领域中最广泛使用的库之一,因其简洁、直观的API而备受青睐。在...

    网页特效代码.rar

    同时,JavaScript库如Textillate也能提供复杂且灵活的文字动画。 4. **图片特效**:图片特效能够使网页视觉效果更加丰富,比如图片轮播、缩放、淡入淡出等。这通常需要结合HTML、CSS和JavaScript一起工作,例如使用...

    WEB进度条、滚动条、让你字体内容炫起来

    另外,JavaScript库如Textillate和Typed.js则提供了更高级的功能,比如文本逐字显示、动画循环等。这些工具和技巧能让你的网页文字变得更有生命力。 总结来说,通过定制WEB进度条、滚动条以及运用创新的字体动画,...

    jquery插件集合03(包含13个)

    textillate是一款文字动画插件,它可以将文本动态地呈现出来,支持各种动画效果,如淡入淡出、旋转、缩放等,为网站增加动态元素,吸引用户注意力。 5. **olton-Metro-UI-CSS-be01da6**: 这是基于jQuery的Metro ...

    完整版近在眼前-自定义字体宽、高比例(可任意拉伸字体).e.rar

    5. JavaScript库和插件:还有一些JavaScript库,如Font Awesome或Textillate,提供了动态改变字体宽高比例的功能,适用于交互式或动画效果。 无论采用哪种方法,都需要注意保持可读性。过度拉伸或压缩字体可能导致...

    jQuery 和 CSS 的文本特效插件集锦

    19. **Textillate.js**:一个简单的CSS3文本动画插件,包含多种动画预设,易于集成。 20. **Sinetheta-JQuery-Burn**:可能是用来创建燃烧效果的文本动画,适合于制造强烈的视觉冲击力。 这些插件都经过精心挑选,...

Global site tag (gtag.js) - Google Analytics