使用 jQuery Textillate 插件的 CSS3 文本动画

在本文中，我们将使用 jQuery Textillate 插件学习一些基本的 CSS3 文本动画。

Texttillate.js 包含一些为用户提供的库，一个易于使用的插件，用于将 CSS3 动画应用于任何文本。

方法：

• 下载文件夹中的所有依赖项。在执行下面给出的代码时，请以正确的顺序处理文件路径。
• 在 HTML 文件的 head 部分中包含所有相关的 CSS 文件。
• 在代码的脚本部分中包含所有 JavaScript 文件。
• 为要应用动画的文本指定类名。
• 在代码的 JavaScript 部分，实例化textillate() 方法使用文本的类名，如下面的代码所示。
• 对于上述步骤，使用 document.ready() 事件。

使用的库：

示例 1：以下代码演示了插件的textillate()方法在“h2”文本上的基本初始化。

HTML

  

    
    
    
    
    

  

    
        
            GeeksforGeeks
        
  
        
        
        
        
        
        
            $(document).ready(function () {
                $('.myClass').textillate();
            });
        
    

  

输出：

示例 2：在下面的示例中，我们采用了带有列表项

的无序列表

。动画效果以“fadeOut”和“fadeIn”的形式给出，如下代码所示。请参阅输出以更好地理解。

HTML

  

    
    
    
    
    
  

  

    
        GeeksforGeeks
        Animate a list
        
        
            
                
                    Learn PHP
                
                
                    Learn CSS
                
            
        
  
        
        
        
        
        
  
        
            $(document).ready(function () {
                $('.myClass').textillate();
  
            });
        
    

  

输出：



示例 3：以下代码演示了应用于代码脚本部分中的属性的不同选项。开发人员可以根据应用程序的需要尝试各种选项。下面显示的很少。

HTML

  

    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        Animate a list
        
            
                
                    Learn PHP
                
                
                    Learn CSS
                
            
        
  
        
        
        
        
        
  
        
            $(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'
                });
            });
        
    

  

输出：



示例 4：以下代码演示了 textillate 插件触发的事件处理。显示了“In animation end”和“Out animation begin”事件的示例。 JavaScript 警报消息会在各种事件中引发。

HTML

  

    
    
    
    
    

  

    
        GeeksforGeeks
        
            
                
                    Learn PHP
                
                
                    Learn CSS
                
            
        
          
        
        
        
        
        
  
        
            $(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");
                });
            });
        
    

  

输出：