<head>와 </head> 사이에 들어갈 스크립트소스입니다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<style>
.drop { position: absolute; width: 1; filter: flipV(), flipH(); font-size: 20; color: blue }
</style>
<script language="javascript">
//Rain/Snow effect- By Craig Blanchette Craiga.topcities.com
//Script featured on Dynamic Drive
//Visit
//www.dynamicdrive.com for this script and more
snow = true; // false-rain; true-snow
snowsym = " * " //These are the symbols for each
rainsym = " ' " //You can put images here.
howmany = 30 //How many drops/snowflakes?
/**************Do not need to change anything below***********/
if(snow){sym = snowsym; speed=1; angle=5; drops=howmany}
else{sym = rainsym; speed=1; drops=howmany; angle=3}
movex = -speed/angle; movey = speed; count = 0;
function moverain(){
for(move = 0; move < drops; move++){
xx[move]+=movex; yy[move]+=mv[move];
hmm = Math.round(Math.random()*1);
if(xx[move] < 0){xx[move] = maxx+5;}
if(yy[move] > maxy){yy[move] = 5;}
drop[move].left = xx[move]
drop[move].top = yy[move]+document.body.scrollTop;
}setTimeout('moverain()','1')}
</script>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
위의 소스를 <head>와 </head> 사이에 잘 적용했으면.. 또하나더..문서의 마지막부분.
즉, 제일끝부분에 다른 스크립트 하나를 더 넣으셔야 제대로 작동을 합니다.
아래 소스를 문서의 마지막 끝부분에 복사해서 넣어보십시요.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<script language="javascript">
if (document.all){
drop = new Array(); xx = new Array(); yy = new Array(); mv = new Array()
ly = "document.all['"; st = "'].style"
for(make = 0; make < drops; make++){
document.write('<div id="drop'+make+'" class=drop>'+sym+'</div>');
drop[make] = eval(ly+'drop'+make+st);
maxx = document.body.clientWidth-20
maxy = document.body.clientHeight-20
xx[make] = Math.random()*maxx;
yy[make] = -100-Math.random()*maxy;
drop[make].left = xx[make]
drop[make].top = yy[make]
mv[make] = (Math.random()*5)+speed/5;
drop[make].fontSize = (Math.random()*10)+10;
if(snow){col = 'gray'}else{col = 'blue'}
drop[make].color = col;
}
window.onload=moverain
}
</script>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
알맞게 적용하셨으면 문서를 저장한후 웹페이지에서 작동이 잘 되는지 확인해보십시요.
아마 복사만 잘하셔서 넣으셨다면 아무런 문제없이 잘 되리라 봅니다..^^
그럼 간단하게 적용된 스크립트 소스에서 몇가지만 여러분께 알려드리겠습니다.
먼저 head 에 적용된 소스를 보시면.....
snow = true; // false-rain; true-snow
위와 같은 소스가 있죠? 이부분은 snow = true; 즉.. 뒤에 달린 주석을 보시면 아시겠지만
true 일때 눈(snow)이 내린다는 겁니다. 그럼 당연히 false 일때는 비(rain)가 되겠죠?
이 부분은 텍스트로 적용할때 사용하시면 되며 이미지로 뭔가할때는 불필요하겠죠.
비든 눈이든 이미지를 만들어 그 이미지만 불러오면 되니까요..^^;
snowsym = " * "
바로 아래부분에 snowsym에 내리는 눈 모양을 넣으시면 됩니다.
텍스트라 별다른걸 넣을수 없기에 그냥 * 을 넣었습니다.
rainsym = " ' " //You can put images here.
주석을 보시면 아시겠지만.. 비로 사용하실 경우
비를 표현하는 이미지 또는 텍스트를 설정하는 부분입니다.
howmany = 30
이부분은 내리는 눈(비) 의 양을 설정하는 부분입니다.
적당히 조절하시면 되겠습니다. 그리고, 바로 아래부분을 보겠습니다. 바로 밑부분에..
if(snow){sym = snowsym; speed=1; angle=5; drops=howmany}
else{sym = rainsym; speed=30; drops=howmany; angle=3}
소스가 보이시죠??
여기서 보면..위에 소스는 눈(snow)으로 사용할경우에 해당하는 옵션이며
아래부분은 당연히.. 비(rain)으로 사용할 경우에 해당하는 옵션입니다.
자기가 쓰는 것에 따라 적당히 조절하시면 됩니다. 다른건 보실필요없이 php 에서
인클루드한것과 같은것이니 두가지만 조정하시면 됩니다.
speed=1; ◀ 내리는 속도를 조정합니다
angle=5; ◀ 내리는 기울기..비스듬하게 혹은 직선으로..
대강 끝났습니다..^^;; 마지막으로 가장 중요한 한가지..
즉, 텍스트로 할 경우 배경에 따라 눈에 잘띠는 색으로 지정해줘야겠죠??
그 부분을 설정하는 곳은 head 넣은 스크립트가 아니라.. 제일 하단부에 넣은
스크립트소스에 있습니다. 문서의 가장 아랫부분으로 이동해서 보시면..
if(snow){col = 'gray'}else{col = 'blue'}
위와 같은 부분이 있습니다. 눈일경우 색을 지정하는 부분입니다.
여기서 뒷부분은 지정안하셔도 상관없으니 제껴두시고.. 앞부분을 수정하시면 됩니다.
예를 들어 흰색으로 하실꺼면(현재는 gray-회색으로 되어있음)....
if(snow){col = 'white'}else{col = 'blue'}
위와같이 바꿔주시면 됩니다. 잘 쓰시길 바랍니다..^-^
