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

  • 源码大小:8.57KB
  • 所需积分:1积分
  • 源码编号:19JP-3809
  • 浏览次数:2235次
  • 最后更新:2023年07月25日
  • 所属栏目:动画
本站默认解压密码:19jp.com 或 19jp_com

简介

一个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
});

预览截图