Не работает скрипт (падающий снег)

5 Posts

Halumein Reply #1, 15 years, 10 months ago

Всем доброго времени суток. Приближается Новый год, хотелось бы придать сайту немного новогоднего колорита.
Нашёл в интернете скрипт падающего снега.

<script>    
// CREDITS:
// Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Modified (c) 2005, Igor Svetlov, Nickname: 12345c
// Permission given to use the script provided that this notice remains as is.
var snowmax=25  // Set the number of snowflakes (more than 30 - 40 not recommended)
var snowcolor=["#c4bbcc","#ccddFF","#ccd6DD"]
    // Set the colors for the snow. Add as many colors as you like
var snowtype=["Arial Black","Arial Narrow","Times","Comic Sans MS"]
    // Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowletter=["*"];
    // Set the letter that creates your snowflake (recommended:*)
var sinkspeed=0.6   // Set the speed of sinking (recommended values range from 0.3 to 2)
var snowmaxsize=45  // Set the maximal-size of your snowflaxes
var snowminsize=18  // Set the minimal-size of your snowflaxes
    var snowsizerange=15
    // Set the snowing-zone
    // Set 1 for all-over-snowing, set 2 for left-side-snowing 
    // Set 3 for center-snowing, set 4 for right-side-snowing
var snowingleft=0.1 //левая граница присутствия снега
var snowingwidth=0.9    //ширина присутствия снега в окне
var opac=0.35       //непрозрачность снега (0.0-1.0), при 1.0 в 2 раза быстрее работает.
var stepTime=120    //шаг покадровой анимации (мсек). При менее 100 сильно нагружает процессор
var snow=new Array()
var marginbottom
var marginright
var timer
var x_mv=new Array();   var crds=new Array();   var lftrght=new Array();
var browserinfos=navigator.userAgent 
d=document
var isOpera=self.opera  
var ie5=d.all&&d.getElementById&&!isOpera
var ns6=d.getElementById&&!d.all
var browserok=ie5||ns6||isOpera

function randommaker(range){return Math.floor(range*Math.random())}

function botRight()
{
    if(ie5||isOpera)
    {
      marginbottom=d.body.clientHeight;  
      marginright=d.body.clientWidth;
    }
    else
      if(ns6)
      {
        marginbottom=innerHeight; marginright=innerWidth;
      }
}

function checkPgDn()
{
 scrltop=ns6?pageYOffset:document.body.scrollTop;
}

function initsnow() 
{
  checkPgDn();if(ns6)setInterval("checkPgDn()",999);
  botRight();
  for (i=0;i<=snowmax;i++)
  {
    crds[i] = 0;                      
    lftrght[i] = Math.random()*20;         
    x_mv[i] = 0.03 + Math.random()/10;
    snow[i]=d.getElementById("s"+i)
    snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
    snow[i].style.fontSize=snow[i].size=randommaker(snowsizerange)+snowminsize
    snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
    snow[i].sink=sinkspeed*snow[i].size/5
    newPosSnow(randommaker(marginbottom-3*snow[i].size));
  }
  movesnow();
}

function newPosSnow(y)
{
  var o;
  snow[i].posx=randommaker(marginright*snowingwidth-2*snow[i].size)+marginright*snowingleft
  snow[i].posy=y+(ns6?pageYOffset:d.body.scrollTop);
  snow[i].size=randommaker(snowsizerange)+snowminsize;
  if(snow[i].hasChildNodes()&&(o=snow[i].childNodes[0]).tagName=='IMG') o.width=o.height=randommaker(snowsizerange/1.6)+snowminsize;
}

function movesnow() 
{
  for (i=0;i<=snowmax;i++) 
  {
    snow[i].style.top=snow[i].posy+=snow[i].sink+lftrght[i]*Math.sin(crds[i])/3;
    crds[i] += x_mv[i];
    snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
    if(snow[i].posy>=marginbottom-3*snow[i].size+scrltop || parseInt(snow[i].style.left)>(marginright-3*lftrght[i]))newPosSnow(0);
  }
  var timer=setTimeout("movesnow()",stepTime)
}

for (i=0;i<=snowmax;i++)
{
  d.write("<span id='s"+i+"' style='position:absolute;"+(opac<1?"-moz-opacity:"+opac+";filter:alpha(opacity="+(opac*100)+")":"")+";top:-"+snowmaxsize+"'>"
    +snowletter[Math.floor(snowletter.length*Math.random())]+"</span>")
}           //-moz-opacity:0.5;filter:alpha(opacity=50);

onload=function()
{
  if(browserok)setTimeout("initsnow()",99);
}

onmousewheel = onscroll = function(){checkPgDn()}
onresize = function(){botRight();}
</script>

Если просто вставить в пустую html-cтраничку и запустить - всё отлично(кстати довольно милый вариант), а вот с modx’ом запарка.
Попытался вставить но ничего не вышло. Обращаюсь за помощью к сообществу.
Делал так: создал новый чанк, туда вставил этот код.
Далее пытался всюду впихнуть его(чанк) в сайт. результат: символ(один) "*" появляется и окрашивается, но и только.
Что необходимо сделать?

718 Posts

Paprikas Reply #2, 15 years, 10 months ago

А если выйти из админки?
А можно ссылку посмотреть?

5 Posts

Halumein Reply #3, 15 years, 10 months ago

Quote from: Paprikas at Dec 21, 2010, 11:43 AM

А если выйти из админки?

Попробовал. Не помогло.
Просто интересует с чем связано? Если просто код работает а под modx’ом - нет. Система как-то по-особенному его обрабатывает/интерпретирует?

385 Posts

Temus Reply #4, 15 years, 10 months ago

Скрипт очень старый, и работает только в Quirks Mode, то есть без указания правильного доктайпа. То есть в пустом файле он работать будет, а на сайте скорее всего нет. Чтобы он заработал, нужно указать единицы измерения, а именно:

snow[i].style.fontSize=snow[i].size=randommaker(snowsizerange)+snowminsize

заменить на

    snow[i].size=randommaker(snowsizerange)+snowminsize;
    snow[i].style.fontSize=snow[i].size+'px'

и

    snow[i].style.top=snow[i].posy+=snow[i].sink+lftrght[i]*Math.sin(crds[i])/3;
    crds[i] += x_mv[i];
    snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);

заменить на:

    snow[i].style.top=(snow[i].posy+=snow[i].sink+lftrght[i]*Math.sin(crds[i])/3)+'px';
    crds[i] += x_mv[i];
    snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';

5 Posts

Halumein Reply #5, 15 years, 10 months ago

Благодарю, заработало.
Для ленивых вот исправленный код чанка:

<script language="JavaScript1.2">
var snowmax=25  // Set the number of snowflakes (more than 30 - 40 not recommended)
var snowcolor=["#c4bbcc","#ccddFF","#ccd6DD"]
    // Set the colors for the snow. Add as many colors as you like
var snowtype=["Arial Black","Arial Narrow","Times","Comic Sans MS"]
    // Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowletter=["*"];
    // Set the letter that creates your snowflake (recommended:*)
var sinkspeed=0.6   // Set the speed of sinking (recommended values range from 0.3 to 2)
var snowmaxsize=45  // Set the maximal-size of your snowflaxes
var snowminsize=18  // Set the minimal-size of your snowflaxes
    var snowsizerange=1
    // Set the snowing-zone
    // Set 1 for all-over-snowing, set 2 for left-side-snowing 
    // Set 3 for center-snowing, set 4 for right-side-snowing
var snowingleft=0.2 //левая граница присутствия снега
var snowingwidth=0.9   //ширина присутствия снега в окне
var opac=0.35       //непрозрачность снега (0.0-1.0), при 1.0 в 2 раза быстрее работает.
var stepTime=120    //шаг покадровой анимации (мсек). При менее 100 сильно нагружает процессор
var snow=new Array()
var marginbottom
var marginright
var timer
var x_mv=new Array();   var crds=new Array();   var lftrght=new Array();
var browserinfos=navigator.userAgent 
d=document
var isOpera=self.opera  
var ie5=d.all&&d.getElementById&&!isOpera
var ns6=d.getElementById&&!d.all
var browserok=ie5||ns6||isOpera

