anime.js를 기반으로 한 18가지 텍스트 애니메이션 특수 효과

간단한 튜토리얼

anime.js를 기반으로 한 텍스트 애니메이션 특수 효과입니다. 이러한 텍스트 효과는 전면 및 후면 탐색 버튼을 통해 텍스트를 전환할 때 다양한 텍스트 애니메이션 효과를 만드는 데 사용됩니다.

사용 방법

다음은 텍스트 애니메이션 특수 효과 중 하나의 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/

위 내용은 anime.js의 텍스트 애니메이션 특수 효과를 기반으로 한 18가지 관련 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!