Schneefall (3)

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Schneefall (3)

Beitrag von Hape »

Code: Alles auswählen

<script type="text/javascript">
<!--
var speed=33; // lower number for faster
var flakes=100; // number of flakes
var colour="#FFFFFF"; // colour of flakes
var slush=0; // set to '0' for no slush or otherwise set to height at which slush melts

/***************************\
*     Let It Snow Effect    *
*(c) 2004-6 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var slss=new Array();
var slsh=new Array();
var swide, shigh;
window.onload=function() { if (document.getElementById) {
  var b, s;
  b=document.createElement("div");
  s=b.style;
  s.position="absolute";
  b.setAttribute("id", "bod");
  document.body.appendChild(b);
  set_scroll();
  set_width();
  for (var i=0; i<flakes; i++) {
    flks[i]=createDiv(3, 3);
    flkx[i]=3*Math.floor(Math.random()*swide/3);
    flky[i]=Math.floor(Math.random()*shigh);
    fldy[i]=2+Math.floor(Math.random()*4);
    flks[i].style.left=flkx[i]+"px";
    flks[i].style.top=flky[i]+"px";
    b.appendChild(flks[i]);
  }
  setInterval("let_it_snow()", speed);
}}

function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}

window.onresize=set_width;
function set_width() {
  if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
  swide-=3;
  if (slush) {
    if (swide/3>slss.length) for (var i=slss.length; i<swide/3; i++) {
      slss[i]=createDiv(3, 3);
      slss[i].style.left=3*i+"px";
      document.getElementById("bod").appendChild(slss[i]);
      slsh[i]=3;
    }
    for (var i=0; i<swide/3; i++) slss[i].style.top=shigh-slsh[i]+"px";
  }
}

window.onscroll=set_scroll;
function set_scroll() {
  var sleft, sdown;
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
  var s=document.getElementById("bod").style;
  s.top=sdown+"px";
  s.left=sleft+"px";
}

function let_it_snow(c) {
  var i, x, o=0;
  for (i=0; i<flakes; i++) {
    flky[i]+=fldy[i];
    x=flkx[i]/3;
    if (slush) o+=slsh[x];
    if (flky[i]>=shigh-(slush?slsh[x]:0)) {
      if (slush) {
        if (x<swide && slsh[x]>slsh[x+1]+3) x++;
        else if (x>0 && slsh[x]>slsh[x-1]+3) x--;
        slss[x].style.top=shigh-(slsh[x]+=3)+"px";
        slss[x].style.height=slsh[x]+"px";
      }
      flky[i]=0;
      fldy[i]=2+Math.floor(Math.random()*4);
      flkx[i]=3*Math.floor(Math.random()*swide/3);
      flks[i].style.left=flkx[i]+"px";
    }
    flks[i].style.top=flky[i]+"px";
  }
  if (o>flakes*slush) {
    for (i=0; i<swide/3; i++) if (slsh[i]>1) slsh[i]--;
    set_width();
  }
}
  -->
</script>
Demoseite: https://hapes-javascript-demo-page.hpag ... hnee4.html

Antworten