一个jQuery插件，通过使用7个CSS3支持的平滑过渡效果在文本之间切换来创建令人印象深刻的标题。

请参阅实际操作：

如何使用它:

1.在页面上包含jQuery库和动画标题插件的文件。

<link rel="stylesheet" href="/path/to/jquery.animatedheadline.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.animatedheadline.min.js"></script>

2.将标题添加到页面中。

• 旋转-1（默认）
• 旋转-2
• 旋转-3
• 规模
• 类型
• 夹子
• 装载杆

<div class="selector" style="display: flex; justify-content: center; text-align: center;">
  <h1 class="ah-headline" style="text-align: center;">
    <span>I Love </span>
    <span class="ah-words-wrapper">
      <b class="is-visible">jQueryScript.Net</b>
      <b>CSSScript.Com</b>
      <b>VueScript.Com</b>      
    </span>
  </h1>
</div>

3.初始化顶部容器上的插件，并指定动画类型：

$(function() {
  $('.selector').animatedHeadline({
    animationType: 'scale'
  });
})

4.配置过渡效果：

$('.selector').animatedHeadline({
  animationDelay: 2500,
  barAnimationDelay: 3800,
  barWaiting: 800,
  lettersDelay: 50,
  typeLettersDelay: 150,
  selectionDuration: 500,
  typeAnimationDelay: 1300,
  revealDuration: 600,
  revealAnimationDelay: 1500
});

预览截图

在 平滑动画 文本之间切换 jQuery动画标题