CSS kódok#1. - Hulló effektek#1

Sziasztok! CSS kódokat nagyon nem láttam még itt a blogspoton,bár mlapon,és gportalon már nagyon elterjedt,ezért szeretném ide is behozni.
Az egészet kezdeném is néhány hulló effekttel.HTML Script dobozba kell őket berakni (értelemszerűen a modulsávba)
1.APRÓ ZÖLD PÖTTYÖK

<SCRIPT language=JavaScript>

<!-- Starfield - Kurt Grigg - http://www.btinternet.com/~kurt.grigg/javascript

n=20;// Number of stars!
n4=(document.layers);
ie=(document.all);

for (i=0; i < n; i++){
if (n4)
document.write("<layer name='stars"+i+"' top=0 left=0 bgcolor=#FFFFFF width=1 height=1></layer>");
else
document.write('<div id="stars'+i+'" style="position:absolute;width:1px;height:1px;background:#00FF00;font-size:1px">.</div>');
}

h=0;
w=0;
cy=0;
cx=0;

y=new Array();
x=new Array();
iy=new Array();
ix=new Array();
dir=new Array();
v=new Array();
ds=new Array();
ac=new Array();

for (i=0; i < n; i++){
iy[i]=Math.random()*h;
ix[i]=Math.random()*w;
y[i]=iy[i];
x[i]=ix[i];
v[i]=1.3;
ac[i]=0;
ds[i]=0;
}

function fly(){
h=(ie)?document.body.clientHeight:window.innerHeight;
w=(ie)?document.body.clientWidth:window.innerWidth;
sy=(ie)?document.body.scrollTop:window.pageYOffset;
sx=(ie)?document.body.scrollLeft:window.pageXOffset;
cy=Math.floor((h/2));
cx=Math.floor((w/2));
for (i=0; i < n; i++){
divs=(n4)?document.layers["stars"+i]:document.getElementById("stars"+i).style;

ay=y[i]-cy;
ax=x[i]-cx;
dir[i]=Math.atan2(ay,ax)*180/Math.PI;

v[i]+=ac[i];
v[i]+=(v[i]/10);

if (v[i] > 0.4 && v[i] < 0.5){
 if (!n4){divs.fontSize=2;divs.height=2;divs.width=2}
 else{divs.clip.height=2;divs.clip.width=2}
}
if (v[i] > 10){
 if (!n4){divs.fontSize=2;divs.height=2;divs.width=2;}
 else{divs.clip.height=2;divs.clip.width=2;}
}
if (v[i] > 20){
 if (!n4){divs.fontSize=3;divs.height=3;divs.width=3}
 else{divs.clip.height=3;divs.clip.width=3}
}
if (v[i] > 30){
 if (!n4){divs.fontSize=5;divs.height=5;divs.width=5}
 else{divs.clip.height=5;divs.clip.width=5}
}

y[i]+=v[i]*Math.sin(dir[i]*Math.PI/180);
x[i]+=v[i]*Math.cos(dir[i]*Math.PI/180);

if (y[i] < 0 || y[i] > h-Math.round(v[i]) || x[i] < 0 || x[i] > w-Math.round(v[i])){
iy[i]=Math.random()*h;
ix[i]=Math.random()*w;
y[i]=iy[i];
x[i]=ix[i];
dx=cy-y[i];
dy=cx-x[i];
ds[i]=Math.sqrt(dy*dy+dx*dx);
ac[i]+=(-(ds[i]*ds[i])+(160000))/(100000000);//?
v[i]=Math.floor(ds[i]/40);
if (!n4){divs.fontSize=1;divs.height=1;divs.width=1}
else{divs.clip.height=1;divs.clip.width=1}
}
divs.top=y[i]+sy;
divs.left=x[i]+sx;
}
setTimeout('fly()',10);
}
fly();
// -->
</SCRIPT>

DEMO: -

 

2.FELFELÉ SZÁLLÓ KÉK BUBORÉKOK

<script language="JavaScript1.2">
<!-- Begin

//Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com)
//Based on code by Altan d.o.o. (snow@altan.hr)
//For full source code and installation instructions to this script, visit http://www.dynamicdrive.com

var no = 15; // image number or falling rate
var speed = 2; // the lower the number the faster the image moves
var snow = new Array();
snow[0] = "http://i180.photobucket.com/albums/x126/LindaDesign2007/bubble.gif "
snow[1] = "http://i180.photobucket.com/albums/x126/LindaDesign2007/bubble.gif "
snow[2] = "http://i180.photobucket.com/albums/x126/LindaDesign2007/bubble.gif "

var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!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 = 1800;

if (ns4up||ns6up) {
        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();
j = 0;

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 (ns4up) {                      // set layers
                if (i == 0) {
                        document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
                } else {
                        document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
                }        } else if (ie4up||ns6up) {                if (i == 0)
{
                        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
                } else {
                        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
                }
        }
        if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}

function snowNS() {  // Netscape main animation function
        for (i = 0; i < no; ++ i) {  // iterate for every dot
                yp[i] -= sty[i];                if (yp[i] < -50) {
                        xp[i] = Math.random()*(doc_width-am[i]-30);
                        yp[i] = doc_height;
                        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]+pageYOffset;
                document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
        }
        setTimeout("snowNS()", speed);
}

