SMF For Free Support Forum
SMF For Free Support => SMF For Free Codes and Support => Topic started by: Crasy on November 14, 2006, 05:50:59 pm
-
This code will have a picture float it's way down the page then disappear. You can configure any image to fall, set the amount of time for the pictures to fall and set the number of pictures to fall (I'm not going to bother with the pageheight part, since I barely understand it myself. But oyu guys can fiddle with it. It's pretty self explanitory. How far the pictures are to fall)
Where they fall is completely random.
I kinda "stole" this code from Dynamic Drive but I thought I'd share it with you all. So give your thanks to the make of the code and Dynamic Drive.
Please leave in the part of that code that gives credit to the maker.
Here's the code. It is currently configured to have snow fall down the page, 7 flakes for 10 seconds.
<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://i18.photobucket.com/albums/b135/crasyandconfused/snow.gif"
// Configure below to change number of snow to render
var no = 7;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 10;
// 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>
Change the parts in bold in this part
//Configure below to change URL path to the snow image
var snowsrc="http://i18.photobucket.com/albums/b135/crasyandconfused/snow.gif"
// Configure below to change number of snow to render
var no = 7;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 10;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
They configure the image, the number of images and time to appear respectively.
If you want the time to infinite set the number to 0.
Here's a second option for different snowflakes. The instructions and code are right on the page
http://www.rainbow.arch.scriptmania.com/scripts/bg/snow_fall.html
-
Ok cant get it working! I must be doing something really stupid wrong! All the snowflakes are gathered in one corner and not moving1! ;D ahh i cant help but laugh!!
PS this is the code Sibyl found.
>:(
-
My snowflakes appear to be working. You stuck the code in the footer right?
-
nope still wont work, im not sure what to put into:
// Configure below - change number of snow to render
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;
-
You don't need to put anything into it...it's fine the way it is. All you need to do is change the URL of the snowflakes.
-
erm, well it isnt working then :( All i did was put in the urls for the pics...im lost now?! Will i copy and paste the code here for you to see?
-
Sure, go ahead. :)
-
here it is, please tell me whats wrong as its doing my head in!!!
<!--Simply copy and paste into <BODY>
Just above the </BODY> tag. -->
<SCRIPT type="text/javascript">
/*
Snow Fall Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
for this script and many more
*/
//Pre-loads your image/s below
//Configure below - change URL path to the snow image
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake1.gif";
Image1=new Image();
Image1.src=grphcs[1]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake2.gif"
Image2=new Image();
Image2.src=grphcs[2]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake3.gif"
Image3=new Image();
Image3.src=grphcs[3]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake4.gif"
Image4=new Image();
Image4.src=grphcs[4]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake5.gif"
Image5=new Image();
Image5.src=grphcs[5]="http://i63.photobucket.com/albums/h124/blazingfemale/Other/snowflake6.gif"
//Smoothness depends on image file size,
//the smaller the size the more you can use!
// Configure below - change number of snow to render
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];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
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]= Math.random()*5+3;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
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]=Math.random()*5+3;
}
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()',115);
}
window.onload=fall
//-->
</SCRIPT>
<p><font face="arial" size="-2">Free JavaScript from </font><br><font face="arial, helvetica" size="-2"><a href="http://rainbow.arch.scriptmania.com/scripts/">Rainbow Arch</a></font></p>
-
It works for me when I post it on my test forum.
There's nothing wrong with the code.
Try this for me...switch to the default theme. See if that changes the results.
-
strange, that didnt work! ah crap i really wanted that one too! >:( So i guess it isnt going to work? I kept the code on my forum if u want a look. Its the top feft hand corner.
-
Would you be surprised if I told you that the code is working?
Heh heh. Seriously though...the code seems to be fine.
I bet it's just taking a while for those images to load. So until they do the code just kinda sticks them up there. ;)
-
Hmmm i get what you mean, but the snowflakes have never moved from there, dunno whats up with them! Will just use your code :)
If anyone else is using this and havin the same problems, can you let me know? espically if you have fixed it :)
-
eugh this is doing my head in!!! :'(
-
The snowflakes worked on my computer. Like they moved and everything.
It just took an extra second before they did.
-
chiquita.. i just went to your site
they are working for me
-
Hes the leaf one c7c made for me
<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://img162.imageshack.us/img162/647/leafaddsnq4.gif"
// Configure below to change number of snow to render
var no = 9;
// 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>
-
OH WOW! I love it...and the graphic is one that Sibyl modified for me...woo hoo! Thanks a bunch. It is awesome.
-
I just tried this on my test server. Maybe falling Ghosts? LOL. Tried it and it works good.
I found another one that allows multiple images and it works but it goes up instead of down. Sigh, I have a request into Agent Moose to take a look at it.
-
Forum Url: http://pogobabies.smfforfree3.com
This last code worked for me, too! Thank you so much! I have widdle snowflakes now! :smitten:
-
Thanks Adds.. It work for me and I changed the leaf to hearts for Val. to go with my theme
-
chiq it might be your internet some codes dont work for some internets
-
I think you might have meant browsers, hun. Firefox, IE 6, IE 7, Opera, Netscape, K-Meleon and there are more I am sure all can show the same codes differently.
The falling code seems to be the hardest one to get to work on the different browsers.
-
Love this!!^^
-
whered o this code go?? footer? header?
-
this is all good n works great!!
tho i want a feather to drop down my foeum i have one yet it has a white background so i have a white rectangle going down lol
anyone know of a tranparent pic of a feather?
-
Answered you in your other request post. Please only request in one thread to avoid confusion.
-
sorry :uglystupid2:
-
<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://i102.photobucket.com/albums/m102/clairediz/32617786.gif"
// Configure below to change number of snow to render
var no = 1;
// 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>
I cant get this to work anyone see why?
-
i cant see it but my mate can hmmmm
-
Probably browser specific. Are you both using the same style browser?
-
yer we both ex
i saw once a red cross go down lol that all tho
-
Ok, it works fine on Firefox and IE 7, what browser are you using? You might want to change the 1 feather to a couple to see how it looks.
-
Thanks working now .. its great!!!
My members love it as we see a feather is a gift from our loved ones :)
-
Okays i put a spider image in it for halloween and its great! However i was wondering can i add more than 1 image?
-
I don't think you can on this one, I dont see where you could put it in.
-
thats pretty cool thx
-
when i went to get the gif of the snowflake img it said it had been removed or deleted
anyone know where i can get a snowflake from?
-
Looks amazing, thanks a ton man!