여러군데 흩어졌다가 차례대로 정열되는 텍스트 메세지들
여러가지 색갈로 흩어졌다가 모여 보여주는 텍스트 애니메이션 스크립트 입니다
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> script </title>
</head>
<body>
<!---- 아래의 방법으로 <BODY> 와 </BODY> 태그 사이에 붙여 넣으세요 --->
<SCRIPT>
var text=new Array()
var textsplashcolors=new Array()
// 메세지를 설정 하세요
text[0]="자바스크립트 소스뱅크, 소스창고에 오신것을 환영합니다."
text[1]="J@SKO is the best JavaScript Source Bank"
text[2]="Have a nice Day with funny JavaScript"
text[3]="동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세"
text[4]="대한사람 대한으로 길이 보전하세요"
// 색상들을 설정 합니다
textsplashcolors[0]="#000000"
textsplashcolors[1]="#ff0000"
textsplashcolors[2]="#008800"
textsplashcolors[3]="#0000ff"
textsplashcolors[4]="#880088"
textsplashcolors[5]="#ff9700"
// 글꼴
var textfont="굴림"
// 글자의 크기
var textfontsize=12
// 네츠케이프 4 용 글꼴 설정
var textfontsizeHTML=3
//메세지간의 간격(초)
var textpause=3
var textweight="bold"
var textweightA="<b>"
var textweightB="</b>"
var textitalic="normal"
var textitalicA=""
var textitalicB=""
var textalignabsolute="topleft"
var letterwidth=new Array()
var messagewidth=0
var messageheight=0
var i_colors=0
var letterspace=Math.floor(textfontsize/1.3)
var timer
var i_text=0
var textsplitted
var i_textpath=0
var endpause=1
var endpausemilli=endpause*10
var maxtextlength=0
var i_endposition=0
var windowwidth=0
var windowheight=0
var windowwidthfactor=1
var windowheightfactor=1
var i_span=0
var startposmax_x=0
var startposmax_y=0
textpause*=1000
var x_step=new Array()
var y_step=new Array()
var x_finalpos=new Array()
var y_finalpos=0
var max_loop=20
var i_loop=0
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0
for (i=0;i<=text.length-1;i++) {
if (text[i].length>=maxtextlength) {maxtextlength=text[i].length}
}
for (i=0;i<=text.length-1;i++) {
text[i]=text[i]+" "
}
var xpos=new Array()
for (i=0;i<=maxtextlength;i++) {
xpos[i]=5000
}
var ypos=new Array()
for (i=0;i<=maxtextlength;i++) {
ypos[i]=5000
}
function randomizer(range) {
return Math.floor(range*Math.random())
}
function getpagesize() {
if (ie) {
windowheight=parseInt(document.body.clientHeight)
windowwidth=parseInt(document.body.clientWidth)
}
if (ns4 || ns6) {
windowheight=parseInt(window.innerHeight)
windowwidth=parseInt(window.innerWidth)
}
startposmax_x=windowwidth-2*parseInt(textfontsize)
startposmax_y=windowheight-2*parseInt(textfontsize)
changecontent()
}
function changecontent() {
messagewidth=0
var textsa=text[i_text]
textsplitted=textsa.split("")
if (ie) {
for (i=0;i<=textsplitted.length-1;i++) {
var thisspan=eval("document.all.span"+i)
thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+";font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+";text-align:center'>"+textsplitted[i]+"</span>"
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
letterwidth[i]=Math.round(thisspan.offsetWidth*1.2)
if (letterwidth[i]==0) {letterwidth[i]=parseInt(textfontsize)}
messagewidth+=letterwidth[i]
messageheight=Math.round(document.all.span0.offsetHeight)
}
}
if (ns6) {
for (i=0;i<=textsplitted.length-1;i++) {
var thisspan=eval(document.getElementById('span'+i))
thisspan.innerHTML="<span style='font-family:"+textfont+";font-size:"+textfontsize+";font-style:"+textitalic+";font-weight:"+textweight+";color:"+textsplashcolors[i_colors]+"'>"+textsplitted[i]+"</span>"
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
letterwidth[i]=Math.round(parseInt(thisspan.offsetWidth)*1.2)
if (letterwidth[i]==0) {letterwidth[i]=textfontsize}
messagewidth+=letterwidth[i]
messageheight=Math.round(document.getElementById('span0').offsetHeight)
}
}
if (ns4) {
for (i=0; i<textsplitted.length-1; i++) {
var thisspan=eval("document.span"+i+".document")
thisspan.write("<p><font size="+textfontsizeHTML+" color="+textsplashcolors[i_colors]+" face="+textfont+">"+textitalicA+textweightA+textsplitted[i]+textweightB+textitalicB+"</font></p>")
thisspan.close()
letterwidth[i]=Math.round(thisspan.width*1.2)
if (letterwidth[i]==0) {letterwidth[i]=textfontsize}
messagewidth+=letterwidth[i]
messageheight=Math.round(document.span0.document.height)
thisspan.clear()
i_colors++
if (i_colors>textsplashcolors.length-1) {i_colors=0}
}
for (i=0; i<textsplitted.length-1; i++) {
var thisspan=eval("document.span"+i)
thisspan.visibility="show"
}
}
i_text++
if (i_text>=text.length) {i_text=0}
getfinalpos()
}
function getfinalpos() {
if (ie || ns6) {var padding_x=100}; if (ns4) {var padding_x=40};
if (ie || ns6) {var padding_y=80}; if (ns4) {var padding_y=40};
if (textalignabsolute=="middlecenter") {
x_finalpos[0]=(windowwidth-messagewidth)/2
y_finalpos=(windowheight-messageheight)/2
}
else if (textalignabsolute=="topleft") {
x_finalpos[0]=5
y_finalpos=0
}
else if (textalignabsolute=="topcenter") {
x_finalpos[0]=(windowwidth-messagewidth)/2
y_finalpos=0
}
else if (textalignabsolute=="topright") {
x_finalpos[0]=windowwidth-messagewidth
y_finalpos=0
}
else if (textalignabsolute=="bottomleft") {
x_finalpos[0]=5
y_finalpos=windowheight-messageheight
}
else if (textalignabsolute=="bottomcenter") {
x_finalpos[0]=(windowwidth-messagewidth)/2
y_finalpos=windowheight-messageheight
}
else if (textalignabsolute=="bottomright") {
x_finalpos[0]=windowwidth-messagewidth
y_finalpos=windowheight-messageheight
}
for (i=1;i<textsplitted.length-1;i++) {
x_finalpos[i]=x_finalpos[i-1]+letterwidth[i-1]
}
gotostartpos()
}
function gotostartpos() {
if (ie) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.all.span"+i+".style")
thisspan.posLeft=randomizer(startposmax_x)
thisspan.posTop=randomizer(startposmax_y)
}
}
if (ns4) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.span"+i)
thisspan.left=randomizer(startposmax_x)
thisspan.top=randomizer(startposmax_y)
}
}
if (ns6) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.getElementById('span'+i).style")
thisspan.left=randomizer(startposmax_x)
thisspan.top=randomizer(startposmax_y)
}
}
gotostandstillpos()
}
function gotostandstillpos() {
if (ie) {
if (i_loop<=max_loop-1) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.all.span"+i+".style")
x_step[i]=(x_finalpos[i]-thisspan.posLeft)/(max_loop-i_loop)
y_step[i]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)
thisspan.posLeft+=x_step[i]
thisspan.posTop+=y_step[i]
}
i_loop++
var timer=setTimeout("gotostandstillpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("gotoendpos()",textpause)
}
}
if (ns4) {
if (i_loop<=max_loop-1) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.span"+i)
x_step[i]=(x_finalpos[i]-thisspan.left)/(max_loop-i_loop)
y_step[i]=(y_finalpos-thisspan.top)/(max_loop-i_loop)
thisspan.left+=x_step[i]
thisspan.top+=y_step[i]
}
i_loop++
var timer=setTimeout("gotostandstillpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("gotoendpos()",textpause)
}
}
if (ns6) {
if (i_loop<=max_loop-1) {
for (i=0;i<textsplitted.length-1;i++) {
var thisspan=eval("document.getElementById('span'+i).style")
x_step[i]=(x_finalpos[i]-parseInt(thisspan.left))/(max_loop-i_loop)
y_step[i]=(y_finalpos-parseInt(thisspan.top))/(max_loop-i_loop)
thisspan.left=parseInt(thisspan.left)+x_step[i]
thisspan.top=parseInt(thisspan.top)+y_step[i]
}
i_loop++
var timer=setTimeout("gotostandstillpos()",20)
}
else {
i_loop=0
clearTimeout(timer)
timer=setTimeout("gotoendpos()",textpause)
}
}
}
function gotoendpos() {
if (ie) {
if (i_loop<=textsplitted.length-1) {
var thisspan=eval("document.all.span"+i_loop+".style")
thisspan.posLeft=-1000
i_loop++
var timer=setTimeout("gotoendpos()",10)
}
else {
clearTimeout(timer)
i_loop=0
var timer=setTimeout("changecontent()",400)
}
}
if (ns4) {
if (i_loop<=textsplitted.length-1) {
var thisspan=eval("document.span"+i_loop)
thisspan.left=-1000
i_loop++
var timer=setTimeout("gotoendpos()",10)
}
else {
clearTimeout(timer)
i_loop=0
changecontent()
}
}
if (ns6) {
if (i_loop<=textsplitted.length-1) {
var thisspan=eval("document.getElementById('span'+i_loop).style")
thisspan.left=-1000
i_loop++
var timer=setTimeout("gotoendpos()",10)
}
else {
clearTimeout(timer)
i_loop=0
changecontent()
}
}
}
if (ie) {
for (i=0;i<=maxtextlength;i++) {
document.write("<span id='span"+i+"' style='position：absolute'>")
document.write("</span>")
}
window.onload=getpagesize
}
if (ns6) {
for (i=0;i<=maxtextlength;i++) {
document.write("<span id='span"+i+"' style='position：absolute'>")
document.write(textsplitted)
document.write("</span>")
}
window.onload=getpagesize
}
if (ns4) {
for (i=0;i<=maxtextlength;i++) {
document.write("<layer name='span"+i+"' visibility=hide>")
document.write(textsplitted)
document.write("</layer>")
}
window.onload=getpagesize
}
</script>
<!------------------------- 여기까지 ------------------------------------>
</body>
</html>
댓글 0
- 전체
- 자유게시판
- 컴퓨터/IT
- 연애/결혼
- 생활지혜/상식
- 홍보팁
- 재테크/카드
- 카페/블로그
- 여행
- 부부생활
- 심리
- 음악/미술
- 법률
- 건강
- 역사
- 인테리어/DIY
- 밀리터리
- 해외직구
- 예능/영화
- 미스테리
- 임신/육아
- 다이어트
- 음식/주방/요리
- 운전/자동차
- 낚시
- 휴대폰
- 운동
- 게임/만화
- 취업/알바/부업
- 사진
- 이사/이민
- 패션/뷰티
- 경제/주식
- 부동산
- 그 외..
| 번호 | 제목 | 글쓴이 |
|---|---|---|
| 3421 | 심장 건강에 좋은 습관 8가지 [1] | 뉴퐁 |
| 3420 | 잠잘 때 왼쪽으로 자면 생기는 신체 변화 7가지 [2] | 뉴퐁 |
| 3419 | 스트레스를 줄이는 놀라운 방법 6가지 [2] | 싹쓰리 |
| 3418 | 여성이 팬티에 대해 알아야 할 7가지 [3] | 싹쓰리 |
| 3417 | 끓였던 물을 또 끓이면 안 되는 이유 [1] | 싹쓰리 |
| 3416 | "치주염 환자, 코로나 감염 땐 사이토카인 폭풍 가능성 높아" [1] | 쌍둥이맘 |
| 3415 | 스마트스토어 상위 노출 꿀팁. 경쟁률 낮은 세부키워드 뽑는 방법 [2] | 나혼자번다 |
| 3414 |
열감지 안면인식 출입관리솔루션 400만원짜리를 40만원에(정부지원사업)
[1]  | 나혼자번다 |
| 3413 | 전자렌지요리 만능 레시피 대공개!! [3] | 나혼자번다 |
| 3412 | 식초로 집안을 반짝반짝하게!! 식초 청소법 [4] | 쌍둥이맘 |
| 3411 | 마시고 남은 김빠진 맥주 활용법 [2] | 쌍둥이맘 |
| 3410 | 계란을 먹은 후 절대 바로 먹으면 안되는 것들 | 쌍둥이맘 |
| 3409 | 아주 유용한 커피상식 | 쌍둥이맘 |
| 3408 | 간 건강과 지방간 완화에 아주 효과적인 채소는? [2] | 싹쓰리 |
| 3407 | 골다공증 예방과 뼈에 아주 좋은 음식 8가지 | 싹쓰리 |
| 3406 | 체했을 때, 감기 걸렸을 때, 관절염 통증에는 이것이 최고!! | 싹쓰리 |
| 3405 | 장을 편안하게 하면서 소화를 돕는 식품 5가지 [1] | 싹쓰리 |
| 3404 | 초보운전자가 반드시 알아야 하는 고속도로 운전매너 5 [1] | 싹쓰리 |
| 3403 | 머리카락이나 두피를 상하게 하는 사소한 습관 5 | 라이믹스 |
| 3402 | 어둡고 칙칙한 피부를 환하게 해주는 필수적인 습관 5 | 라이믹스 |