function snowIE_NS6() {  // IE main animation function
        for (i = 0; i < no; ++ i) {  // iterate for every dot
                yp[i] -= sty[i];
                if (yp[i] < -50) {
                        xp[i] = Math.random()*(doc_width-am[i]-30);
                        yp[i] = doc_height;
                        stx[i] = 0.02 + Math.random()/10;
                        sty[i] = 0.7 + Math.random();
                        doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
                        doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
                }
                dx[i] += stx[i];
                if (ie4up){
                document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
                document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
                }
                else if (ns6up){
                document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
                document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
                }
        }
        setTimeout("snowIE_NS6()", speed);
}

if (ns4up) {
        snowNS();
} else if (ie4up||ns6up) {
        snowIE_NS6();
}
// End -->
</script>

DEMO: -

3.CITROMSÁRGA CSILLAGOK

<body style="overflow-x:hidden;y:scroll;"> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:147px; top:40px; width:100px; height:224px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:40px; top:102px; width:100px; height:233px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:108px; top:231px; width:100px; height:271px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="5" style="position:absolute; left:340px; top:21px; width:100px; height:388px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:394px; top:45px; width:100px; height:584px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:475px; top:36px; width:100px; height:273px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:464px; top:37px; width:100px; height:382px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:641px; top:250px; width:100px; height:366px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:728px; top:34px; width:100px; height:378px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:210px; top:90px; width:100px; height:590px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:880px; top:140px; width:100px; height:467px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:544px; top:290px; width:100px; height:589px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:658px; top:180px; width:100px; height:333px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="1" style="position:absolute; left:167px; top:120px; width:100px; height:567px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:115px; top:20px; width:100px; height:234px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:255px; top:180px; width:100px; height:456px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:355px; top:120px; width:100px; height:567px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:62px; top:20px; width:100px; height:567px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:570px; top:34px; width:100px; height:345px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:523px; top:120px; width:100px; height:387px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/3.gif"></marquee>

 DEMO:

4.CITROMSÁRGA CSILLAGOK 2.

<body style="overflow-x:hidden;y:scroll;"> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:147px; top:40px; width:100px; height:224px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:40px; top:102px; width:100px; height:233px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:108px; top:231px; width:100px; height:271px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="5" style="position:absolute; left:340px; top:21px; width:100px; height:388px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:394px; top:45px; width:100px; height:584px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:475px; top:36px; width:100px; height:273px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:464px; top:37px; width:100px; height:382px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:641px; top:250px; width:100px; height:366px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:728px; top:34px; width:100px; height:378px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:210px; top:90px; width:100px; height:590px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:880px; top:140px; width:100px; height:467px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:544px; top:290px; width:100px; height:589px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:658px; top:180px; width:100px; height:333px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="1" style="position:absolute; left:167px; top:120px; width:100px; height:567px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:115px; top:20px; width:100px; height:234px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:255px; top:180px; width:100px; height:456px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:355px; top:120px; width:100px; height:567px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:62px; top:20px; width:100px; height:567px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:570px; top:34px; width:100px; height:345px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee><marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:523px; top:120px; width:100px; height:387px;"> <img src="http://i191.photobucket.com/albums/z125/trixnet/falling-images/stars/10.gif"></marquee>

demo:

5. CITROMSÁRGA SZÍVEK
<marquee behavior="scroll" direction="down" scrollamount="1" style="position:absolute; left:177px; top:120px; width:100px; height:388px;"> <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:115px; top:20px; width:100px; height:324px;">   <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:235px; top:180px; width:100px; height:499px;">   <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:325px; top:120px; width:100px; height:411px;">   <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:69px; top:20px; width:100px; height:251px;">    <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:141px; top:40px; width:100px; height:221px;">   <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:39px; top:120px; width:100px; height:230px;">    <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:108px; top:230px; width:100px; height:241px;">    <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="5" style="position:absolute; left:340px; top:20px; width:100px; height:386px;">  <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:394px; top:40px; width:100px; height:484px;">   <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:475px; top:34px; width:100px; height:423px;">   <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:580px; top:34px; width:100px; height:423px;">   <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:533px; top:120px; width:100px; height:385px;">  <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:464px; top:34px; width:100px; height:332px;">   <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:651px; top:250px; width:100px; height:386px;">   <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:554px; top:290px; width:100px; height:514px;">   <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:658px; top:180px; width:100px; height:247px;">  <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:694px; top:120px; width:100px; height:216px;">    <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="2" style="position:absolute; left:738px; top:34px; width:100px; height:392px;">    <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee><marquee behavior="scroll" direction="down" scrollamount="3" style="position:absolute; left:200px; top:90px; width:100px; height:544px;">    <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee> <marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:890px; top:140px; width:100px; height:404px;">  <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif">  </marquee>
<marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:766px; top:120px; width:100px; height:350px;">    <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee>
<marquee behavior="scroll" direction="down" scrollamount="4" style="position:absolute; left:870px; top:170px; width:100px; height:200px;">  <img src="http://i34.photobucket.com/albums/d111/prettyinpinkdolls/fall6.gif"> </marquee>
 DEMO: