다이나믹한 텍스트 애니메이션 jQuery 플러그인 모음

shuffleLetters.js

텍스트를 애니메이션 효과로 섞어 보여주는 효과를 구현하는 플러그인. 해당 텍스트가 무작위로 섞이면서 최종적으로 원래의 텍스트로 다시 정렬 되는 애니메이션을 구현한다. 옵션으로 텍스트가 표시되는 속도 등을 조절 할 수도 있고 특정 텍스트에 마우스를 올렸을 때만 작동할 수도 있다.

 

사용법

<div class="example">
	안녕하세요. 닌니디자인 입니다. <br/>블로그 방문을 환영합니다.
</div>

$(document).ready(function() {
	$(".example").shuffleLetters({
        "step": 8,                 // 각 반복에서 섞일 글자 수
        "fps": 25,                 // 초당 프레임 수, 애니메이션의 속도를 결정
        "text": "Custom text",     // 애니메이션 완료 후 나타낼 최종 텍스트
        "callback": function() {   // 애니메이션 완료 후 실행할 함수
            console.log("Animation is completed!");
        }
    });
});

 

다운로드 및 데모

Shuffle Letters Effect: a jQuery Plugin

 

 

 

---

 

textEffect.js

텍스트에 다양한 애니메이션 효과를 적용할 수 있는 플러그인. shuffleLetters.js와 마찬가지로 해당 텍스트가 무작위로 섞이면서 최종적으로 원래의 텍스트로 다시 정렬 되는 애니메이션을 구현하고 텍스트가 나타나는 방식을 조절할 수 있다. 

 

사용법

<div class="example">
	안녕하세요. 닌니디자인 입니다. <br/>블로그 방문을 환영합니다.
</div>

$(document).ready(function() {
	$(".example").textEffect({
        effect: 'fadeIn', // 효과 fadeIn, slide, wave, blink 등
        duration: 1000,   // 애니메이션 지속시간
        repeat: true      // 반복여부
    });
});

 

다운로드 및 데모

jquery.textEffect.js

 

 

---

 

textillate.js

텍스트에 복잡하고 독특한 애니메이션 효과를 적용해주는 플러그인. animate.css 와 lettering.js 라이브러리를 결합하여 각 글자별로 애니메이션을 적용할 수 있고 다양한 효과를 줄 수 있다.

 

사용법

<div class="example">
	안녕하세요. 닌니디자인 입니다. <br/>블로그 방문을 환영합니다.
</div>

$(document).ready(function() {
	$(".example").textillate({
        loop: true,            // 반복여부
        minDisplayTime: 400,   // 애니메이션의 최소 표시 시간
        initialDelay: 0,       // 초기 지연시간
        autoStart: true,       // 페이지 로드시 자동으로 시작
        in: {                  // 애니메이션 시작 효과
            effect: 'fadeInLeft',
            delayScale: 1.5,   // 각 문자의 애니메이션 지연 요소
            delay: 50          // 각 문자 사이의 지연 속도
        },
        out: {
            effect: 'fadeOutRight',
            delayScale: 1.5,
            delay: 50
        }
    });
});

 

다운로드 및 데모

Textillate.js

 

 

 

---

 

t.js

텍스트에 타이핑 효과를 주는 라이브러리. 사용이 간편하고 용량이 가벼운 장점이 있다. 

 

사용법

<pre id="demo_1">
######<ins><span id="pow-txt" style="display:none;color:tomato;">---[POW!]</span></ins>
##<del>\<ins>1.5</ins></del><del id="pow-trigger">|</del>\
</pre>

$(document).ready(function() {
	$('.example').t({
		delay:2,                   // 타이핑 지연 속도
  
		speed:50,                  // 타이핑 속도
		speed_vary:false,          // 속도 변화

		beep:true,                 // 입력 중 경고음 발생

		mistype:3,                 // 잘못 입력한 비율
		locale:'en',               // 키보드 레이아웃
        
		caret:'\u2589',            // 캐럿 내용
		blink:true,                // 깜빡임 
		blink_perm:false,          // 깜빡임 반복여부 (false - 지연, 일시정지, 종료시에만 깜빡임)
		repeat:0,                  // 입력반복
		tag:'span',                // 래퍼 태그
		pause_on_click:true,       // 클릭/탭 시 입력을 일시중지 
		pause_on_tab_switch:true,  // 창이 비활성화 된 경우 일시중지
	});
});

 

다운로드 및 데모

GitHub - mntn-dev/t.js: ⌨️ Lightweight $.Hypertext.Typewriter