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

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


ссылку http://tcse-cms.com/sneg/sneg.gif
заменить на нужную вам.
Например пусть вместо снега с неба падают ёлочки :-)
http://tcse-cms.com/sneg/ell.gif
или белые снежинки http://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>


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


15 декабря 2009  104 49748   снег на сайте Версия для печати


Комментарии (104)

#1 написал: Den
Группа: Гости
27 декабря 2007 18:11

Спасибо огромное!!!! wink долго искал нормальные снежинки для сайта, вот нашел благодоря вам! Еще раз спасибо!

            

#2 написал: TCSE
Группа: Администраторы
27 декабря 2007 19:57

Den,
всегда пожалуйста, именно для людей данная статья и выкладывалась. тем более под новый год, когда хоть на экране компьютера да и увидеть снежок :-)


--------------------
администратор веб-студии TCSE-CMS.com

            

#3 написал: Сергей
Группа: Гости
31 декабря 2007 10:45

Спасибо!!!

            

#4 написал: Вадим..
Группа: Гости
2 февраля 2008 13:30

СПС огромное ... ВИ не можите ищо подсказать как музику на сайт вставить штоб играла?

            

#5 написал: TCSE
Группа: Администраторы
2 февраля 2008 13:40

Вадим..,
ВИ не можите ищо подсказать как музику на сайт вставить штоб играла?

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


если же Вас интересует плеер для сайта на ином движке, тогда рекомендую погуглить в яндексе, на фразу "флеш-плеер для сайта"


--------------------
администратор веб-студии TCSE-CMS.com

            

#6 написал: Browser
Группа: Гости
6 ноября 2008 22:57

a umenja vot v4em delo tam mesta snega padqet kvadratiki>?

            

#7 написал: mrseo
Группа: Гости
7 ноября 2008 22:26

прикольно, спасибо, скоро будет очень актуален, так как настанет новогоднее время!

            

#8 написал: Axilles
Группа: Гости
5 декабря 2008 00:33

Подскажите что я не так сделал у мя вот вместо снежинак падают надписи "изображение")))

            

#9 написал: Ev
Группа: Гости
9 декабря 2008 07:02

http://revix.ru/snow.gif

ссылка в коде не рабочая

            

#10 написал: TCSE
Группа: Администраторы
11 декабря 2008 17:43

EV, спасибо
исправил код скрипта ссылка ведет на этот сайт и на выбор теперь 3 варианта падающих предметов (голубая и белая снежинки, ёлочка).


--------------------
администратор веб-студии TCSE-CMS.com

            

#11 написал: ctac
Группа: Гости
13 декабря 2008 08:04

dolgo mne ne dohodilo...ya s pervim variantom 2 chasa prosidel... no vtoroy pomog...:))) spasibo bolshoe

            

#12 написал: lolovich
Группа: Гости
13 декабря 2008 10:09

помогите! у меня снежинки летают, но они почемуто в серых рамках, как убрать рамки? вот скриншот:
http://s1.ipicture.ru/uploads/081213/841
9/1M5ayUtSwa.jpg
заранее спасибо!

            

#13 написал: TCSE
Группа: Администраторы
13 декабря 2008 15:10

lolovich, а в каком барузере вы свою снежинку разглядываете??
Вносили ли Вы извенения в код скрипта, или просто вставили как есть...


--------------------
администратор веб-студии TCSE-CMS.com

            

#14 написал: lolovich
Группа: Гости
13 декабря 2008 20:32

смотрел и в мозилле и в Google Chrome одно и тоже, скрипт не трогал, кстати такаяже рамка стоит на счётчиках LiveIneta .. может изза этого? или эта рамка обводит только Ява-скрипты ...

            

#15 написал: Pavlik-jugend
Группа: Гости
17 декабря 2008 16:20

Приветствую!
Добавлю и свои 5 копеек: скрипт не доработан, при использовании var snowdistance = "pageheight" все снежинки появляются в ряд сверху и начинают валится сверху страницы (имхо не красиво), если использовать windowheight, то снежинки хаотично уже расположены на станице и начинают падать, но до пределов экрана!
Я же сделал windowheight + поигрался со значениями doc_height добившись, что снежинки падают на всю страницу, даже если она занимает не один экран.

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

            

#16 написал: TCSE
Группа: Администраторы
17 декабря 2008 16:56


если использовать 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-CMS.com

            

#17 написал: Pavlik-jugend
Группа: Гости
17 декабря 2008 18:20

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

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

            

#18 написал: naval7
Группа: Гости
17 декабря 2008 20:51

Спасибо!!!

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

            

#19 написал: Pavlik-jugend
Группа: Гости
17 декабря 2008 22:24

naval7

на этой же странице приведен скрип из библиотеки:
Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code

            

#20 написал: TCSE
Группа: Администраторы
17 декабря 2008 22:51

Кроме того, года 4 назад я заглядывал на сайт woweb.ru за скриптами, например сейчас на странице http://woweb.ru/load/125-1-10 есть некоторый набор полезных ява-скриптов

а еще можно "погуглить в яндексе" :-)
Pavlik-jugend, спасибо за дельные комментарии


--------------------
администратор веб-студии TCSE-CMS.com

            

#21 написал: Sander
Группа: Гости
21 декабря 2008 02:39

изменяю 600 на большее снежинки обрываються на 1 экране дальше при прокрутке ниже сайт чист снега нет( помогите и даже если 600 поменять на 6000000000000000000000000000000000000000
000000000000000 изменений нет

            

#22 написал: schtolcman
Группа: Гости
22 декабря 2008 17:33

Спасибо за скрипт, поставлю сейчас у себя на блоге. Немного изменил параметры, добавил кол-во снежинок и задержку уменьшил)
Отлично.
вот блог http://millionnadvoih.blogspot.com

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

Все работает, вот на этом сайте поставил и никаких лагов нет. http://newsrap.ru

            

#23 написал: Pavlik-jugend
Группа: Гости
25 декабря 2008 16:34

http://rian.ru/
оригинальная идея включать и выключать снег! см. "пусть всё растает" "пусть идёт снег"

            

#24 написал: Lucky_doG
Группа: Гости
31 декабря 2008 00:43

Огромное пасибо ! +
Нашол наконец что искал ))) Ещо раз спасибо,Афтару пасиб

            

#25 написал: kramleruus
Группа: Гости
2 января 2009 09:26

то что я искал

            

#26 написал: grettikas
Группа: Гости
7 января 2009 07:11

это просто изюминка

            

#27 написал: certiokler
Группа: Гости
10 января 2009 03:34

отличная информация к размышлению

            

#28 написал: depeltersa
Группа: Гости
12 января 2009 14:40

отличная информация

            

#29 написал: killollikk
Группа: Гости
12 января 2009 21:20

Немогу не поблагодарить за тему, спасибо большое ;)

            

#30 написал: lopipaser
Группа: Гости
13 января 2009 08:46

буду рекомендовать друзьям

            

Имя:*
E-Mail:
Полужирный Наклонный текст Подчёркнутый текст Зачёркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос:
Александр Сергеевич Пу...
Ответ:*
Введите код: *
Кликните на изображение чтобы обновить код, если он неразборчив


О веб-студии TCSE

Мы оказываем услуги по разработке сайтов на основе движка DLE, кроме того осуществляем поддержку собственной разработке - модуль интернет-магазина для бронирования товаров и услуг в сети интернет.

Примеры наших работ доступны в разделе портфолио,скрипт онлайн витрины доступен по адресу trademod.tcse-cms.com...

Архив публикаций

Реклама на сайте

Депардье стал фанатом грозненского терека фото
www.terek-live.ru
Скала: "спартаку" нужен менеджер, который разбирается в футболе"
www.spartak-live.ru
Райола: "рома" не может позволить себе ибрагимовича"
www.psg-live.ru

Наши работы

20/04/2015 - Шаблон версии для печати print.tpl для DLE

Страница сайта предназначаемая для печати в современном вебе уже не так актуальна как во времена ЭЛТ-мониторов и отстуствия постоянного онлайна, но в некоторых областях до сих пор есть спрос на...

30/01/2015 - vtruck.ru - корпоративный сайт официального дилера коммерческой техники

ООО "ВнешТоргАвто" является официальным дилером ряда производителей коммерческой техники, таких как Мitsubishi FUSО Сanter, MAN Truck & Bus RUS, Bobcat Company, Wielton и МЗ "Бецема" в Москве....

20/01/2015 - Модуль - Форма Предзаказа

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

06/01/2015 - Бесплатный шаблон BS3-TCSE для DataLife Engine

Подарки под Елочку не обязательно класть прямо 31 декабря, очень даже к месту будет в течении новогодних каникул. В прошлом году, мы подарили Хак Mob_TPL и Модуль обратный звонок, а в этом базовый...

09/11/2014 - Avtorent.net - прокат автомобилей в Петербурге

Полностью переработанная концепция сайта для компании Аларм-Рент. В соответствии с модными тенденциями - вся необходимая информация на одной странице. Типичный лендинг. Но со своими особенностями. В...

13/10/2014 - alarm2b.ru - корпоративный сайт для автохолдинга "Аларм Моторс"

Новый корпоративный сайт, разработку которого наша студия завершила в очень сжатые сроки (чтобы успеть к 1 сентября 2014 года), заказчик перенес к себе и нашими силами стал его активно наполнять...

24/09/2014 - Хак MobTPL для DLE (TCSE_MobTPL) - бесплатно

Обновления хака для DLE 10.3 Хак мобильной версии вместо стандартного шаблона smartphone подключает 3 дополнительных шаблона для мобильных устройств: tabletpc- Планшеты...

17/07/2014 - Путеводитель по городу Мстиславль - mstislavl.info

К Рыцарскому Фэсту подготовили редизайн сайта. Теперь он адаптивный и современный. Путеводитель по г. Мстиславль - это электронный справочный ресурс по нашему городу, предназначенный, главным...

03/06/2014 - Машинный Парк - журнал в формате блога

«Машинный парк» — место, где живут знания о коммерческой технике, «М-Парк» — отраслевой портал в формате блога с понятной структурой, mpark.pro — ресурс, которым удобно пользоваться. Разработка...

26/05/2014 - Интернет-магазин Koni-Service.ru Перезагрузка

В мая 2014 года мы завершили работы над обновленной версии интернет-магазина амортизаторов Koni для компании Шок-Сервис. Полностью переработаны скрипты интернет-магазина. Обновлен дизайн, Добавленые...

comments powered by Disqus