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

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

снег на сайте

Как сделать падающий снег на сайте (вариант 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>


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

Виталий Чуяков

Виталий Чуяков

Технологический прагматик

Веб-разработчик с 20-летним стажем, основатель веб-студии TCSE. Специализация: DLE «под ключ», Webasyst, Parts-Soft.ru, технический аудит.

🧠 20 лет 🚀 120+ проектов 📄 45+ статей
Снег на сайте - 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 долго искал нормальные снежинки для сайта, вот нашел благодоря вам! Еще раз спасибо!
  2. Den,
    всегда пожалуйста, именно для людей данная статья и выкладывалась. тем более под новый год, когда хоть на экране компьютера да и увидеть снежок :-)
  3. Спасибо!!!
  4. СПС огромное ... ВИ не можите ищо подсказать как музику на сайт вставить штоб играла?
  5. Вадим..,
    ВИ не можите ищо подсказать как музику на сайт вставить штоб играла?

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


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

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

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


  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%;


    или я не прав?
  17. doc_width = 800, doc_height = 600 у меня значения не учитываются, с учетом var snowdistance = "windowheight"

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

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

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

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

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

    Все работает, вот на этом сайте поставил и никаких лагов нет. http://newsrap.ru
  23. http://rian.ru/
    оригинальная идея включать и выключать снег! см. "пусть всё растает" "пусть идёт снег"
  24. Огромное пасибо ! +
    Нашол наконец что искал ))) Ещо раз спасибо,Афтару пасиб
  25. то что я искал
  26. это просто изюминка
  27. отличная информация к размышлению
  28. отличная информация
  29. Немогу не поблагодарить за тему, спасибо большое ;)
  30. буду рекомендовать друзьям
Назад