>  기사  >  웹 프론트엔드  >  텍스트에 애니메이션을 적용하는 JavaScript 코드

텍스트에 애니메이션을 적용하는 JavaScript 코드

php中世界最好的语言
php中世界最好的语言원래의
2018-03-16 16:18:412556검색

이번에는 텍스트에 애니메이션을 적용하는 JavaScript 코드를 가져오겠습니다. JavaScript 코드를 사용하여 텍스트에 애니메이션을 적용할 때 주의사항은 무엇인가요?

때로는 텍스트에 애니메이션을 추가하여 텍스트 안의 모든 단어를 움직이게 만들고 싶을 때가 있습니다. 이 효과를 얻으려면 다음 jQuery플러그인 코드를 사용할 수 있습니다. 물론 더 나은 결과를 얻으려면 CSS3 전환 스타일을 결합해야 합니다.

$.fn.animateText = function(delay, klass) {  
  var text = this.text();  var letters = text.split('');  
  return this.each(function(){    var $this = $(this);
    $this.html(text.replace(/./g, &#39;<span class="letter">$&</span>&#39;));
    $this.find(&#39;span.letter&#39;).each(function(i, el){
      setTimeout(function(){ $(el).addClass(klass); }, delay * i);
    });
  });
  
};

사용 방법:

$(&#39;p&#39;).animateText(15, &#39;foo&#39;);

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트기타관련 기사를 주목하세요!

추천 자료:

날짜가 유효한지 확인하는 JavaScript 코드 조각

Node.js의 이벤트 루프에 대한 자세한 설명

JavaScript 실행 메커니즘에서 JavaScript가 단일 스레드인 이유

위 내용은 텍스트에 애니메이션을 적용하는 JavaScript 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.