Animación de texto CSS3 usando jQuery Textillate Plugin

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *