Как сделать падающий снег на сайте (вариант 2)

Скрипты и советы | 15 декабря 2009

снег на сайте

Как сделать падающий снег на сайте (вариант 2)


Для всех тех, кто хочет видеть на своем сайте пдающий снег, но кому не подошел вариант описанный в новости "скрипт падающего снега для ДЛЕ" предлагаю к рассмотрению второй вариант. Он не требует загрузки на свой сайт никаких графических файлов. достаточно в тело страницы вставить код и вуаля: снежок пошел :-)

Для сайтов на основе ДЛЕ все делается как и описано в прошлой новости за исключение кода для баннера.
В качестве кода мы будем вставлять следующие:

<script type="text/javascript">/******************************************* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code* Last updated Nov 9th, 05' by DD. This notice must stay intact for use******************************************/    //Configure below to change URL path to the snow image  var snowsrc="http://tcse-cms.com/sneg/sneg.gif"  // Configure below to change number of snow to render  var no = 10;  // Configure whether snow should disappear after x seconds (0=never):  var hidesnowtime = 0;  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")  var snowdistance = "pageheight";///////////Stop Config//////////////////////////////////  var ie4up = (document.all) ? 1 : 0;  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;    function iecompattest(){    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body    }  var dx, xp, yp;    // coordinate and position variables  var am, stx, sty;  // amplitude and step variables  var i, doc_width = 800, doc_height = 600;     if (ns6up) {    doc_width = self.innerWidth;    doc_height = self.innerHeight;  } else if (ie4up) {    doc_width = iecompattest().clientWidth;    doc_height = iecompattest().clientHeight;  }  dx = new Array();  xp = new Array();  yp = new Array();  am = new Array();  stx = new Array();  sty = new Array();  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc  for (i = 0; i < no; ++ i) {      dx[i] = 0;                        // set coordinate variables    xp[i] = Math.random()*(doc_width-50);  // set position variables    yp[i] = Math.random()*doc_height;    am[i] = Math.random()*20;         // set amplitude variables    stx[i] = 0.02 + Math.random()/10; // set step variables    sty[i] = 0.7 + Math.random();     // set step variables        if (ie4up||ns6up) {      if (i == 0) {        document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><a href="http://dynamicdrive.com"><img src='"+snowsrc+"' border="0"></a></div>");      } else {        document.write("<div id="dot"+ i +"" style="POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;"><img src='"+snowsrc+"' border="0"></div>");      }    }  }  function snowIE_NS6() {  // IE and NS6 main animation function    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;    for (i = 0; i < no; ++ i) {  // iterate for every dot      yp[i] += sty[i];      if (yp[i] > doc_height-50) {        xp[i] = Math.random()*(doc_width-am[i]-30);        yp[i] = 0;        stx[i] = 0.02 + Math.random()/10;        sty[i] = 0.7 + Math.random();      }      dx[i] += stx[i];      document.getElementById("dot"+i).style.top=yp[i]+"px";      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";      }    snowtimer=setTimeout("snowIE_NS6()", 10);  }    function hidesnow(){        if (window.snowtimer) clearTimeout(snowtimer)        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"    }        if (ie4up||ns6up){    snowIE_NS6();        if (hidesnowtime>0)        setTimeout("hidesnow()", hidesnowtime*1000)        }</script>


Для остальных сайтов, будь то динамические ресурсы на различных портальных системах или статические страницы на html
достаточно после тега
<body>
установить указанный мною выше код.

Такой вариант снега отображается во всех популярных браузерах рунета, а именно IE, Opera, Firefox

PS: этот вариант ява-скрипта был взять с форума ДЛЕ


Дополнение:

Вы можете самостоятельно указать место откуда скрипт должен забирать снежинку.
Для этого необхдимо в строке кода

  //Configure below to change URL path to the snow image  var snowsrc="http://tcse-cms.com/sneg/sneg.gif"  // Configure below to change number of snow to render  var no = 10;  // Configure whether snow should disappear after x seconds (0=never):  var hidesnowtime = 0;  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")  var snowdistance = "pageheight";


ссылку https://tcse-cms.com/sneg/sneg.gif
заменить на нужную вам.
Например пусть вместо снега с неба падают ёлочки :-)
https://tcse-cms.com/sneg/ell.gif
или белые снежинки https://tcse-cms.com/sneg/sneg_w.gif


еще один вариант снега на сайт.

Хак. Падающий снег на javascript (не грузит проц!)
Собственно вот код, который вставляете в маин.тпл!
Я вставил после шапки, впринципе наверно можно вставить в любое место.
Там будут падать два вида снежинок.
Проц негрузит вообще!
Всех с наступающим!


