Designer Harry Potter >> Codes HTML



			Si vous ne savez pas comment insérer un code HTML dans votre page cliquez ici Les codes sont libres de droits et n'ont pas été crés par DHP Attention ! Les codes sont dans des zones de texte ! Alors ils peuvent s'effacer ! Donc si par mégarde vous avez effacé quelque chose, cliquez ici ! Vocabulaire important : "l'entête" est la partie qui se situe entre les balises <head> et </head> "le corps" est la partie qui se situe entre les balises <body> et </body> 1) Texte qui tremble 2) Texte qui clignote 3) De la neige sur votre page 4) Une image qui traverse l'écran 5) Ouverture de la page en rideau 1) Effet produit : Texte qui tremble Voir l'effet Étape 1 : code à insérer dans l'entête de votre page <script language="javascript"> var y=30 var x=10 var count_shakes= 0 var shaketicker function initObjects() { if (document.all) { shaketicker0 = document.all.shaketick0.style shaketicker1 = document.all.shaketick1.style shaketicker2 = document.all.shaketick2.style shaketicker3 = document.all.shaketick3.style shaketicker4 = document.all.shaketick4.style shaketicker5 = document.all.shaketick5.style shaketicker6 = document.all.shaketick6.style } if (document.layers) { shaketicker0 = document.shaketick0 shaketicker1 = document.shaketick1 shaketicker2 = document.shaketick2 shaketicker3 = document.shaketick3 shaketicker4 = document.shaketick4 shaketicker5 = document.shaketick5 shaketicker6 = document.shaketick6 } shake() } function getrandom() { var dif= Math.floor(Math.random()2) return dif } function getrandom2() { var dif= Math.floor(Math.random()5) return dif } function getrandom3() { var dif= Math.floor(Math.random()10) return dif } function intermezzo() { count_shakes=0 var goon=setTimeout('shake()',2000) } function shake() { if (count_shakes < 50) { if (document.all) { shaketicker0.posTop=y+getrandom(); shaketicker0.posLeft=x+getrandom3(); shaketicker1.posTop=y+getrandom(); shaketicker1.posLeft=x+getrandom2(); shaketicker2.posTop=y+getrandom2(); shaketicker2.posLeft=x+getrandom(); shaketicker3.posTop=y+getrandom(); shaketicker3.posLeft=x+getrandom3(); shaketicker4.posTop=y+getrandom3(); shaketicker4.posLeft=x+getrandom2(); shaketicker5.posTop=y+getrandom2(); shaketicker5.posLeft=x+getrandom(); shaketicker6.posTop=y+getrandom2(); shaketicker6.posLeft=x+getrandom(); } if (document.layers) { shaketicker0.top=y+getrandom(); shaketicker0.left=x+getrandom3(); shaketicker1.top=y+getrandom(); shaketicker1.left=x+getrandom2(); shaketicker2.top=y+getrandom2(); shaketicker2.left=x+getrandom(); shaketicker3.top=y+getrandom3(); shaketicker3.left=x+getrandom(); shaketicker4.top=y+getrandom(); shaketicker4.left=x+getrandom2(); shaketicker5.top=y+getrandom2(); shaketicker5.left=x+getrandom(); shaketicker6.top=y+getrandom(); shaketicker6.left=x+getrandom3(); } var timer = setTimeout('shake()',10) count_shakes++; } else { shaketicker0.top=y; shaketicker0.left=x; shaketicker1.top=y; shaketicker1.left=x; shaketicker2.top=y; shaketicker2.left=x; shaketicker3.top=y; shaketicker3.left=x; shaketicker4.top=y; shaketicker4.left=x; shaketicker5.top=y; shaketicker5.left=x; shaketicker6.top=y; shaketicker6.left=x; intermezzo() clearTimeout(timer) } } // - End of JavaScript - --> .ticker { position: absolute; font-family:Verdana; font-weight:bold; color:FF0000; font-size:30px; letter-spacing:1; } </SCRIPT> <STYLE> </STYLE> Étape 2 : Placez ensuite ce script dans le corps, en précisant le même texte pour chaque calque (remplacez "vive Harry Potter" par votre texte) <div id="shaketick0" class="ticker" style="color:rgb(255,238,238);"> Vive Harry Potter ! </div> <div id="shaketick1" class="ticker" style="color:rgb(255,204,204);"> Vive Harry Potter ! </div> <div id="shaketick2" class="ticker" style="color:rgb(255,153,153);"> Vive Harry Potter ! </div> <div id="shaketick3" class="ticker" style="color:rgb(255,119,119);"> Vive Harry Potter ! </div> <div id="shaketick4" class="ticker" style="color:rgb(255,85,85);"> Vive Harry Potter ! </div> <div id="shaketick5" class="ticker" style="color:rgb(255,34,34);"> Vive Harry Potter ! </div> <div id="shaketick6" class="ticker" style="color:red;"> Vive Harry Potter ! </div> Étape 3 : remplacez la balise <body> de votre page par la balise* <BODY onLoad="initObjects()"> 2) Effet produit : Texte qui clignote Voir l'effet Étape 1 : insérer ce script dans l'entête <SCRIPT LANGUAGE="JavaScript"> <!-- function doFlash() { setInterval("txtDiv.filters.glow.enabled = !txtDiv.filters.glow.enabled", 700); } // --> </SCRIPT> Étape 2 : insérez ce script dans le corps de votre page et remplacez "vive DHP" par votre texte <DIV ID=txtDiv STYLE="width:400; filter:glow(color=gold, strength=2, enabled=0)"><H1>Vive DHP !</H1></DIV> Étape 3 : remplacez la balise <body> de votre page par la balise <BODY onLoad="doFlash()"> 3) Effet produit : De la neige (pluie) Voir l'effet Étape 1 : Insérez ce script après la balise <body> <SCRIPT LANGUAGE="JavaScript"> var no = 50; var speed = 1; var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; var s, x, y, sn, cs; var a, r, cx, cy; var i, doc_width = 800, doc_height = 600; function initRain() { a = 6; r[i] = 1; sn = Math.sin(a); cs = Math.cos(a); cx[i] = Math.random() * doc_width + 1; cy[i] = Math.random() * doc_height + 1; x[i] = r[i] * sn + cx[i]; y[i] = cy[i]; } function makeRain() { r[i] = 1; cx[i] = Math.random() * doc_width + 1; cy[i] = 1; x[i] = r[i] * sn + cx[i]; y[i] = r[i] * cs + cy[i]; } function updateRain() { r[i] += s; x[i] = r[i] * sn + cx[i]; y[i] = r[i] * cs + cy[i]; } function raindropNS() { for (i = 0; i < no; ++ i) { updateRain(); if ((x[i] <= 1) \|\| (x[i] >= (doc_width - 20)) \|\| (y[i] >= (doc_height - 20))) { makeRain(); doc_width = self.innerWidth; doc_height = self.innerHeight; } document.layers["dot"+i].top = y[i]; document.layers["dot"+i].left = x[i]; } setTimeout("raindropNS()", speed); } function raindropIE() { for (i = 0; i < no; ++ i) { updateRain(); if ((x[i] <= 1) \|\| (x[i] >= (doc_width - 20)) \|\| (y[i] >= (doc_height - 20))) { makeRain(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } document.all["dot"+i].style.pixelTop = y[i]; document.all["dot"+i].style.pixelLeft = x[i]; } setTimeout("raindropIE()", speed); } if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } x = new Array(); y = new Array(); r = new Array(); cx = new Array(); cy = new Array(); s = 8; for (i = 0; i < no; ++ i) { initRain(); if (ns4up) { if (i == 0) { document.write("<layer name='dot"+i+"' left="1" top="1" visibility="show" z-index="1"><font color='blue'>,</font></layer>"); } else { document.write("<layer name='dot"+i+"' left="1" top="1" visibility="show" z-index="1"><font color='blue'>,</font></layer>"); } } else if (ie4up) { if (i == 0) { document.write("<div id='dot"+i+"' style='position:absolute; left:15px; top:15px; z-index:1; visibility:visible; Z-INDEX: "+i+";'><font color='blue'>,</font></div>"); } else { document.write("<div id='dot"+i+"' style='position:absolute; left:15px; top:15px; z-index:1; visibility:visible; Z-INDEX: "+i+";'><font color='blue'>,</font></div>"); } } } if (ns4up) { raindropNS(); } else if (ie4up) { raindropIE(); } // End --> </SCRIPT> Étape 2 : Précisez le nombre de gouttes de pluie que vous souhaitez voir tomber sur votre site (var no = 50;) et la vitesse de celles-ci (var speed = 1;) 4) Effet produit : Une image traverse l'écran Voir l'effet Étape 1 : Insérez ce script dans l'entête <script> <!-- ns4 = (document.layers)? true:false ie4 = (document.all)? true:false function init() { if(ns4){ anim = document.broom; } else if (ie4) { anim = broom.style; } animateit() } function animateit() { if(ns4\|\|ie4){ anim.left = parseInt(anim.left)-5; if (parseInt(anim.left) <-188) { anim.left =800 } setTimeout("animateit()",100); } } // --> </script> Étape 2 : Insérez ce script dans le corps de votre page, remplacez "votre_image.jpg" par le nom de votre image, ajustez la taille du calque avec celle de votre image (width: 188) et la régler aussi dans le script de l'animation (if (parseInt(anim.left) <- 188)). Et pour finir, réglez la hauteur en pixel à laquelle l'image traversera votre page (top: 140). <div id="broom" style="width:188; position:absolute; left:800; top:140; z-index:1;"> <IMG src="votre_image.jpg"></div> Étape 3 : Changer la balise <body> par la balise <body onload="init();"> 5) Effet produit : Ouverture en rideau Voir l'effet Étape 1 : Insérez ce script dans l'entête de votre page (ajustez la couleur de votre choix : red = rouge, green = vert...) <style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color:red; background-color:red; border:0.1px solid red } --> </style> Étape 2 : Copiez ensuite ce script juste après la balise <body> <div id="i1" class="intro"></div> <div id="i2" class="intro"></div> <script language="JavaScript1.2"> var speed=20 var temp=new Array() var temp2=new Array() if (document.layers){ for (i=1;i<=2;i++){ temp[i]=eval("document.i"+i+".clip") temp2[i]=eval("document.i"+i) temp[i].width=window.innerWidth/2 temp[i].height=window.innerHeight temp2[i].left=(i-1)temp[i].width } } else if (document.all){ var clipright=document.body.clientWidth/2,clipleft=0 for (i=1;i<=2;i++){ temp[i]=eval("document.all.i"+i+".style") temp[i].width=document.body.clientWidth/2 temp[i].height=document.body.offsetHeight temp[i].left=(i-1)parseInt(temp[i].width) } } function openit(){ window.scrollTo(0,0) if (document.layers){ temp[1].right-=speed temp[2].left+=speed if (temp[2].left>window.innerWidth/2) clearInterval(stopit) } else if (document.all){ clipright-=speed temp[1].clip="rect(0 "+clipright+" auto 0)" clipleft+=speed temp[2].clip="rect(0 auto auto "+clipleft+")" if (clipright<=0) clearInterval(stopit) } } function gogo(){ stopit=setInterval("openit()",100) } gogo() </script>







					Weborama Partenaires :