Как сделать падающий снег на сайте (вариант 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. Спасибо за статью! Надеюсь, автор не против, если я использую это для своей курсовой.
    Nyastya7 Nyastya7 23 января 2009 03:34
  2. Круто
    mikhander mikhander 23 января 2009 05:06
  3. грамотный автор
    gudvinmuk gudvinmuk 23 января 2009 11:21
  4. проверено временем
    cratovogs cratovogs 25 января 2009 00:33
  5. креативный выпад!
    hillernea hillernea 25 января 2009 04:16
  6. Эммм
    mikhuliano mikhuliano 25 января 2009 17:28
  7. респект за этот выпуст
    brabullum brabullum 25 января 2009 17:51
  8. записал себе адрес
    rublerrers rublerrers 27 января 2009 05:09
  9. отличная информация!
    bubrikovers bubrikovers 27 января 2009 10:15
  10. респект и уважение автору
    earnisers earnisers 28 января 2009 04:45
  11. мой вердикт - интересно!
    logometrus logometrus 28 января 2009 16:39
  12. молоцом.
    wwwwqpwru wwwwqpwru 29 января 2009 03:00
  13. Респект за этот топик
    zerfiralera zerfiralera 29 января 2009 09:13
  14. Класс! Большое спасибо!!! Добавил сайт в закладки.
    phishkaqwest phishkaqwest 29 января 2009 20:41
  15. грамотный выпад!
    hibeborez hibeborez 30 января 2009 03:40
  16. Я бы еще кое-чего добавил конечно же, но по сути сказано практически все.
    ivenik ivenik 1 февраля 2009 00:47
  17. Мля как это нудно делать у меня есть скрипт он короткий его вставить на страницу сайта и готова а тут мазгу ... нада =(
    MoPIIe)(^^ MoPIIe)(^^ 13 марта 2009 10:58
  18. х.з уменя неработает когда добавляю на страницу с ресунками no -- а без нечего работает сцука http://jimmvista.wen.ru/javascript/love.
    html bully
    readme readme 21 сентября 2009 00:58
  19. Спасибо большое за скрипт перепробовала кучу скриптов, но они не шли на мозиле, а этот идет, скажите в чем проблема, как адаптировать скрипты к мозиле?
    SNEG SNEG 20 ноября 2009 12:45
  20. спасибо, все подробно объяснил . дал 2 варинта молодца. у других на сайтах код не правильный. мои снежинки тут http://forum.longlives.ru fellow
    fedor fedor 25 ноября 2009 08:00
  21. Большое человеческое спасибо!!!!!!
    Радовалась - как ребенок Деду морозу)))
    С наступающим Вас!!
    Лерка-Валерка Лерка-Валерка 2 декабря 2009 15:45
  22. Цитата: Лерка-Валерка
    Большое человеческое спасибо!!!!!!


    пожалуйста. писали материал для людей а не для поисковых роботов - по этому и результат вышел правильный и понятный.
    Talik Talik 2 декабря 2009 15:47
  23. СПАСИБО !
    Stas Stas 9 декабря 2009 19:25
  24. Подскажите, пожалуйста, у меня снежинки летят можно сказать кучкой, тойсть летит полоса снежинок по странице... И получается пока до низу страницы не долетят у верху не появляются.
    Как можно сделать что бы постоянно на всю страницу летели, а не полосой.

    За ранее благодарен.
    Артем Артем 14 декабря 2009 18:57
  25. Цитата: Артем
    Подскажите, пожалуйста, у меня снежинки летят можно сказать кучкой, тойсть летит полоса снежинок по странице...


    уточните в каком веб-браузере проверяете
    Talik Talik 16 декабря 2009 11:03
  26. Даже и не знаю…Вроде все толково, но, я думаю, все хорошо, как всегда, только не бумаге.
    Lobnjak Lobnjak 18 декабря 2009 02:17
  27. Спасибо за снежинки, очень классно и в Опере работает)) с наступающим!))
    _f13_ _f13_ 21 декабря 2009 05:12
  28. spasibo!!!
    matus matus 21 декабря 2009 23:29
  29. Pavlik-jugend,
    Цитата: Pavlik-jugend
    оригинальная идея включать и выключать снег! см. "пусть всё растает" "пусть идёт снег"

    а не подскажите, как такое замутить?
    ketoh ketoh 25 декабря 2009 23:58
  30. Pavlik-jugend,
    Цитата: Pavlik-jugend
    оригинальная идея включать и выключать снег! см. "пусть всё растает" "пусть идёт снег"

    а не подскажите, как такое замутить?
    ketoh ketoh 26 декабря 2009 00:02