Два леки скрипта за снежинки за всеки сайт

С идването на зимата, скриптовете за снежинки в сайтовете отново стават актуални. И ако вие имате сайт, може би също ще потърсите лесни начини да го направите в тон със сезона. В този случай, надявам се публикуваните по-долу два варианта да си добавите интересен снежен ефект бързо и лесно, използвайки готов джава скрипт*. Благодарностите са за Rainbow Arch Scripts - сайт с много безплатни и интересни джава скриптове за всеки сайт.

* Вашият сайт трябва да позволява използването на добавен от вас джава скрипт.

Скрипт за снежинки "Снежна буря"

Това е интерактивен скрипт за снежинки, който може да отчита движението на мишката на потребителя и "духа" падащите снежинки в съответната посока, което създава усещането за виелица или снежна буря. Когато стигнат "дъното" на екрана, снежинките се задържат за малко, след което се "стопяват".

Самите снежинки, както и при другия скрипт по-долу, се генерират не от изображения, а от текстови символи, в случая "точка", което прави скрипта лек, ненатоварващ излишно сайта, а в същото време и снежинките са ненатрапчиви.

Поставяне на скрипта в сайта

Има два варианта - лесен и по-лесен. При първия, ще можете да настроите някои от параметрите на скрипта като например колко снежинки да има на екрана, с каква скорост да падат, с какъв цвят да са, дали се влияят от курсора на потребителя и много други, но ще изисква да имате собствен хостинг. При втория няма да имате възможност за настройки, но пък всичко, което ще трябва да направите ще е да поставите малко джава код в сайта си.

Вариант 1

• Най-напред, изтеглете файла със скрипта: snowstorm.js (десен бутон, "Запази като...")
• Редактирайте файла в частта // --- PROPERTIES --- за персонализиране на начина, по който искате скрипта да работи за вас
• Поставете файла в избрана от вас директория на ваш сървър
• Поставете във притурка или направо в кода на сайта (напр. във футъра) следния код:

<script type="text/javascript" src="http://adres-na-sait/papka/.../snowstorm.js"></script><br /> <p> <font face="arial, helvetica" size="-2"><a href="http://www.napravisisait.com/2012/11/2-leki-skripta-za-snejinki-za-vseki-sait.html" title="Снежинки за твоя сайт от "Направи си сайт"">Безплатни скриптове за снежинки</a></font></p>

Заменете в кода "adres-na-sait/papka/..." с точния път до файла.

Вариант 2

• Поставете в притурка в избрана от вас зона на сайта, следния код:

<script type="text/javascript" src="http://rainbow.arch.scriptmania.com/scripts/bg/snowstorm.js"></script><br /> <p> <font face="arial, helvetica" size="-2"><a href="http://www.napravisisait.com/2012/11/2-leki-skripta-za-snejinki-za-vseki-sait.html" title="Снежинки за твоя сайт от "Направи си сайт"">Безплатни скриптове за снежинки</a></font></p>

Сега заредете вашия сайт като потребител и се насладете на ефекта от падащия сняг.

Една полезна допълнителна възможност: можете да поставите в сайта си връзка, чрез която посетителите ви да могат да изключат временно снежинките. Ако подобна опция ви е нужна, просто поставете следния код на избраната от вас за това позиция в сайта ви:

<a href="#" onclick="snowStorm.stop();return false">Изключи снежинките</a>

Готово!

Скрипт "Сняг вали"

При този скрипт снежинките пак са текстови символи, но вместо точка се използва "звезда", която съвсем наподобява вече снежинка. Отново има възможност за настройки: промяна на използвания символ или цвета на снежинките (за открояване на сайтове с преобладаваш бял или много светъл фон), избор дали да се показват на цялата страница, дали само в лявата част или пък в дясната и др. Тези настройки са възможни както за притежаващите собствен хостинг, така и за останалите, ползващи сайтове в Blogger, например.

Поставяне на снежинките в сайта

• Копирайте скрипта от полето по-долу

<br /> <script type="text/javascript"> /* Snow Fall 1 - no images - Java Script Visit http://rainbow.arch.scriptmania.com/scripts/ for this script and many more */ /////////////////////////////////////////////////////////////////////////// // CONFIGURATION /////////////////////////////////////////////////////////////////////////// // Set the number of snowflakes (more than 30 - 40 not recommended) var snowmax=35 // Set the colors for the snow. Add as many colors as you like var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff") // Set the fonts, that create the snowflakes. Add as many fonts as you like var snowtype=new Array("Times","Arial","Times","Verdana") // Set the letter that creates your snowflake (recommended: * ) var snowletter="*" // Set the speed of sinking (recommended values range from 0.3 to 2) var sinkspeed=0.6 // Set the maximum-size of your snowflakes var snowmaxsize=30 // Set the minimal-size of your snowflakes var snowminsize=8 // 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 snowingzone=1 /////////////////////////////////////////////////////////////////////////// // CONFIGURATION ENDS HERE /////////////////////////////////////////////////////////////////////////// // Do not edit below this line var snow=new Array() var marginbottom var marginright var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random()) return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.scrollHeight marginright = document.body.clientWidth-15 } else if (ns6) { marginbottom = document.body.scrollHeight marginright = window.innerWidth-15 } var snowsizerange=snowmaxsize-snowminsize for (i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] = 0.03 + Math.random()/10; snow[i]=document.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].style.zIndex=1000 snow[i].sink=sinkspeed*snow[i].size/5 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx+'px'; snow[i].style.top=snow[i].posy+'px'; } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++) { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px'; snow[i].style.top=snow[i].posy+'px'; if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i<=snowmax;i++) { document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") } if (browserok) { window.onload=initsnow } </SCRIPT><br /> <p> <font face="arial, helvetica" size="-2"><a href="http://www.napravisisait.com/2012/11/2-leki-skripta-za-snejinki-za-vseki-sait.html" title="Снежинки за твоя сайт от "Направи си сайт"">Безплатни скриптове за снежинки</a></font></p>

• Поставете го в притурка или направо в кода на сайта след оператора <body> (напр. във футъра)
• Редактирайте скрипта в частта CONFIGURATION за персонализиране на начина, по който искате той да работи за вас
• Запазете промените

Вече можете да заредите вашия сайт като потребител и да прецените дали сте настроили добре падащия в него сняг.

Справихте ли се? Похвалете се, нека видим как е станало! Ще се радвам да споделите и кой от двата снежни скрипта ви допада повече.

И така, което и от двете предложения за снежинки в сайта по-горе да предпочетете, аз съм сигурен, че с него ще допринесете вашия сайт да дава на посетителите ви една доза по-празнично настроение, а какво по-добро от това, посетителите на сайтовете ни да са доволни, нали!

Надявам се решенията за добавяне на снежинки в сайта ви да са ви полезни и да ме подкрепите и като препоръчате този материал.

Направи си сайт - въпроси и трикове