скрипт падающего снега на сайтах ДЛЕ

[alarmmotors 14]

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

Как сделать падающий снег на сайте

Скрипт падающего снега обычно используют перед новым годом

Собственно все элементарно! В тело html страницы вставляем Ява-скрипт и на сайте уже падает снег.

Но я предлагаю более изящное решения для сайтов на основе движка ДЛЕ,

Для начало переходим в админку, в ней находим раздел «Рекламные материалы»

В нем создаем новый баннер

Название баннерного поля: пишем sneg

Описание баннера: например «падающие снежинки»

В тело баннера вводим код:

<script>

<!-- Begin

// требования: только поддержка JAVA и все.

// скрипт всегда должен вставлятся сразуже после тега body иначе он не будет работать

//создайте обязательно самостоятельно рисунок (sneg.gif)или пропишите путь ниже.

// если Вы хотите преукрасить свой сайт то это то что нужно

var no = 20; // количество снежинок

var speed = 20; // скорость снежинок

var snowflake = "sneg.gif"; //рисунок который будет датать


var ns4up = (document.layers) ? 1 : 0;

var ie4up = (document.all) ? 1 : 0;

var dx, xp, yp;

var am, stx, sty;

var i, doc_width = 800, doc_height = 600;

if (ns4up) {

doc_width = self.innerWidth;

doc_height = self.innerHeight;

} else if (ie4up) {

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx = new Array();

xp = new Array();

yp = new Array();

am = new Array();

stx = new Array();

sty = new Array();

for (i = 0; i < no; ++ i) {

dx[i] = 0;

xp[i] = Math.random()*(doc_width-50);

yp[i] = Math.random()*doc_height;

am[i] = Math.random()*20;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

if (ns4up) {

if (i == 0) {

document.write("<layer name=\"dot"+ i +"\" left=\"25\" ");

document.write("top=\"25\" visibility=\"show\"><img src=\"");

document.write(snowflake + "\" border=\"0\"></layer>");

} else {

document.write("<layer name=\"dot"+ i +"\" left=\"25\" ");

document.write("top=\"25\" visibility=\"show\"><img src=\"");

document.write(snowflake + "\" border=\"0\"></layer>");

}

} else if (ie4up) {

if (i == 0) {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 25px; LEFT: 25px;\"><img src=\"");

document.write(snowflake + "\" border=\"0\"></div>");

} else {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 25px; LEFT: 25px;\"><img src=\"");

document.write(snowflake + "\" border=\"0\"></div>");

}

}

}

function snowNS() {

for (i = 0; i < no; ++ i) {

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();

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

dx[i] += stx[i];

document.layers["dot"+i].top = yp[i];

document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowNS()", speed);

}

function snowIE() {

for (i = 0; i < no; ++ i) {

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();

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx[i] += stx[i];

document.all["dot"+i].style.pixelTop = yp[i];

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}

setTimeout("snowIE()", speed);

}

if (ns4up) {

snowNS();

} else if (ie4up) {

snowIE();

}

// End -->

</script>

В корень нашего сайта записываем картинку со снежинкой на мой взгляд оптимальный размер 15х15 пикселей. имя файла должн быть sneg.gif Далее полученый нами тег баннера в виде {banner_sneg} нам необходимо добавить в наш шаблон основной страницы сайта.

<body>

{AJAX}

{banner_sneg}

и сразу после тега AJAX прописываем свой тег баннера со снегом.

сохраняем изменения в шаблоне.

Теперь если вы все сделали правильно у вас при заходе на главную страницу сайта будет идти снег )

настройки по умолчанию показывают 20 снежинок которые падают с высоты 600 пикселей (т.е. в среднем на высоту одного экрана браузера)

в качестве исходной снежинки для заливки на свой сайт можно использовать нашу.

Кстати, если снежинки надоедят, Вам никто не мешает скажем осенью заменить снежинку на желтый лист :-) будет листопад.

Если снежинки надоели, достаточно в разделе сайта "Управление рекламой" отключить отображение банера sneg

PS: работающие снежинки можно посмотреть на проекте Ana-sm.ru

(С)

в основном разделе админки выбираем Шаблоны сайта в данном разделе находим Общий макет страницы

в нем ищем тег body

[Greeze 0]

баян

Изменено 18 декабря 2007 пользователем ·• Greeze •·

[lifestar 18]

·• Greeze •·,

TCSE,

1. в мозилле 2.0.0.11 на сайте Ana-sm.ru не падает никакой снег

2. а вообще снежинки - зло, лично мне не нравятся - затрудняют читать текст

[revix.ru 0]

+1, в мозиле снег не падает

[alarmmotors 14]

хм.. вот в мозиле то я его и не смотрел :-(

в опере падает на главной странице в ИЕ6 тоже падает.

[revix.ru 0]

вот работает

<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://revix.ru/snow.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>

[alarmmotors 14]

ай, спасибо добрый человек :-)

кстати хотел поинтересоваться у знающих люде.

навешивать прибомбасы на сайт именно путем вживления сниппетов, всмсле модулей в фигурных ковычках, как например описанный способ с {banner_sneg} это увеличивает запросы к базе данных и как следствие утяжеляет работу сайта

и не лучше ли, все руками непосредственно в шаблрн сайта в виде голова html писать? (хотя такой способ мне совсем не нравится - сниппеты лучше)

[error2k 2]

Браузеру пользователя повезло меньше, чем Вашей базе данных

[lifestar 18]

error2k, плюс процессоры на стареньких машинках, эх

[Rokki 0]

А кто нибудь смотрел как этот скрипт грузит ваш процесор?

[Nosferatu 0]

Снег на яве сильно грузит и бд и проц. Вот если бы кто-то придумал какой-то мод "по проще" - можно было бы ставить. А так - это не то, что надо...

[lifestar 18]

Nosferatu, бд грузит? вообще нисколько)

[Dnny 0]

сделал как написано, не работает ни в опере ни ишаке, вообще не работает. только если прямо в сайт код вставить

Изменено 25 декабря 2007 пользователем Dnny

[Spaik 10]

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

<script type="text/javascript">

/*

Snow Fall 1 - no images - Java Script

Visit http://rainbow.arch.scriptmania.com/scripts/

  for this script and many more

*/


// Set the number of snowflakes (more than 30 - 40 not recommended)

var snowmax=80


// 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("Arial Black","Arial Narrow","Times","Comic Sans MS")


// 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=22


// 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


  /*

   //   * NO CONFIGURATION BELOW 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.clientHeight

		marginright = document.body.clientWidth

	}

	else if (ns6) {

		marginbottom = window.innerHeight

		marginright = window.innerWidth

	}

	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

		snow[i].style.color=snowcolor[randommaker(snowcolor.length)]

		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

		snow[i].style.top=snow[i].posy

	}

	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]);

		snow[i].style.top=snow[i].posy


		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>

[revix.ru 0]

у меня снежинка стоит в одном месте и всё

[orIm 0]

А вот собственно вопрос, как сделать что б снежинки при падании кружились в разные стороны? (я хочу вместо снежинок поставить каких-то птиц)

[KillerHT 1]

Приведенный скрипт грузит проц (Core 2.6) в среднем на 30% (пики 10-50%), лучше использовать эти:

С картинками: 4dle.ru/hacks/page,1,1,1147156715-padajushhijj-sneg-na-javascript-ne.html

Без картинок: rainbow.arch.scriptmania.com/scripts/bg/snow_fall_1.html

И скрипты почему-то не работают в FF, показываются только в IE, причем если вставлять код в баннер - то не показывается вообще.

Изменено 22 декабря 2010 пользователем KillerHT