function randommaker(range){return Math.floor(range*Math.random())}

function botRight()
{
    if(ie5||isOpera)
    {
      marginbottom=d.body.clientHeight;  
      marginright=d.body.clientWidth;
    }
    else
      if(ns6)
      {
        marginbottom=innerHeight; marginright=innerWidth;
      }
}

function checkPgDn()
{
 scrltop=ns6?pageYOffset:document.body.scrollTop;
}

function initsnow() 
{
  checkPgDn();if(ns6)setInterval("checkPgDn()",999);
  botRight();
  for (i=0;i<=snowmax;i++)
  {
    crds[i] = 0;                      
    lftrght[i] = Math.random()*20;         
    x_mv[i] = 0.03 + Math.random()/10;
    snow[i]=d.getElementById("s"+i)
    snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
    snow[i].size=randommaker(snowsizerange)+snowminsize;
    snow[i].style.fontSize=snow[i].size+'px'
    snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
    snow[i].sink=sinkspeed*snow[i].size/5
    newPosSnow(randommaker(marginbottom-3*snow[i].size));
  }
  movesnow();
}

function newPosSnow(y)
{
  var o;
  snow[i].posx=randommaker(marginright*snowingwidth-2*snow[i].size)+marginright*snowingleft
  snow[i].posy=y+(ns6?pageYOffset:d.body.scrollTop);
  snow[i].size=randommaker(snowsizerange)+snowminsize;
  if(snow[i].hasChildNodes()&&(o=snow[i].childNodes[0]).tagName=='IMG') o.width=o.height=randommaker(snowsizerange/1.6)+snowminsize;
}

function movesnow() 
{
  for (i=0;i<=snowmax;i++) 
  {
   snow[i].style.top=(snow[i].posy+=snow[i].sink+lftrght[i]*Math.sin(crds[i])/3)+'px';
    crds[i] += x_mv[i];
    snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
    if(snow[i].posy>=marginbottom-3*snow[i].size+scrltop || parseInt(snow[i].style.left)>(marginright-3*lftrght[i]))newPosSnow(0);
  }
  var timer=setTimeout("movesnow()",stepTime)
}

for (i=0;i<=snowmax;i++)
{
  d.write("<span id='s"+i+"' style='position:absolute;"+(opac<1?"-moz-opacity:"+opac+";filter:alpha(opacity="+(opac*100)+")":"")+";top:-"+snowmaxsize+"'>"
    +snowletter[Math.floor(snowletter.length*Math.random())]+"</span>")
}           //-moz-opacity:0.5;filter:alpha(opacity=50);

onload=function()
{
  if(browserok)setTimeout("initsnow()",99);
}

onmousewheel = onscroll = function(){checkPgDn()}
onresize = function(){botRight();}
</script>

Всех с наступающим Новым Годом!

115 Posts

bangman Reply #6, 15 years, 10 months ago

Я на своем www.myadel.info использую такой скрипт (архив во вложении)
1. закинул распакованную папку snow в корень сайта
2. создал чанк с таким содержимым:

<script type="text/javascript">
sitePath = "/";
sflakesMax = 64;
sflakesMaxActive = 64;
svMaxX = 3;
svMaxY = 3;
ssnowStick = 1;
sfollowMouse = 0;
</script>
<script type="text/javascript" src="/snow/snow.js"></script>

3. вставил чанк в шаблон сразу после body

единственное, что говорят, что в осле 6-м вместо снежинок падают кирпичи ) но я так посмотрел по коду, там вроде если это осел или если не поддерживается прозрачность png снежинок, должны использоваться тогда снежинки в gif. Но что-то у меня не переключается автоматом...

1 Posts

demon_sl Reply #7, 11 years, 11 months ago

Bangman, не могли бы вы выложить свой архив повторно - ссылка битая ((