타이핑모션

$(window).on('load', function(){
							$('.typing').each(function(){
								var txt = $(this).text();
								var hei = $(this).outerHeight();

$(this).css({'display':'inline-block'}).html('<span class="dataTxt" style="display:none;">' + txt + '</span>');
							});

typing();
						});

function typing(){
							$('.typing').each(function(){
								var spd = 100;// 타이핑 속도
								var txt = $(this).find('.dataTxt').text();
								var len = txt.length;
								var stop = (len + 1) * spd;

$(this).addClass('on');

$(this).find('.reTxt').remove();
								$(this).append('<span class="reTxt"></span>');

var $this = $(this).find('.reTxt');

var count = 0;
								var inter = setInterval(function(){
									count ++;
									$this.text(txt.substring(0, count));

$this.closest('.typing').css({'opacity':'1'});
								}, spd);

setTimeout(function(){
									clearInterval(inter);
									$this.text(txt);
									setTimeout(function(){
										$this.closest('.typing').removeClass('on');
									}, 500);
								}, stop);
							});
						}

타이핑모션

예제

코드

- html

- css

- script