프론트엔드/Java Script
자바스크립트 : 타자효과 타이핑 텍스트 출력
Khookie
2020. 11. 13. 04:30
자바스크립트가 제이쿼리보다 표현이 쉬운것 같아서 좋네요..
페이지에 들어가면 텍스트가 타자기처럼 타이핑된 후
다시 차례로 지워지는 모습입니다.
아날로그 하지 않지만 마치 아날로그 타자기로 치는것같은 기분이 들어요
요즘같이 빠른 모바일 시대에서는
스마트한 기능없이 하는 사람의 입력 자체가 감성을 표현하는 방법이 되겠네요
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD> <TITLE> New Document </TITLE> </HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
str="사각사각 오늘도 쿠키랩은 글을씁니다";
var pos=0;
var lg=str.length;
function taza_text(){
document.form1.text1.value=str.substring(0,pos)+"_";
if(pos++ ==lg){
pos=1;
setTimeout("taza_back()",1000);
} else
setTimeout("taza_text()",180);
}
function taza_back(){
document.form1.text1.value=str.substring(0,lg-pos)+"_";
if(pos++ ==lg){
pos=0;
setTimeout("taza_text()",1000);
} else
setTimeout("taza_back()",180);
}
</SCRIPT></HEAD>
<BODY BGCOLOR=Brown onLoad="taza_text()">
<FORM NAME="form1">
<input type="text" name="text1" size="80"/>
</FORM>
</BODY>
</HTML>
*-도움이 되었다면 공감을 눌러주세요-*
< IT연구소 쿠키 랩 />