Volledige versie bekijken : achtergrond animerende sneeuw dreamweaver



ramona r
2 January 2008, 19:08
Wil graag op mijn achtertgrond subtiel sneeuwvlokjes laten vallen en weet dus niet hoe ik dat ga maken.
Kan iemand mij simpel uitleggen hoe dit te doen?

Jelle
2 January 2008, 19:30
Dat doe je via JavaScript (en soms nog één of meerdere afbeeldingen erbij).

Zoek eens via Google: http://www.google.be/search?hl=nl&q=snow+javascript
Resultaten zat :)

ramona r
2 January 2008, 20:33
bedankt ik zal me er eens in gaan verdiepen.

Jelle
3 January 2008, 00:36
bedankt ik zal me er eens in gaan verdiepen.

Op zich erg gemakkelijk: kies er een uit en plak de JavaScript code in de body :)

Eventueel ook nog wat sneeuw afbeeldingen uploaden bij de iets gecompliceerdeerdere (andere, zonder afbeeldingen gebruiken tekst als sneeuw, bv. het sterretje * dat wel op een sneeuwvlok lijkt).

ramona r
3 January 2008, 19:04
Makkelijk zeg je , ok ik heb de pagina zoals ie moet maar wat doe ik nu verder om daar de animerende sneuw in te plakken?

<style type="text/css">
<!--
body {
background-image: url(Dreamweaver%20images/achtergronden/achtergronden/vladstudio_noel_1600x1200.jpg);


}
.style3 {
font-size: xx-large;
color: #FFFFFF;
}
.style4 {font-size: x-large}
-->
</style>
<table width="800" border="0">
<tr>
<td><div align="center">
<p class="style3">Kerst</p>
<p class="style3 style4">is een dankbaar onderwerp</p>
<p class="style3 style4">om plaatjes van te maken</p>
<p class="style3 style4">onderschriftjes met honden</p>
<p class="style3 style4">kaarten </p>
<p class="style3 style4">en mensen in een kerstpakje steken</p>
<p class="style3 style4">klik op onderstaande sneeuwpop </p>
</div></td>
</tr>
<tr>
<td><div align="center"><a href="http://picasaweb.google.nl/ramonardino/KerstsignsEnKaarten/photo#s5145720752716459570"><img src="Dreamweaver%20images/site%20geintjes/site%20geintjes/Sneeuwpop97.gif" width="167" height="208" border="0"></a></div></td>


en waar/hoe moet ik verwijzen naar het sneeuwvlokjes gif?
Ik heb jullie gewaarschuwd, een echte beginner..

Jelle
3 January 2008, 20:36
Plak bv. dit:

<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=35

// 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>
vlak voor je </body> aan het einde van je pagina.

ramona r
3 January 2008, 20:41
sorry Jelle maar aan het eind zie ik geen body meer staan alleen bovenin.
Het sneeuwgifje moet ik daar nog naar verwijzen?

Jelle
3 January 2008, 22:39
sorry Jelle maar aan het eind zie ik geen body meer staan alleen bovenin.
Het sneeuwgifje moet ik daar nog naar verwijzen?

Dat zou je toch normaal gezien moeten hebben als je correcte HTML schrijft :p

De normale basisstructuur van een HTML pagina is:

<html>
<head>
<title>Paginatitel</title>
</head>
<body>
</body>
</html>

Alles wat je in HTML opent qua tags, moet je dus ook weer sluiten.

ramona r
3 January 2008, 23:31
Ok Jelle heb het , de pagina was HTM en geen HTML , daarom zag ik de body tags niet.
Tenminste dat denk ik.
Heb nu een nieuwe pagina html gemaakt en jouw code geplakt en ziedaar bovenin wat sneeuw.Je hebt me dus een aardig eind op weg geholpen , nu ga ik op zoek naar een sneeuwscript wat ik bedoel , bedankt

ramona r
4 January 2008, 00:07
Ok heb de sneeuw zoals ik het wil maar in de preview alleen in IE, nu nog FF:shocked: