Schönes Feuerwerk für die Seite?!?

Didi · 26 Dezember 2004, 17:18:21

Hat jemand ein schönes Feuerwerk das man auf der Seite integrieren kann, eventuell mit Beschreibung wo man es einfügen sollte!
Danke und Schöne Weihanchten noch!

Homicide · 26 Dezember 2004, 18:42:02

versuchs mal damit:

zwischen <HEAD> und </HEAD>

Code Auswählen


<!--[if IE ]> 
<style type="text/css"> 
body { overflow: hidden; } 
v\:* { behavior: url(#default#VML); } 
</style> 
<![endif]-->

zwischen <BODY> und </BODY>

Code Auswählen


<!--[if IE ]> 
<script language="JavaScript"> 
colors = new Array(); 
// Define your own color combinations 
colors[0] = new Array('yellow', 'lime'); 
colors[1] = new Array('silver', 'green') 
colors[2] = new Array('silver', 'blue'); 
colors[3] = new Array('silver', 'purple'); 
colors[4] = new Array('purple', 'white'); 
colors[5] = new Array('blue', 'silver'); 
colors[6] = new Array('red', 'fuchsia'); 
colors[7] = new Array('yellow', 'red'); 
// Define the maximum number of fire arrows 
maximum = 1000; 
vmlobj=''; 
 for(i = 0; i < 12; i++){ 
 vmlobj += '<div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">'; 
 vmlobj += '<v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">'; 
 vmlobj += '<v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>'; 
 vmlobj += '<v:stroke on="false" /></v:shape></div>'; 
 } 
document.write(vmlobj); vmlobj = null; 
aantal = 0; 
function begin() 
{ 
try { 
 if(aantal == maximum){ return;} 
 kleurschema = Math.floor(Math.random() * colors.length); 
 posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180)); 
 posLinks = (posLinks < 170)? 170: posLinks; 
 posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180)); 
 posBoven = (posBoven < 170)? 170: posBoven; 
 straal = 0; uiteen = true; teller = 1; flikkereffect = false; 
 for(var i = 0; i < 12; i++){ 
 document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]); 
 document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix 
 document.getElementById('ster'+i).style.left = posLinks; 
 document.getElementById('ster'+i).style.top = posBoven; 
 } 
 document.getElementById('ster0').style.top = (document.body.clientHeight - 20); 
 document.getElementById('ster0').style.visibility = 'visible'; 
 omhoog(); 
} catch(e){} 
} 
function omhoog() 
{ 
try { 
  positie = parseInt(document.getElementById('ster0').style.top); 
  if(positie > posBoven){ 
  document.getElementById('ster0').style.top = (positie - 25); 
  setTimeout('omhoog()', 50); 
  } else { 
   for(i = 1; i < 12; i++){ 
   document.getElementById('ster'+i).style.top = positie; 
   document.getElementById('ster'+i).style.visibility = 'visible'; 
   } 
  uiteenspatten(); 
  } 
} catch(e){} 
} 

function uiteenspatten() 
{ 
try { 
 if(straal > 120 && straal % 10 == 0){ 
 flikkereffect = true; 
 teller = (teller == colors[kleurschema].length)? 0: (teller+1); 
 } 
 for(var i = 0; i < 12; i++){ 
 var hoek = i * 30; 
 var piHoek = Math.PI - Math.PI / 180 * hoek; 
 var links = posLinks + Math.round(straal * Math.sin(piHoek)); 
 var boven = positie + Math.round(straal * Math.cos(piHoek)); 
 document.getElementById('ster'+i).style.left = links; 
 document.getElementById('ster'+i).style.top = boven; 
  if(flikkereffect){ 
  document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]); 
  } 
 } 
 if(straal < 160 && uiteen){ 
 straal += (straal < 120)? 10: 5; 
 setTimeout('uiteenspatten()', 50); 
 } 
 else if(straal > 120){ 
 uiteen = false; straal -= 5; 
 setTimeout('uiteenspatten()', 50); 
 } 
 else if(straal <= 120){ 
  for(var i = 0; i < 12; i++){ 
  document.getElementById('ster'+i).style.visibility = 'hidden'; 
  } 
 aantal++; 
 setTimeout('begin()', 500); 
 } 
} catch(e) {} 
} 

window.onload=begin; 
</script> 
<![endif]-->

Didi · 27 Dezember 2004, 11:57:22

Danke für die Antwort, in welche Seite muss ich das einfügen? Die php Seiten haben ja keinen Head und Body?

jubilee · 27 Dezember 2004, 12:03:33

Hallo !

ZitatDie php Seiten haben ja keinen Head und Body?

Dann würdest Du bestimmt nix mehr von Deinen Seiten sehen

Das was in den Head-Bereich kommt, musst Du in die Datei
/includes/my_header.php einfügen.
Das was in den Body-Bereich muss, kannst Du in einen (HTML) Block einfügen,
den Du dann aktivieren musst, oder in die theme.php vom aktuellen Theme , .
BTW: Könnte evt. mit anderen Browsern ausser IE Probleme geben (mal Probieren)
MfG
jubilee

Didi · 27 Dezember 2004, 14:14:44

Danke hat super geklappt!

Biker · 27 Dezember 2004, 15:49:45

Wo kann man sich das mal ansehen?
Würde mich mal interessieren, wie das Ganze aussieht!

Homicide · 27 Dezember 2004, 17:28:12

es gibt da einige, das was ich oben gepostet hab ist mir nur beim Surfen in die Finger gefallen, getestet hab ich es selber noch nicht.

aber hier ein paar beispiele:

http://www.grammiweb.de/javascript/java137.shtml

das script von oben kannst du hier sehen

Didi · 28 Dezember 2004, 22:54:02

Ich sagte ja schon es klappt prima, "aber" leider wenn es auf dem IE 6 läuft fehlt mit mal der Scroll-Balken, beim Opera geht es prima. Ich habe jetzt ein anderes Script momentan drauf das unter allen läuft, es ist leider nicht ganz so schön wie das was mir hier empfohlen wurde. Naja, man kann ja bekanntlich nicht alles haben und ich geben mich damit zufrieden. Danke aber trotzdem dür all die guten Tips die ich hier gekiriegt habe, allen einen Guten Rutsch in´s Neue Jahr!
Die URL zum anschauen des Feuerwerkes lautet http://www.stadtbachhexen.de nach dem Intro und einer Zwischenseite kann man es gleioch anschauen. Sollte jemand das Script wollen, dann hinterlaßt bitte eine Message das ich es zukommen laß! Ichwerde es aber die Tage noch hier im Forum reinstellenc

Juliet · 29 Dezember 2004, 09:51:53

Mit Firefox funktioniert das Feuerwerk leider nicht ... $:-\$

Didi · 29 Dezember 2004, 13:26:00

Hier nun das Script, dass ich momentan auf der Seite http://www.stadtbachhexen.de eingefügt habe. Ich habe es dort in einen Block gepackt (block_Modules_one.php und zwar sollte es nach dem " ?> " also ganz unten eingefügt werden. Es wurde ein klein bisschen abgeändert, sodass die Lichtpunkte wenn sie aufgehen etwas größer erscheinen.
Dies kann in diesen zwei Zeilen wieder durch herabsetzen oder erhöhen des Wertes verändert werden.
var randCol=Math.round(Math.random()*2);
var randSz=Math.round(Math.random()*3);

Viel Spaß dabei, bei Fragen bitte melden.

</script>
<script language="JavaScript">

</script>

jubilee · 29 Dezember 2004, 20:02:50

Hallo !

ZitatMit Firefox funktioniert das Feuerwerk leider

Leider nicht Mozilla - Konform geschrieben .....

MfG
jubilee

jubilee · 29 Dezember 2004, 21:33:33

Hallo !
Hier das Script modifiziert:
jetzt läuft es auch im Firefox ........

Zitat
<script language="JavaScript">
amount=44;
var ns = (document.layers) ? 1 : 0;
var ie = (document.all ) ? 1 : 0;
var dom = (document.getElementById && !document.all) ? 1 : 0;
if (ns){
for (i=0; i < amount; i++)
document.write("<LAYER NAME='nsstars"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,1,1'></LAYER>");
}
else if (ie){
document.write("<div id='ieCov' style='position:absolute;top:0px;left:0px'>");
document.write("<div style='position:relative'>");
for (i=0; i < amount; i++)
document.write("<div id='iestars' style='position:absolute;top:0px;left:0px;width:1;height:1;background:#ffffff;font-size:1' z-index:"+ i +"; ></div>");
document.write("</div></div>");
}
else if (dom)
{
document.write("<div id='domCov' style='position:absolute;top:0px;left:0px'>");
document.write("<div style='position:relative'>");
for (i=0; i < amount; i++)
document.write("<div id='domstars"+ i +"' style='position:absolute;top:0px;left:0px;width:1;height:1;background:#ffffff;font-size:1' z-index:"+ i +"; ></div>");
document.write("</div></div>");
}
Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
sClrs=new Array('ffa500','00ff00','FFAAFF','fff000','fffffF')
Xpos=500;
Ypos=350;
initialStarColor='00ff00';
step=5;
currStep=0;
explosionSize=120;
function Fireworksns(){
var WinHeight=window.innerHeight-100;
var WinWidth=window.innerWidth-100;
var Yscroll=window.pageYOffset;
for (i=0; i < amount; i++){
var layer=document.layers["nsstars"+i];
var randCol=Math.round(Math.random()*2);
var randSz=Math.round(Math.random()*3);
layer.top = Ypos + explosionSize*Math.sin((currStep+i*5)/3)*Math.sin(currStep/100);
layer.left= Xpos + explosionSize*Math.cos((currStep+i*5)/3)*Math.sin(currStep/100);
if (currStep < 110)
{
layer.bgColor=initialStarColor;
layer.clip.width=1;layer.clip.height=1;
}
else
{
layer.bgColor=Clrs[randCol];
layer.clip.width=randSz;layer.clip.height=randSz;
}
}
if (currStep > 220)
{
currStep=10;
Ypos = 50+Math.round(Math.random()*WinHeight)+Yscroll;
Xpos = 50+Math.round(Math.random()*WinWidth);
for (i=0; i < sClrs.length; i++)
{
var newIcol=Math.round(Math.random()*i);
}
initialStarColor=sClrs[newIcol];
explosionSize=Math.round(80*Math.random()+100);
}

currStep+=step;
setTimeout("Fireworksns()",10);
}

function Fireworksdom(){
var WinHeight=window.document.body.clientHeight-100;
var WinWidth=window.document.body.clientWidth-100;
var Yscroll=document.body.scrollTop;
for (i=0; i < amount; i++){
var layer=document.getElementById("domstars"+i).style;
var randCol=Math.round(Math.random()*9);
var randSz=Math.round(Math.random()*3);
layer.top = Ypos + explosionSize*Math.sin((currStep+i*5)/3)*Math.sin(currStep/100);
layer.left= Xpos + explosionSize*Math.cos((currStep+i*5)/3)*Math.sin(currStep/100);
if (currStep < 110)
{
layer.backgroundColor=initialStarColor;
layer.width=1;layer.height=1;
layer.fontSize=1;
}
else
{
layer.backgroundColor=Clrs[randCol];
layer.width=randSz;
layer.height=randSz;
layer.fontSize=randSz;
}
}
if (currStep > 220)
{
currStep=10;
Ypos = 50+Math.round(Math.random()*WinHeight)+Yscroll;
Xpos = 50+Math.round(Math.random()*WinWidth);
for (i=0; i < sClrs.length; i++)
{
var newIcol=Math.round(Math.random()*i);
}
initialStarColor=sClrs[newIcol];
explosionSize=Math.round(80*Math.random()+100);
}
currStep+=step;
setTimeout("Fireworksdom()",10);
}

function Fireworksie(){
var WinHeight=window.document.body.clientHeight-100;
var WinWidth=window.document.body.clientWidth-100;
var Yscroll=document.body.scrollTop;
for (i=0; i < amount; i++){
var layer=iestars.style;
var randCol=Math.round(Math.random()*2);
var randSz=Math.round(Math.random()*3);
layer.top = Ypos + explosionSize*Math.sin((currStep+i*5)/3)*Math.sin(currStep/100);
layer.left= Xpos + explosionSize*Math.cos((currStep+i*5)/3)*Math.sin(currStep/100);
if (currStep < 110)
{
layer.background=initialStarColor;layer.width=1;layer.height=1;layer.fontSize=1;
}
else
{
layer.background=Clrs[randCol];layer.width=randSz;layer.height=randSz;layer.fontSize=randSz;
}
}
if (currStep > 220)
{
currStep=10;
Ypos = 50+Math.round(Math.random()*WinHeight)+Yscroll;
Xpos = 50+Math.round(Math.random()*WinWidth);
for (i=0; i < sClrs.length; i++)
{
var newIcol=Math.round(Math.random()*i);
}
initialStarColor=sClrs[newIcol];
explosionSize=Math.round(80*Math.random()+100);
}
currStep+=step;
setTimeout("Fireworksie()",10);
}

if (ns)
{ Fireworksns(); }
else if (ie)
{ Fireworksie(); }
else if (dom)
{ Fireworksdom(); }

// -->
</script>

MfG
jubilee

Didi · 29 Dezember 2004, 21:41:00

Das Script was Du vorgestellt hast "Jubilee" auch in einen Block reinstellen? Oder woanders?!?

jubilee · 29 Dezember 2004, 21:44:38

Hallo !

ZitatDas Script was Du vorgestellt hast "Jubilee" auch in einen Block reinstellen? Oder woanders?!?

Ja, kannst du so in einen HTML-Block kopieren
(Admin-Menü dann Blöcke, runterscrollen Neuen Block hinzufügen (HTML)
da kannst Du den Code reinkopieren, konfigurieren ( Titel , Position etc ...) und aktivieren .
@Didi:

ZitatDies kann in diesen zwei Zeilen wieder durch herabsetzen oder erhöhen des Wertes verändert werden.
var randCol=Math.round(Math.random()*2);
var randSz=Math.round(Math.random()*3);

Diese Zeile var randCol=Math.round(Math.random()*2); dient zum Einstellen der unterschiedlichen Farben.
Hat nix mit der Größe der Explosionspunkte zu tun.
Dafür ist nur diese Zeile
var randSz=Math.round(Math.random()*3); erforderlich.Mit dieser ändert man die Font-Größe.
btw: Hiermit : amount=44; ändert man die Anzahl der Explosionspunkte
MfG
jubilee

Didi · 30 Dezember 2004, 18:08:21

Upps! Sorry, war mein Fäähler.

Danke für die Berichtigung!