Falling Snowflakes with images
Decorate your webpage with this great animated document effect! Watch as snow fall gently trickles down the page, then disappear. The image of snow flakes used is changeable, so snow definitely isn't ... [URL="http://www.javascript****.com/falling-snowflakes-with-images.html/en//"]detail[/URL] at [URL="http://www.javascript****.com/"]JavaScript****.com - 2.000+ free JavaScript codes[/URL]
[CENTER][URL="http://www.javascript****.com/javascript/multimedia/events/falling-snowflakes-with-images/preview/en/"][IMG]http://www.javascript****.com/javascript.images/multimedia/falling-snowflakes-with-images.jpg[/IMG][/URL]
Demo: [URL="http://www.javascript****.com/falling-snowflakes-with-images.html/en/"]JavaScript Falling Snowflakes with images[/URL]
[/CENTER]
[SIZE="4"][U]How to setup[/U][/SIZE]
[B]Step *[/B]: Place JavaScript below in your HEAD section
JavaScript
[CODE]<script type="text/javascript">
/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
******************************************/
//Configure below to change URL path to the snow image
var snowsrc="snow*.gif"
// Configure below to change number of snow to render
var no = *0;
// 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) ? * : 0;
var ns6up = (document.getElementById&&!document.all) ? * : 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")!=-*)? "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()/*0; // 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: *5px; LEFT: *5px;"><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: *5px; LEFT: *5px;"><img src='"+snowsrc+"' border="0"></div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-*0 : iecompattest().clientWidth-*0;
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]-*0);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/*0;
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()", *0);
}
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**000)
}
</script>[/CODE]
[B]Step 2[/B]: must download files below
Files
[URL="http://www.javascript****.com/javascript/multimedia/Falling_Snowflakes_with_images/snow*.gif"]snow*.gif[/URL]
[CENTER][URL="http://www.javascript****.com/web-based-music-player.html/en/"][COLOR="DarkOrange"]Javascript Music Player[/COLOR][/URL] - [URL="http://www.javascript****.com/random-text-generator.html"][COLOR="Blue"]Random Text Generator[/COLOR][/URL] - [URL="http://www.javascript****.com/up-down-floating-image.html"]Floating Image Script[/URL][/CENTER]
40 Super Nice JavaScript Extensions and Plugins
In the environment of Internet in any country, beside the web promotion - one of [URL="http://www.mediabug.com/"]Internet marketing UK[/URL] aspects; if a company or a website want to success; it nee... [URL="http://www.javascript****.com/40-super-nice-javascript-extensions-and-plugins.html/en//"]detail[/URL] at [URL="http://www.javascript****.com/"]JavaScript****.com - 2.000+ free JavaScript codes[/URL]
[CENTER][URL="http://www.javascript****.com/javascript/article/40-super-nice-javascript-extensions-and-plugins/preview/en/"][IMG]http://www.javascript****.com/javascript.images/article/40-super-nice-javascript-extensions-and-plugins.jpg[/IMG][/URL]
Demo: [URL="http://www.javascript****.com/40-super-nice-javascript-extensions-and-plugins.html/en/"]JavaScript 40 Super Nice JavaScript Extensions and Plugins[/URL]
[/CENTER]
[SIZE="4"][U]How to setup[/U][/SIZE]
[CENTER][URL="http://www.javascript****.com/web-based-music-player.html/en/"][COLOR="DarkOrange"]Javascript Music Player[/COLOR][/URL] - [URL="http://www.javascript****.com/random-text-generator.html"][COLOR="Blue"]Random Text Generator[/COLOR][/URL] - [URL="http://www.javascript****.com/up-down-floating-image.html"]Floating Image Script[/URL][/CENTER]
Free JavaScript Code Downloads
dev-c is good.
gcc is the classic one, but it pretty much works on command line only.
or there are a few editors out there that are free that will work with gcc to edit and compile code at the same time.
World clock with unique display
World [URL="http://www.javascript****.com/javascript/time/clock-time-date/"]clock[/URL] script with unusual design. Cross-browser (IE4 contains additional visual effects). World [URL="http://www.javascript****.com/javascript/time/clock-time-date/"]clock<... [URL="http://www.javascript****.com/world-clock-with-unique-display.html/en//"]detail[/URL] at [URL="http://www.javascript****.com/"]JavaScript****.com - 2.000+ free JavaScript codes[/URL]
[CENTER][URL="http://www.javascript****.com/javascript/time/clock-time-date/world-clock-with-unique-display/preview/en/"][IMG]http://www.javascript****.com/javascript.images/time/world-clock-with-unique-display.jpg[/IMG][/URL]
Demo: [URL="http://www.javascript****.com/world-clock-with-unique-display.html/en/"]JavaScript World clock with unique display[/URL]
[/CENTER]
[SIZE="4"][U]How to setup[/U][/SIZE]
[B]Step *[/B]: Copy & Paste CSS code below in your HEAD section
CSS
[CODE]<STYLE>
.topcoverlay {
BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: *000px
}
.bottomcoverlay {
BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: *000px; LEFT: 0px; POSITION: absolute; TOP: 25*px; WIDTH: *000px
}
</STYLE>
<!--
This script downloaded from www.JavaScript****.com
Come to view and download over 2000+ free javascript at www.JavaScript****.com
-->
[/CODE]
[B]Step 2[/B]: Use JavaScript code below to setup the script
JavaScript
[CODE]<SCRIPT language=JavaScript>
<!-- Beginning of JavaScript -
var startpos=240
var bildhoehe=720
var step=*
var makepause=200
var difference=0
var local=*
var timer
function showtimelocal() {
if (local==*) {
var thistime= new Date()
var seconds=thistime.getSeconds()
var minutes=thistime.getMinutes()
var hours=thistime.getHours()
if (hours>=24) {hours=hours-24}
var secondspos=Math.floor(bildhoehe/60*seconds)
var minutespos=Math.floor(bildhoehe/60*minutes)
var hourspos=Math.floor(bildhoehe/60*hours)
if(document.all) {
document.all.secondsdiv.style.posTop=startpos-secondspos
document.all.minutesdiv.style.posTop=startpos-minutespos
document.all.hoursdiv.style.posTop=startpos-hourspos
}
if(document.layers) {
document.secondsdiv.top=startpos-secondspos
document.minutesdiv.top=startpos-minutespos
document.hoursdiv.top=startpos-hourspos
}
var timer=setTimeout("showtimelocal()",makepause)
}
else {
clearTimeout(timer)
}
}
function preUTC(thisdifference) {
clearTimeout(timer)
difference=eval(thisdifference)
local=0
showtimeUTC()
}
function inititate() {
if (document.layers) {
document.markernetscape*.visibility="VISIBLE"
document.markernetscape2.visibility="VISIBLE"
}
showtimelocal()
}
function prelocal() {
if (document.layers) {document.markernetscape.visibility="VISIBLE"}
clearTimeout(timer)
local=*
showtimelocal()
}
function showtimeUTC() {
if (local==0) {
var thistime= new Date()
var seconds=thistime.getSeconds()
var minutes=thistime.getMinutes()
var hours=thistime.getUTCHours()
hours+=difference
if (hours>=24) {hours=hours-24}
var secondspos=Math.floor(bildhoehe/60*seconds)
var minutespos=Math.floor(bildhoehe/60*minutes)
var hourspos=Math.floor(bildhoehe/60*hours)
if(document.all) {
document.all.secondsdiv.style.posTop=startpos-secondspos
document.all.minutesdiv.style.posTop=startpos-minutespos
document.all.hoursdiv.style.posTop=startpos-hourspos
}
if(document.layers) {
document.secondsdiv.top=startpos-secondspos
document.minutesdiv.top=startpos-minutespos
document.hoursdiv.top=startpos-hourspos
}
var timer=setTimeout("showtimeUTC()",makepause)
}
else {
clearTimeout(timer)
}
}
window.onload=inititate
// - End of JavaScript - -->
</SCRIPT>
<!--
This script downloaded from www.JavaScript****.com
Come to view and download over 2000+ free javascript at www.JavaScript****.com
-->
[/CODE]
[B]Step *[/B]: Place HTML below in your BODY section
HTML
[CODE]<DIV id=secondsdiv style="LEFT: 200px; POSITION: absolute; TOP: 240px">
<IMG
src="rotaclock2**0.gif" width="*4" height="720"></DIV>
<DIV id=minutesdiv style="LEFT: *80px; POSITION: absolute">
<IMG
src="rotaclock2**0.gif" width="*4" height="720"></DIV>
<DIV id=hoursdiv style="LEFT: *60px; POSITION: absolute; TOP: 240px">
<IMG
src="rotaclock2**0.gif" width="*4" height="720"></DIV>
<DIV class=topcoverlay id=topcover></DIV>
<DIV class=bottomcoverlay id=bottomcover></DIV>
<DIV id=limiter*
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: *76px; POSITION: absolute; TOP: 24*px">
:</DIV>
<DIV id=limiter2
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: **6px; POSITION: absolute; TOP: 24*px">
:</DIV>
<DIV id=markernetscape*
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: *2pt; FONT-WEIGHT: bold; LEFT: *22px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG
height=* src="line2**0.gif" width=20></DIV>
<DIV id=markernetscape2
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: *2pt; FONT-WEIGHT: bold; LEFT: 2*0px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG
height=* src="js 46_files/line2**0.gif" width=20></DIV>
<DIV id=timezones
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; LEFT: *0px; POSITION: absolute; TOP: 5px"><A
href="#"
onmouseover=prelocal()>>> local time</A><BR><A
href="#"
onmouseover="preUTC('-8')">Anchorage</A><BR><A
href="#"
onmouseover="preUTC('-**')">Auckland</A><BR><A
href="#"
onmouseover="preUTC('*')">Baghdad</A><BR><A
href="#"
onmouseover="preUTC('8')">Bejing</A><BR><A
href="#"
onmouseover="preUTC('-*')">Buenos Aires</A><BR><A
href="#"
onmouseover="preUTC('-6')">Denver</A><BR><A
href="#"
onmouseover="preUTC('8')">Hongkong</A><BR><A
href="#"
onmouseover="preUTC('-*')">Honolulu</A><BR><A
href="#"
onmouseover="preUTC('8')">Jakarta</A><BR><A
href="#"
onmouseover="preUTC('2')">Johannesburg</A><BR><A
href="#"
onmouseover="preUTC('2')">Kairo</A><BR><A
href="#"
onmouseover="preUTC('-5')">Lima</A><BR><A
href="#"
onmouseover="preUTC('*')">London</A><BR><A
href="#"
onmouseover="preUTC('-7')">Los Angeles</A><BR><A
href="#"
onmouseover="preUTC('4')">Moscow</A><BR><A
href="#"
onmouseover="preUTC('*')">Nairobi</A><BR><A
href="#"
onmouseover="preUTC('-4')">New York</A><BR><A
href="#"
onmouseover="preUTC('2')">Paris</A><BR><A
href="#"
onmouseover="preUTC('-2')">Rio</A><BR><A
href="#"
onmouseover="preUTC('*0')">Sydney</A><BR><A
href="#"
onmouseover="preUTC('*')">Tokyo</A><BR></DIV>
<!--
This script downloaded from www.JavaScript****.com
Come to view and download over 2000+ free javascript at www.JavaScript****.com
-->
[/CODE]
[B]Step 4[/B]: Download files below
Files
[URL="http://javascript****.com/javascript/time/rotaclock2**0.gif"]rotaclock2**0.gif[/URL]
[CENTER][URL="http://www.javascript****.com/line-graph-script-index.html"][COLOR="DarkOrange"]JavaScript Line Graph script[/COLOR][/URL] - [URL="http://www.javascript****.com/virtualkey***rd-index.html"][COLOR="Blue"]JavaScript Virtual Key***rd[/COLOR][/URL] - [URL="http://www.javascript****.com/horizontal-slider-javascript-v2-2.html"]JavaScript Horizontal Slider[/URL][/CENTER]
Dancing Animation Stars Cursor
One of the many [URL="http://www.javascript****.com/javascript/very nice mouse/"]cursor[/URL] codes in our JavaScript library, this one creates dancing stars animating around your pointers mouse. This [URL="http://www.javascript****.com/=cursor move"]cur... [URL="http://www.javascript****.com/dancing-animation-stars-cursor.html/en//"]detail[/URL] at [URL="http://www.javascript****.com/"]JavaScript****.com - 2.000+ free JavaScript codes[/URL]
[CENTER][URL="http://www.javascript****.com/javascript/mouse/trailer/dancing-animation-stars-cursor/preview/en/"][IMG]http://www.javascript****.com/javascript.images/mouse/dancing-animation-stars-cursor.jpg[/IMG][/URL]
Demo: [URL="http://www.javascript****.com/dancing-animation-stars-cursor.html/en/"]JavaScript Dancing Animation Stars Cursor[/URL]
[/CENTER]
[SIZE="4"][U]How to setup[/U][/SIZE]
[B]Step *[/B]: Place JavaScript below in your HEAD section
JavaScript
[CODE]<script language="JavaScript">
<!--
/*
Dancing Stars cursor (Submitted by Kurt at kurt.grigg@virgin.net)
Modified and permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and *00's more DHTML scripts, visit http://dynamicdrive.com
*/
if (document.all){
document.write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">')
for (xy=0;xy<7;xy++)
document.write('<div style="position:relative;width:*px;height:*px;background:#FFFF00;font-size:2px;visibility:visible"></div>')
document.write('</div>')
}
if (document.layers)
{window.captureEvents(Event.MOUSEMOVE);}
var yBase = 200;
var xBase = 200;
var yAmpl = *0;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=*;
var Xpos = *;
var Ypos = *;
var i = 0;
var j = 0;
if (document.all)
{
function MoveHandler(){
Xpos = document.body.scrollLeft+event.x;
Ypos = document.body.scrollTop+event.y;
}
document.onmousemove = MoveHandler;
}
else if (document.layers)
{
function xMoveHandler(evnt){
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
function animateLogo() {
if (document.all)
{
yBase = window.document.body.offsetHeight/4;
xBase = window.document.body.offsetWidth/4;
}
else if (document.layers)
{
yBase = window.innerHeight/4 ;
xBase = window.innerWidth/4;
}
if (document.all)
{
var totaldivs=document.all.starsDiv.all.length
for ( i = 0 ; i < totaldivs ; i++ )
{
var tempdiv=document.all.starsDiv.all[i].style
tempdiv.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(*0+currStep/*0)+0.2)*Math.cos((currStep + i*25)/*0);
tempdiv.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(*0+currStep/*0)+0.2)*Math.cos((currStep + i*25)/*0);
}
}
else if (document.layers)
{
for ( j = 0 ; j < 7 ; j++ )
{
var templayer="a"+j
document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(*0+currStep/*0)+0.2)*Math.cos((currStep + j*25)/*0);
document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(*0+currStep/*0)+0.2)*Math.cos((currStep + j*25)/*0);
}
}
currStep += step;
setTimeout("animateLogo()", *5);
}
animateLogo();
// -->
</script>[/CODE]
[B]Step 2[/B]: Copy & Paste HTML code below in your BODY section
HTML
[CODE]<LAYER NAME="a0" LEFT=*0 TOP=*0 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,*,*"></LAYER>
<LAYER NAME="a*" LEFT=*0 TOP=*0 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,*,*"></LAYER>
<LAYER NAME="a2" LEFT=*0 TOP=*0 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,*,*"></LAYER>
<LAYER NAME="a*" LEFT=*0 TOP=*0 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,*,*"></LAYER>
<LAYER NAME="a4" LEFT=*0 TOP=*0 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,*,*"></LAYER>
<LAYER NAME="a5" LEFT=*0 TOP=*0 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,*,*"></LAYER>
<LAYER NAME="a6" LEFT=*0 TOP=*0 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,*,*"></LAYER>[/CODE]
[CENTER][URL="http://www.javascript****.com/web-based-music-player.html/en/"][COLOR="DarkOrange"]Javascript Music Player[/COLOR][/URL] - [URL="http://www.javascript****.com/random-text-generator.html"][COLOR="Blue"]Random Text Generator[/COLOR][/URL] - [URL="http://www.javascript****.com/up-down-floating-image.html"]Floating Image Script[/URL][/CENTER]