타입엔진 소스

텍스트의 FadeIn / FadeOut 효과를 이용한 텍스트 애니메이션

작성자
작성일
2013-07-03
컨셉
여러개의 텍스트를 서로 다른 속도로 fadeToogle하여
나무잎사귀가 파릇파릇 피어나는 애니메이션을 구현해보았습니다.
다양한 크기로 배치된 굵은폰트가 나무의 볼륨감을 더해주네요~
아래에 공개된 소스를 원하시는 텍스트로 바꿔서 자유롭게 표현해보세요.
- 사용된 웹폰트 : HY고딕950
소스
<!-- 스타일 -->
<style>
#src_tree {position:relative; width:750px; height:480px; background:url('http://www.typeengine.co.kr/images/src/bg_tree.png') no-repeat; color:#fff; overflow:hidden; }
#src_tree  div {position:absolute; display:none;}
#src_tree .tts {top:100px; left:360px; font-size:30px;}
#src_tree .html5 {top:135px; left:295px; font-size:24px;}
#src_tree .seo {top:130px; left:385px; font-size:40px;}
#src_tree .css3 {top:170px; left:265px; font-size:36px;}
#src_tree .javascript {top:180px; left:355px; font-size:24px;}
#src_tree .typeengine {top:215px; left:170px; width:200px;	text-align:right;}
#src_tree .typeengine .txt0 {font-size:56px; line-height:56px;}
#src_tree .typeengine .txt1 {font-size:46px; line-height:50px;}
#src_tree .dynamic {top:325px; left:215px; font-size:18px;}
#src_tree .semantic {top:355px; left:245px; font-size:16px;}
#src_tree .cloud {top:220px; left:415px;}
#src_tree .cloud .txt0 {font-size:36px; line-height:36px; margin-left:20px;}
#src_tree .cloud .txt1 {font-size:50px; line-height:40px;}
#src_tree .cloud .txt2 {font-size:28px; margin-left:10px;line-height:36px;}
#src_tree .cloud .txt3 {font-size:36px; line-height:36px;}
#src_tree .webfont {top:360px; left:415px; line-height:40px; font-size:16px;}
</style>


<!-- 웹폰트 스크립트 --> 
<STYLE>
@font-face{font-family:"wHYGothic950"; src: url("http://load.typeengine.co.kr/?subset");}
div {font-family:"wHYGothic950";}
</STYLE>
<SCRIPT id="TypeEngine" type="text/javascript" src="http://www.typeengine.co.kr/js/hy-1.1.js?client_c=7777777777"></SCRIPT>


<!-- 본문 -->
<div id="src_tree" class="wHYGothic950">
	<div class="tts">TTS</div>
	<div class="html5">HTML5</div>
	<div class="seo">TEXT</div>
	<div class="css3">CSS3</div>
	<div class="javascript">JavaScript</div>
	<div class="typeengine">TYPE ENGINE</div>
	<div class="dynamic">Dynamic Design</div>
	<div class="semantic">Semantic Web</div>
	<div class="cloud">Cloud Font Streaming Service</div>
	<div class="webfont">Webfont</div>
</div>


<!-- 텍스트 애니메이션 스크립트 --> 
<script type="text/javascript" src="http://www.typeengine.co.kr/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
//애니메이션 함수
var tree = function(){
	Ani();
	setInterval(function(){Ani();}, 4000);

	function Ani(){
		$("#src_tree").children("div").each(function(i){
			//delay와 fadeToggle 속도를 랜덤하게 처리
			$(this).delay( RD( 100, 1000 ) ).fadeToggle( RD( 500, 3000 ) );
		});
	}

	function RD( min, max ){
		return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
	}
};

$(document).ready(function(){
	//텍스트를 재배열
	(function setTxt(){		
		$.each( ['.typeengine' , '.cloud'], function( index, value ){
			txt = "";
			$.each( $(value).text().split(" "), function( subNo, subVal ){
				txt += '<span class="txt' + subNo + '">' + subVal ;
				txt += '</span><br/>';
			});
			$( value ).html( txt );
		});
	})();

	//애니메이션 함수 호출
	tree();
});
</script>
목록
덧글
이름
비밀번호
0 / 250자
작성
**
우와! 텍스트가 송글송글 피어나네요!
비주얼과 메세지 전달이 함께 표현되는 아주 유용한 소스네요. 잘 사용하겠습니다. 덧글삭제
2013-03-26
금석
아주 좋습니다. ㄴ이라ㅓㄷ쟈ㅕㄹㄴㅁ 덧글삭제
2013-03-21
  • 1

이 글을 삭제하시겠습니까?
비밀번호를 입력해주세요.

확인
취소
알려드립니다!
서비스 사양이 변경될 경우, 타입엔진소스에서 배포한 코드의 사용이 종료되어 웹폰트가 보이지 않을 수 있습니다.