极客教程使用jQuery Textillate插件的CSS3文本动画
在这篇文章中，我们将学习一些基本的CSS3文本动画，使用jQuery Textillate插件。
Texttillate.js包含一些库，为用户提供了一个易于使用的插件，用于将CSS3动画应用于任何文本。
步骤:
- 在一个文件夹中下载所有的依赖项。在执行下面的代码时，请注意文件路径的正确顺序。
- 在HTML文件的标题部分包括所有相关的CSS文件。
- 在代码的脚本部分中包括所有的JavaScript文件。
- 给你想应用动画的文本一个类名称。
- 在代码的JavaScript部分，使用文本的类名实例化textillate() __方法，如下面的代码所示。
- 对于上述步骤，使用 document.ready() 事件。
用到的库:
<link href=”assets/animate.css” rel=”stylesheet”>
<link href=”assets/style.css” rel=”stylesheet”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”> </script>
<script src=”assets/jquery.fittext.js”></script>
<script src=”assets/jquery.lettering.js”></script>
<script src=”jquery.textillate.js”></script>
示例1：下面的代码演示了插件的textillate()方法对 “h2 “文本的基本初始化。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href="assets/animate.css" rel="stylesheet">
<link href="assets/style.css" rel="stylesheet">
</head>
<body>
<center>
<h2 class="myClass">
GeeksforGeeks
</h2>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script src="assets/jquery.fittext.js"></script>
<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
<script>
(document).ready(function () {
('.myClass').textillate();
});
</script>
</center>
</body>
</html>
输出:
例子2：在下面的例子中，我们采取了一个<ul>带有列表项的无序列表。动画效果被赋予 “fadeOut “和 “fadeIn”，如下面的代码所示。为了更好地理解，请参考输出。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href="assets/animate.css" rel="stylesheet">
<link href="assets/style.css" rel="stylesheet">
</head>
<body>
<center>
<h2 style="color:green">GeeksforGeeks</h2>
<p><b>Animate a list</b>
<p>
<h3 class="myClass">
<ul class="texts">
<li data-out-effect="fadeOut"
data-out-shuffle="true">
Learn PHP
</li>
<li data-in-effect="fadeIn">
Learn CSS
</li>
</ul>
</h3>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script src="assets/jquery.fittext.js"></script>
<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
<script>
(document).ready(function () {
('.myClass').textillate();
});
</script>
</center>
</body>
</html>
输出:
示例3：下面的代码演示了在代码的脚本部分应用于属性的不同选项。开发者可以根据应用程序的需要尝试各种选项。下面显示了几个。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href="assets/animate.css" rel="stylesheet">
<link href="assets/style.css" rel="stylesheet">
</head>
<body>
<center>
<h2 style="color:green">
GeeksforGeeks
</h2>
<p><b>Animate a list</b><p>
<h3 class="myClass">
<ul class="myTexts">
<li data-out-effect="fadeOut"
data-out-shuffle="true">
Learn PHP
</li>
<li data-in-effect="rollIn">
Learn CSS
</li>
</ul>
</h3>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script src="assets/jquery.fittext.js"></script>
<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
<script>
(document).ready(function () {
('.myClass').textillate({
// Selector of multiple texts to animate
selector: '.myTexts',
// Enable looping
loop: false,
// Sets the minimum display time for
// each text before it is replaced
minDisplayTime: 3000,
// Sets the initial delay before
// starting the animation
initialDelay: 50,
// Automatically start animating
autoStart: true,
// Character is shown/hidden
// before or after animation
inEffects: [],
// Set 'out' effects
outEffects: ['hinge'],
// In animation settings
in: {
// Set the effect name
effect: 'fadeInLeftBig',
// Set the delay applied to
// each character
delayScale: 1.5,
// Set the delay between
// each character
delay: 100,
// Set to true to animate all the
// characters at the same time
sync: false,
// Randomize the character sequence
shuffle: true,
// Reverse the character sequence
reverse: true,
// Callback once the animation
// has finished
callback: function () { }
},
// Out animation settings.
out: {
effect: 'hinge',
delayScale: 1.5,
delay: 100,
sync: false,
shuffle: true,
reverse: true,
callback: function () { }
},
// Callback once textillate
// has finished
callback: function () { },
// Set type as 'char' or
// 'word'to animate
type: 'word'
});
});
</script>
</center>
</body>
</html>
输出:
例子4：下面的代码演示了由textillate插件触发的事件处理。一个例子显示了 “In animation end “和 “Out animation begin “事件的处理。在各种事件中抛出了JavaScript警告信息。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href="assets/animate.css" rel="stylesheet">
<link href="assets/style.css" rel="stylesheet">
</head>
<body>
<center>
<h2 class="tlt">GeeksforGeeks</h2>
<h3 class="tlt">
<ul class="texts">
<li data-out-effect="fadeOut"
data-out-shuffle="true">
Learn PHP
</li>
<li data-in-effect="fadeIn">
Learn CSS
</li>
</ul>
</h3>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script src="assets/jquery.fittext.js"></script>
<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
<script>
(document).ready(function () {
('.tlt').textillate();
('.tlt').on('inAnimationEnd.tlt', function () {
alert("In animation came to an end");
});
('.tlt').on('outAnimationBegin.tlt', function () {
alert("Out animation Began");
});
});
</script>
</center>
</body>
</html>
输出:
