En este artículo, aprenderemos algunas animaciones de texto CSS3 básicas usando el complemento jQuery Textillate .
Texttillate.js contiene algunas bibliotecas para brindar a los usuarios un complemento fácil de usar para aplicar animaciones CSS3 a cualquier texto.
Acercarse:
- Descarga todas las dependencias en una carpeta. Tenga cuidado con las rutas de los archivos en el orden correcto mientras implementa los códigos que se indican a continuación.
- Incluya todos los archivos CSS relevantes en la sección principal del archivo HTML.
- Incluya todos los archivos JavaScript en la parte del script del código.
- Asigne un nombre de clase al texto al que desea aplicar la animación.
- En la parte JavaScript del código, crea una instancia del método textillate() usando el nombre de la clase para el texto como se muestra en los códigos a continuación.
- Para el paso anterior, use el evento document.ready() .
Bibliotecas utilizadas:
<enlace href=”assets/animate.css” rel=”hoja de estilo”>
<enlace href=”assets/style.css” rel=”hoja de estilo”>
<script src=”http://ajax.googleapis.com/ajax /libs/jquery/1.9.0/jquery.min.js”> </script>
<script src=”activos/jquery.fittext.js”></script>
<script src=”activos/jquery.lettering.js ”></script>
<script src=”jquery.textillate.js”></script>
Ejemplo 1: El siguiente código demuestra la inicialización básica del método textillate() del complemento en el texto «h2» .
HTML
<!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>
Producción:
Ejemplo 2: En el siguiente ejemplo, hemos tomado una lista desordenada <ul> con elementos de lista <li> . Los efectos de animación se dan como «desvanecimiento» y «desvanecimiento» como se muestra a continuación en el código. Consulte la salida para una mejor comprensión.
HTML
<!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>
Producción:
Ejemplo 3: El siguiente código demuestra las diferentes opciones aplicadas a los atributos en la parte del script del código. El desarrollador puede probar varias opciones según las necesidades de la aplicación. Pocos se muestran a continuación.
HTML
<!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>
Producción:
Ejemplo 4: El siguiente código demuestra el manejo de eventos activado por el complemento textillate. Se muestra un ejemplo para los eventos “En fin de animación” y “Comienzo de animación fuera”. Los mensajes de alerta de JavaScript se lanzan en varios eventos.
HTML
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA