Javascript - Падащи снежинки, листа

Готови кодове за по-голяма атрактивност
User avatar
staf
Шаман
Шаман
Posts: 4254
Joined: Sun Sep 25, 2005 10:14 pm
Answers: 9

Javascript - Падащи снежинки, листа

Post by staf » Sun Nov 13, 2005 2:01 pm

Можете да ползвате не само снежинки и падащи листа
Просто копирайте картиката която желаете и я сложете в директорията на скрипта

Image Image Image Image Image Image Image Image Image Image

Също променяте името на всяка нова картинка в скрипта която ползвате

Ето и демо http://web-tourist.net/project/staf/demo.html



<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Original: Altan (snow@altan.hr) -->
<!-- Web Site: http://www.altan.hr/snow -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var no = 25; // snow number
var speed = 10; // smaller number moves the snow faster
var snowflake = " snow3.gif";

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
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 (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 = 0; // set coordinate variables
xp = Math.random()*(doc_width-50); // set position variables
yp = Math.random()*doc_height;
am = Math.random()*20; // set amplitude variables
stx = 0.02 + Math.random()/10; // set step variables
sty = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" 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: 15px; LEFT: 15px;\"><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: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp += sty;
if (yp > doc_height-50) {
xp = 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() { // IE main animation function
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();
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>
Last edited by staf on Sat Dec 02, 2006 9:28 am, edited 5 times in total.

User avatar
amd
Web-tourist
Web-tourist
Posts: 18
Joined: Sun Sep 25, 2005 10:14 pm
Answers: 1
Location: София

Re: Падащи снежинки

Post by amd » Sun Nov 13, 2005 2:22 pm

НАправи някъде едно демо.
Може и в твоята директория в http://web-tourist.net/control/st.php

User avatar
staf
Шаман
Шаман
Posts: 4254
Joined: Sun Sep 25, 2005 10:14 pm
Answers: 9

Post by staf » Sun Nov 13, 2005 11:45 pm

Ето още един хубав ефект http://www.web-tourist.net/project/staf/ansnow.html

User avatar
staf
Шаман
Шаман
Posts: 4254
Joined: Sun Sep 25, 2005 10:14 pm
Answers: 9

Post by staf » Thu Dec 08, 2005 6:00 pm

Code: Select all

<script>
// CREDITS&#58;
// Snowmaker Copyright &#40;c&#41; 2003 Peter Gehrig. All rights reserved.
// Distributed by http&#58;//www.hypergurl.com
// Permission given to use the script provided that this notice remains as is.

// Set the number of snowflakes &#40;more than 30 - 40 not recommended&#41;
var snowmax=25

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array&#40;"#aaaacc","#ddddFF","#ccccDD"&#41;

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array&#40;"Arial Black","Arial Narrow","Times","Comic Sans MS"&#41;

// Set the letter that creates your snowflake &#40;recommended&#58;*&#41;
var snowletter="*"

// Set the speed of sinking &#40;recommended values range from 0.3 to 2&#41;
var sinkspeed=1.5

// Set the maximal-size of your snowflaxes
var snowmaxsize=26

// Set the minimal-size of your snowflaxes
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&#40;&#41;
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array&#40;&#41;;
var crds=new Array&#40;&#41;;
var lftrght=new Array&#40;&#41;;
var browserinfos=navigator.userAgent 
var ie5=document.all&&document.getElementById&&!browserinfos.match&#40;/Opera/&#41;
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match&#40;/Opera/&#41;  
var browserok=ie5||ns6||opera

function randommaker&#40;range&#41; &#123;		
	rand=Math.floor&#40;range*Math.random&#40;&#41;&#41;
    return rand
&#125;

function initsnow&#40;&#41; &#123;
	if &#40;ie5 || opera&#41; &#123;
		marginbottom = document.body.clientHeight+300
		marginright = document.body.clientWidth
	&#125;
	else if &#40;ns6&#41; &#123;
		marginbottom = window.innerHeight+300
		marginright = window.innerWidth
	&#125;
	var snowsizerange=snowmaxsize-snowminsize
	for &#40;i=0;i<=snowmax;i++&#41; &#123;
		crds&#91;i&#93; = 0;                      
    	lftrght&#91;i&#93; = Math.random&#40;&#41;*15;         
    	x_mv&#91;i&#93; = 0.03 + Math.random&#40;&#41;/10;
		snow&#91;i&#93;=document.getElementById&#40;"s"+i&#41;
		snow&#91;i&#93;.style.fontFamily=snowtype&#91;randommaker&#40;snowtype.length&#41;&#93;
		snow&#91;i&#93;.size=randommaker&#40;snowsizerange&#41;+snowminsize
		snow&#91;i&#93;.style.fontSize=snow&#91;i&#93;.size
		snow&#91;i&#93;.style.color=snowcolor&#91;randommaker&#40;snowcolor.length&#41;&#93;
		snow&#91;i&#93;.sink=sinkspeed*snow&#91;i&#93;.size/5
		if &#40;snowingzone==1&#41; &#123;snow&#91;i&#93;.posx=randommaker&#40;marginright-snow&#91;i&#93;.size-50&#41;&#125;
		if &#40;snowingzone==2&#41; &#123;snow&#91;i&#93;.posx=randommaker&#40;marginright/2-snow&#91;i&#93;.size&#41;&#125;
		if &#40;snowingzone==3&#41; &#123;snow&#91;i&#93;.posx=randommaker&#40;marginright/2-snow&#91;i&#93;.size&#41;+marginright/4&#125;
		if &#40;snowingzone==4&#41; &#123;snow&#91;i&#93;.posx=randommaker&#40;marginright/2-snow&#91;i&#93;.size&#41;+marginright/2&#125;
		snow&#91;i&#93;.posy=randommaker&#40;6*marginbottom-marginbottom-6*snow&#91;i&#93;.size&#41;
		snow&#91;i&#93;.style.left=snow&#91;i&#93;.posx
		snow&#91;i&#93;.style.top=snow&#91;i&#93;.posy
	&#125;
	movesnow&#40;&#41;
&#125;

function movesnow&#40;&#41; &#123;
	for &#40;i=0;i<=snowmax;i++&#41; &#123;
		crds&#91;i&#93; += x_mv&#91;i&#93;;
		snow&#91;i&#93;.posy+=snow&#91;i&#93;.sink
		snow&#91;i&#93;.style.left=snow&#91;i&#93;.posx+lftrght&#91;i&#93;*Math.sin&#40;crds&#91;i&#93;&#41;;
		snow&#91;i&#93;.style.top=snow&#91;i&#93;.posy
		
		if &#40;snow&#91;i&#93;.posy>=marginbottom-6*snow&#91;i&#93;.size || parseInt&#40;snow&#91;i&#93;.style.left&#41;>&#40;marginright-3*lftrght&#91;i&#93;&#41;&#41;&#123;
			if &#40;snowingzone==1&#41; &#123;snow&#91;i&#93;.posx=randommaker&#40;marginright-snow&#91;i&#93;.size-50&#41;&#125;
			if &#40;snowingzone==2&#41; &#123;snow&#91;i&#93;.posx=randommaker&#40;marginright/2-snow&#91;i&#93;.size&#41;&#125;
			if &#40;snowingzone==3&#41; &#123;snow&#91;i&#93;.posx=randommaker&#40;marginright/2-snow&#91;i&#93;.size&#41;+marginright/4&#125;
			if &#40;snowingzone==4&#41; &#123;snow&#91;i&#93;.posx=randommaker&#40;marginright/2-snow&#91;i&#93;.size&#41;+marginright/2&#125;
			snow&#91;i&#93;.posy=0
		&#125;
	&#125;
	var timer=setTimeout&#40;"movesnow&#40;&#41;",50&#41;
&#125;

for &#40;i=0;i<=snowmax;i++&#41; &#123;
	document.write&#40;"<span id='s"+i+"' style='position&#58;absolute;top&#58;-"+snowmaxsize+"'>"+snowletter+"</span>"&#41;
&#125;
if &#40;browserok&#41; &#123;
	window.onload=initsnow
&#125;
</script>

User avatar
staf
Шаман
Шаман
Posts: 4254
Joined: Sun Sep 25, 2005 10:14 pm
Answers: 9

Post by staf » Sat Dec 10, 2005 11:28 am


User avatar
NeedFix
Турист
Турист
Posts: 242
Joined: Tue Nov 15, 2005 7:01 pm

Post by NeedFix » Sat Dec 10, 2005 11:54 am

Ама ако можеш оправи това снежинките да продължават все надолу и на долу скрол бара само се смалява!Това не е подходящо за сайт!

User avatar
staf
Шаман
Шаман
Posts: 4254
Joined: Sun Sep 25, 2005 10:14 pm
Answers: 9

Post by staf » Sat Dec 10, 2005 12:01 pm

виж това http://bubu.to/

Admin
Site Admin
Site Admin
Posts: 4
Joined: Thu Jan 01, 1970 12:00 am
Answers: 224

Post by Admin » Sat Dec 10, 2005 12:14 pm

NeedFix wrote:Ама ако можеш оправи това снежинките да продължават все надолу и на долу скрол бара само се смалява!Това не е подходящо за сайт!
<script>
// CREDITS:
// Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by http://www.hypergurl.com
// Permission given to use the script provided that this notice remains as is.

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=25

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

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

// Set the maximal-size of your snowflaxes
var snowmaxsize=26

// Set the minimal-size of your snowflaxes
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.clientHeight+0
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight+0
marginright = window.innerWidth
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
crds = 0;
lftrght = Math.random()*15;
x_mv = 0.03 + Math.random()/10;
snow=document.getElementById("s"+i)
snow.style.fontFamily=snowtype[randommaker(snowtype.length)]
snow.size=randommaker(snowsizerange)+snowminsize
snow.style.fontSize=snow.size
snow.style.color=snowcolor[randommaker(snowcolor.length)]
snow.sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size-50)}
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(6*marginbottom-marginbottom-6*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-6*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size-50)}
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>



В случая с bubu.to е направено да пасва на сайта им.

User avatar
NeedFix
Турист
Турист
Posts: 242
Joined: Tue Nov 15, 2005 7:01 pm

Post by NeedFix » Sun Dec 11, 2005 2:07 pm

Благодаря много!!! :?:

BG_NIKE
Турист
Турист
Posts: 221
Joined: Mon Jul 10, 2006 10:55 am
Answers: 14

Post by BG_NIKE » Mon Jul 10, 2006 10:59 am

Здравейте много ще съм ви благодарен ако ми кажете как да използвам скрипта в PHP Fusion ?

Post Reply