'눈내리는 자바스크립트'에 해당되는 글 1건

  1. 2007.12.12 눈내리는 자바스크립트. 4


여러가지 소스를 찾아본 결과 이게 가장 나았다.
어떤것은 비처럼 쏟아지기도 하고.. 또 어떤건 싸락눈만큼 빠르면서 눈의 모양도 벌레같은 소스가 있었다.
여러가지를 테스트해보고 눈떨어지는 속도나 눈의 모양이 가장 적합한 것을 찾았다.
눈내리는 속도는 딱 이정도면 되겠다.
눈모양은 다음과 같다.(이게 눈이다 보니.. 배경이 까매야한다..)

사용자 삽입 이미지

소스의 출처 -
http://kin.naver.com/browse/db_detail.php?docid=870868

<html>
<head>
<title>snowing</title>

<style>
.drop { position: absolute; width: 3; filter: flipV(), flipH(); font-size: 40; color: gray }
</style>

<script language="JavaScript">
 <!--
  snow = true;      // false-비; true-눈
  snowsym = " * ";  // 눈
  rainsym = " ' ";  // 비
  howmany = 10;     // 눈/비 의 갯수

  if (snow) {
   sym = snowsym;
   speed = 1;
   angle = 10;
   drops = howmany;
  }
  else {
   sym = rainsym;
   speed = 50;
   drops = howmany;
   angle = 6;
  }
  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+10; }
    if (yy[move] > maxy) { yy[move] = 10; }
    drop[move].left = xx[move]
    drop[move].top = yy[move]+document.body.scrollTop;
  }
  setTimeout('moverain()','1')}
 //-->
</script>
</head>

<body bgcolor=black>
<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-40;
    maxy = document.body.clientHeight-40;
    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/4;
    drop[make].fontSize = (Math.random()*10)+20;
    if (snow) { col = 'white'; }
    else{ col = 'gray'; }
    drop[make].color = col;
   }
   window.onload=moverain;
  }
 //-->
</script>
</body>
</html>

Posted by Ozahir
,