18 Arten von Textanimations-Spezialeffekten basierend auf anime.js

Kurzes Tutorial

Dies ist ein Spezialeffekt für Textanimationen, der auf anime.js basiert. Diese Texteffekte werden verwendet, um unterschiedliche Textanimationseffekte zu erzeugen, wenn Text über die vorderen und hinteren Navigationstasten gewechselt wird.

Verwendung

Das Folgende ist ein dynamischer GIF-Bilddemonstrationseffekt eines der Textanimations-Spezialeffekte:

Erstellen Sie dies Satz von Textanimations-Spezialeffekten Der js-Code sieht wie folgt aus:

// 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)

Eine detailliertere Verwendung von anime.js finden Sie in der zugehörigen Dokumentation.

Die ursprüngliche Adresse dieses Textanimations-Spezialeffekts lautet: http://tympanus.net/codrops/2016/10/18/inspiration-for-letter-effects/

Die oben genannten sind 18 Typen basierend auf den Textanimations-Spezialeffekten von anime.js. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!