18 types d'effets spéciaux d'animation de texte basés sur anime.js

Bref tutoriel

Il s'agit d'un effet spécial d'animation de texte basé sur anime.js. Ces effets de texte sont utilisés pour créer différents effets d'animation de texte lors du changement de texte via les boutons de navigation avant et arrière.

Comment utiliser

Ce qui suit est un effet de démonstration d'image dynamique GIF de l'un des effets spéciaux d'animation de texte :

Créez ceci ensemble d'effets spéciaux d'animation de texte Le code js ressemble à ce qui suit :

// Initialize
var txt = new TextFx(this.el.querySelector('.title'));
 
// Show letters: 
// txt.show([effect] [,callback]);
// If nothing is passed, then there's no animation.
// ´effect´ can either be one of the predefined effects: ['fx1',...,'fx17'] or 
// an object literal representing both, in and out animations (anime.js based).
 
// Example:
effect = {
  in: {
    duration: 500,
    delay: function(el, index) { 
      return 250+index*40; 
    },
    easing: 'easeOutExpo',
    opacity: 1,
    translateY: ['50%','0%']
  },
  out: {
    duration: 500,
    delay: function(el, index) { 
      return index*40; 
    },
    easing: 'easeOutExpo',
    opacity: 0,
    translateY: '-50%'
  }
}
// ´callback´ is the callback function, after all the letters finished the animation.
 
// Hide letters: 
// txt.hide([effect] [,callback]); (same logic of show)

Pour une utilisation plus détaillée de anime.js, vous pouvez vous référer à sa documentation.

L'adresse originale de cet effet spécial d'animation de texte est : http://tympanus.net/codrops/2016/10/18/inspiration-for-letter-effects/

Les éléments ci-dessus sont 18 types basés sur les effets spéciaux d'animation de texte d'anime.js. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !