anime.jsをベースにした18種類のテキストアニメーション特殊効果

簡単なチュートリアル

これは anime.js に基づいたテキスト アニメーションの特殊効果です。これらのテキスト効果は、前後のナビゲーション ボタンでテキストを切り替えるときに、さまざまなテキスト アニメーション効果を作成するために使用されます。

使用方法

以下は、テキスト アニメーション特殊効果の 1 つの GIF ダイナミック画像デモンストレーション効果です:

このテキスト アニメーション特殊効果のセットを作成するための JS コードは、次のようになります:

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

anime.js の詳細 使用方法については、ドキュメントを参照してください。

このテキストアニメーション特殊効果の元のアドレスは次のとおりです: http://tympanus.net/codrops/2016/10/18/inspiration-for-letter-Effects/

上記は18種類のテキストアニメーション特殊効果ベースですanime.js コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。