<script language="javascript1.2">          grphcs=new Array(2);    Image0=new Image();    Image0.src=grphcs[0]="http://fantasyflash.ru/script/web/image/sneg1.gif";    Image1=new Image();    Image1.src=grphcs[1]="http://img1.immage.de/271211f747277a246b16fde4dfd36f00f3caa9e79c.gif";          Amount=15;      Ypos=new Array();    Xpos=new Array();    Speed=new Array();    Step=new Array();    Cstep=new Array();    ns=(document.layers)?1:0;    ns6=(document.getElementById&&!document.all)?1:0;          if (ns){    for (i = 0; i < Amount; i++){    var P=Math.floor(Math.random()*grphcs.length);    rndPic=grphcs[P];    document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");    }    }    else{    document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');    for (i = 0; i < Amount; i++){    var P=Math.floor(Math.random()*grphcs.length);    rndPic=grphcs[P];//osw    document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');    }    document.write('</div></div>');    }    WinHeight=160;    WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;    for (i=0; i < Amount; i++){            Ypos[i] = Math.round(Math.random()*WinHeight);          Xpos[i] = Math.round(Math.random()*WinWidth);          Speed[i]= 1.2;          Cstep[i]=0;          Step[i]=Math.random()*0.1+0.2;      }    function fall(){    var WinHeight=160;    var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;    var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;    var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;    for (i=0; i < Amount; i++){    sy = Speed[i]*Math.sin(90*Math.PI/180);    sx = Speed[i]*Math.cos(Cstep[i]);    Ypos[i]+=sy;    Xpos[i]+=sx;      if (Ypos[i] > WinHeight){    Ypos[i]=-60;    Xpos[i]=Math.round(Math.random()*WinWidth);    Speed[i]=1;    }    if (ns){    document.layers['sn'+i].left=Xpos[i];    document.layers['sn'+i].top=Ypos[i]+hscrll;    }    else if (ns6){    document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);    document.getElementById("si"+i).style.top=Ypos[i]+hscrll;    }    else{    eval("document.all.si"+i).style.left=Xpos[i];    eval("document.all.si"+i).style.top=Ypos[i]+hscrll;    }      Cstep[i]+=Step[i];    }    setTimeout('fall()',40);    }          window.onload=fall    //-->    </script>


код не проверял, оригинал нашел тут

Снег на сайте - Jquery плагин

Наиболее современный способ реализации падающего снега на вашем сайте, работающем на движке DLE. Все, что требуется -...

Подробнее
Скрипт падающего снега на сайте

Скрипт падающего снега обычно используют перед новым годом Собственно все элементарно! В тело html страницы вставляем...

Подробнее
Падающий снег на сайт с помощью jQuery

Еще один способ сделать падающие снежинки на сайт в канун Нового года. В этот раз помог сайт my-dle.ru на котором и был...

Подробнее
Снег на сайте для DLE

Очередная реализация снежинок для сайта - создаем новогоднее настроение средствами JS. Вывод снежинок организуем через...

Подробнее
Как добавить title на основе alt у тега img

В свежих версиях движка DLE пропала полезная функция - вывод атритуба title для изображений. Теперь она заменена на...

Подробнее
TCSE_call-mod для DLE

Модуль «Обратный звонок» предназначен для вывода на сайте формы отправки менеджерам сайта информации с телефоном...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями

  1. Спасибо огромное!!!! wink долго искал нормальные снежинки для сайта, вот нашел благодоря вам! Еще раз спасибо!
    Den Den 27 декабря 2007 18:11
  2. Den,
    всегда пожалуйста, именно для людей данная статья и выкладывалась. тем более под новый год, когда хоть на экране компьютера да и увидеть снежок :-)
    TCSE TCSE 27 декабря 2007 19:57
  3. Спасибо!!!
    Сергей Сергей 31 декабря 2007 10:45
  4. СПС огромное ... ВИ не можите ищо подсказать как музику на сайт вставить штоб играла?
    Вадим.. Вадим.. 2 февраля 2008 13:30
  5. Вадим..,
    ВИ не можите ищо подсказать как музику на сайт вставить штоб играла?

    если Вы про онлайн флеш-плеер именно для движка ДЛЕ, тогда подождите пару недель в версии DLE 6.7 будет реализована поддержка тега позволяющего прямо с сайта проигрывать музыку.
    подробности тут
    Пример плеера для воспроизведения файлов в формате MP3 [аudio=http://site.ru/music.mp3]:


    если же Вас интересует плеер для сайта на ином движке, тогда рекомендую погуглить в яндексе, на фразу "флеш-плеер для сайта"
    TCSE TCSE 2 февраля 2008 13:40
  6. a umenja vot v4em delo tam mesta snega padqet kvadratiki>?
    Browser Browser 6 ноября 2008 22:57
  7. прикольно, спасибо, скоро будет очень актуален, так как настанет новогоднее время!
    mrseo mrseo 7 ноября 2008 22:26
  8. Подскажите что я не так сделал у мя вот вместо снежинак падают надписи "изображение")))
    Axilles Axilles 5 декабря 2008 00:33
  9. http://revix.ru/snow.gif

    ссылка в коде не рабочая
    Ev Ev 9 декабря 2008 07:02
  10. EV, спасибо
    исправил код скрипта ссылка ведет на этот сайт и на выбор теперь 3 варианта падающих предметов (голубая и белая снежинки, ёлочка).
    TCSE TCSE 11 декабря 2008 17:43
  11. dolgo mne ne dohodilo...ya s pervim variantom 2 chasa prosidel... no vtoroy pomog...:))) spasibo bolshoe
    ctac ctac 13 декабря 2008 08:04
  12. помогите! у меня снежинки летают, но они почемуто в серых рамках, как убрать рамки? вот скриншот:
    http://s1.ipicture.ru/uploads/081213/841
    9/1M5ayUtSwa.jpg
    заранее спасибо!
    lolovich lolovich 13 декабря 2008 10:09
  13. lolovich, а в каком барузере вы свою снежинку разглядываете??
    Вносили ли Вы извенения в код скрипта, или просто вставили как есть...
    TCSE TCSE 13 декабря 2008 15:10
  14. смотрел и в мозилле и в Google Chrome одно и тоже, скрипт не трогал, кстати такаяже рамка стоит на счётчиках LiveIneta .. может изза этого? или эта рамка обводит только Ява-скрипты ...
    lolovich lolovich 13 декабря 2008 20:32
  15. Приветствую!
    Добавлю и свои 5 копеек: скрипт не доработан, при использовании var snowdistance = "pageheight" все снежинки появляются в ряд сверху и начинают валится сверху страницы (имхо не красиво), если использовать windowheight, то снежинки хаотично уже расположены на станице и начинают падать, но до пределов экрана!
    Я же сделал windowheight + поигрался со значениями doc_height добившись, что снежинки падают на всю страницу, даже если она занимает не один экран.

    Так же не понятно зачем задействовано snowsrc=(snowsrc.indexOf("dynamic
    drive.com")!=-1)? "snow.gif" : snowsrc , я от этого избавился...

    Pavlik-jugend Pavlik-jugend 17 декабря 2008 16:20

  16. если использовать windowheight, то снежинки хаотично уже расположены на станице и начинают падать, но до пределов экрана!

    Pavlik-jugend Вы не правы. снежинки падают на заданную высоту - это прописано в куске:


      var dx, xp, yp;    // coordinate and position variables
      var am, stx, sty;  // amplitude and step variables
      var i, doc_width = 800, doc_height = 600;


    т.е. на высоту 600 пикселей
    на весь экран вы вероятно написали


    var i, doc_width = 100%, doc_height = 100%;


    или я не прав?
    TCSE TCSE 17 декабря 2008 16:56
  17. doc_width = 800, doc_height = 600 у меня значения не учитываются, с учетом var snowdistance = "windowheight"

    var i, doc_width = 100%, doc_height = 100%;
    не знаю я не проверял, так как поигравшись с абсолютными значениями понял, что они не учитываются. Во всяком случае на моем ie7 и FF3.
    Pavlik-jugend Pavlik-jugend 17 декабря 2008 18:20
  18. Спасибо!!!

    а существуют скрипты, например с шагающим Дедом Морозом, также вообще каталог со скриптами?
    naval7 naval7 17 декабря 2008 20:51
  19. naval7

    на этой же странице приведен скрип из библиотеки:
    Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
    Pavlik-jugend Pavlik-jugend 17 декабря 2008 22:24
  20. Кроме того, года 4 назад я заглядывал на сайт woweb.ru за скриптами, например сейчас на странице http://woweb.ru/load/125-1-10 есть некоторый набор полезных ява-скриптов

    а еще можно "погуглить в яндексе" :-)
    Pavlik-jugend, спасибо за дельные комментарии
    TCSE TCSE 17 декабря 2008 22:51
  21. изменяю 600 на большее снежинки обрываються на 1 экране дальше при прокрутке ниже сайт чист снега нет( помогите и даже если 600 поменять на 6000000000000000000000000000000000000000
    000000000000000 изменений нет
    Sander Sander 21 декабря 2008 02:39
  22. Спасибо за скрипт, поставлю сейчас у себя на блоге. Немного изменил параметры, добавил кол-во снежинок и задержку уменьшил)
    Отлично.
    вот блог http://millionnadvoih.blogspot.com

    На блоге вставить не получилось. Пишет что ошибка. Не знаю в чем)

    Все работает, вот на этом сайте поставил и никаких лагов нет. http://newsrap.ru
    schtolcman schtolcman 22 декабря 2008 17:33
  23. http://rian.ru/
    оригинальная идея включать и выключать снег! см. "пусть всё растает" "пусть идёт снег"
    Pavlik-jugend Pavlik-jugend 25 декабря 2008 16:34
  24. Огромное пасибо ! +
    Нашол наконец что искал ))) Ещо раз спасибо,Афтару пасиб
    Lucky_doG Lucky_doG 31 декабря 2008 00:43
  25. то что я искал
    kramleruus kramleruus 2 января 2009 09:26
  26. это просто изюминка
    grettikas grettikas 7 января 2009 07:11
  27. отличная информация к размышлению
    certiokler certiokler 10 января 2009 03:34
  28. отличная информация
    depeltersa depeltersa 12 января 2009 14:40
  29. Немогу не поблагодарить за тему, спасибо большое ;)
    killollikk killollikk 12 января 2009 21:20
  30. буду рекомендовать друзьям
    lopipaser lopipaser 13 января 2009 08:46