Feu d'artifice
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Feu d'artifice
Bonjour à tous,
Pour la nouvelle année, nous souhaiterions mettre un feu d'artifice via un javascript sur notre forum.
Malgré des recherches sur le net, la plupart ne fonctionne pas, je me tourne donc vers vous
Merci d'avance à tous ceux qui pourront me venir en aide
Pour la nouvelle année, nous souhaiterions mettre un feu d'artifice via un javascript sur notre forum.
Malgré des recherches sur le net, la plupart ne fonctionne pas, je me tourne donc vers vous
Merci d'avance à tous ceux qui pourront me venir en aide
Dernière édition par cescedric21 le Sam 21 Déc 2013 - 18:16, édité 1 fois (Raison : résolu)
Re: Feu d'artifice
Il y en a un là :
https://forum.forumactif.com/t360455-decorez-votre-forum-pour-les-fetes-de-fin-d-annee
Mais si vous voulez un particulier ( que vous auriez trouvé en cherchant " [fireworks|feu d'artifice] [jquery | javascript] " ) il faudrait indiquer celui dont il s'agit, et ce que vous avez essayé qui n'a pas fonctionné.
Cordialement.
https://forum.forumactif.com/t360455-decorez-votre-forum-pour-les-fetes-de-fin-d-annee
Mais si vous voulez un particulier ( que vous auriez trouvé en cherchant " [fireworks|feu d'artifice] [jquery | javascript] " ) il faudrait indiquer celui dont il s'agit, et ce que vous avez essayé qui n'a pas fonctionné.
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Feu d'artifice
j'avais vu sur ce lien mais je suis novice en la matière
est ce possible de l'intégrer
http://www.javascript-fx.com/submitscripts/fireworks/fireworksImagePage/fw_multi.html
est ce possible de l'intégrer
http://www.javascript-fx.com/submitscripts/fireworks/fireworksImagePage/fw_multi.html
Re: Feu d'artifice
vous pourriez peut-être essayé ce script là :
je n'ai pas fait de grande modification mais il me semble que ça devrait fonctionner
- Code:
/**
* You may use this code for free on any web page provided that
* these comment lines and the following credit remain in the code.
* Cross Browser Fireworks from http://www.javascript-fx.com
*/
/*************************************************/
(function(){
if(!window.JSFX) JSFX=new Object();
if(!JSFX.createLayer)
{/*** Include Library Code ***/
var ns4 = document.layers;
var ie4 = document.all;
JSFX.objNo=0;
JSFX.getObjId = function(){return "JSFX_obj" + JSFX.objNo++;};
JSFX.createLayer = function(theHtml)
{
var layerId = JSFX.getObjId();
document.write(ns4 ? "<LAYER NAME='"+layerId+"'>"+theHtml+"</LAYER>" :
"<DIV id='"+layerId+"' style='position:absolute'>"+theHtml+"</DIV>" );
var el = document.getElementById ? document.getElementById(layerId) :
document.all ? document.all[layerId] :
document.layers[layerId];
if(ns4)
el.style=el;
return el;
}
JSFX.fxLayer = function(theHtml)
{
if(theHtml == null) return;
this.el = JSFX.createLayer(theHtml);
}
var proto = JSFX.fxLayer.prototype
proto.moveTo = function(x,y){this.el.style.left = x;this.el.style.top=y;}
proto.setBgColor = function(color) { this.el.style.backgroundColor = color; }
proto.clip = function(x1,y1, x2,y2){ this.el.style.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")"; }
if(ns4){
proto.clip = function(x1,y1, x2,y2){
this.el.style.clip.top =y1;this.el.style.clip.left =x1;
this.el.style.clip.bottom=y2;this.el.style.clip.right =x2;
}
proto.setBgColor=function(color) { this.el.bgColor = color; }
}
if(window.opera)
proto.setBgColor = function(color) { this.el.style.color = color==null?'transparent':color; }
if(window.innerWidth)
{
gX=function(){return innerWidth;};
gY=function(){return innerHeight;};
}
else
{
gX=function(){return document.body.clientWidth;};
gY=function(){return document.body.clientHeight;};
}
/*** Example extend class ***/
JSFX.fxLayer2 = function(theHtml)
{
this.superC = JSFX.fxLayer;
this.superC(theHtml + "C");
}
JSFX.fxLayer2.prototype = new JSFX.fxLayer;
}/*** End Library Code ***/
/*************************************************/
/*** Class Firework extends FxLayer ***/
JSFX.Firework = function(fwImages)
{
window[ this.id = JSFX.getObjId() ] = this;
this.imgId = "i" + this.id;
this.fwImages = fwImages;
this.numImages = fwImages.length;
this.superC = JSFX.fxLayer;
this.superC("<img src='"+fwImages[0].src+"' name='"+this.imgId+"'>");
this.img = document.layers ? this.el.document.images[0] : document.images[this.imgId];
this.step = 0;
this.timerId = -1;
this.x = 0;
this.y = 0;
this.dx = 0;
this.dy = 0;
this.ay = 0.2;
this.state = "OFF";
}
JSFX.Firework.prototype = new JSFX.fxLayer;
JSFX.Firework.prototype.getMaxDy = function()
{
var ydiff = gY() - 130;
var dy = 1;
var dist = 0;
var ay = this.ay;
while(dist<ydiff)
{
dist += dy;
dy+=ay;
}
return -dy;
}
JSFX.Firework.prototype.setFrame = function()
{
// this.img.src=this.fwName+"/"+this.step+".gif";
this.img.src=this.fwImages[ this.step ].src;
}
JSFX.Firework.prototype.animate = function()
{
if(this.state=="OFF")
{
this.step = 0;
this.x = -200;
this.y = -200;
this.moveTo(this.x, this.y);
this.setFrame();
if(Math.random() > .95)
{
this.x = (gX()-200)*Math.random();
this.y = (gY()-200)*Math.random();
this.moveTo(this.x, this.y);
this.state = "EXPLODE";
}
}
else if(this.state == "EXPLODE")
{
this.step++;
if(this.step < this.numImages)
this.setFrame();
else
this.state="OFF";
}
}
/*** END Class Firework***/
/*** Class FireworkDisplay extends Object ***/
JSFX.FireworkDisplay = function(n, fwImages, numImages)
{
window[ this.id = JSFX.getObjId() ] = this;
this.timerId = -1;
this.fireworks = new Array();
this.imgArray = new Array();
this.loadCount=0;
this.loadImages(fwImages, numImages);
for(var i=0 ; i<n ; i++)
this.fireworks[this.fireworks.length] = new JSFX.Firework(this.imgArray);
}
JSFX.FireworkDisplay.prototype.loadImages = function(fwName, numImages)
{
for(var i=0 ; i<numImages ; i++)
{
this.imgArray[i] = new Image();
this.imgArray[i].obj = this;
this.imgArray[i].onload = window[this.id].imageLoaded;
this.imgArray[i].src = "http://www.javascript-fx.com/submitscripts/fireworks/fireworksImagePage/"+fwName+"/"+i+".gif";
}
}
JSFX.FireworkDisplay.prototype.imageLoaded = function()
{
this.obj.loadCount++;
}
JSFX.FireworkDisplay.prototype.animate = function()
{
status = this.loadCount;
if(this.loadCount < this.imgArray.length)
return;
for(var i=0 ; i<this.fireworks.length ; i++)
this.fireworks[i].animate();
}
JSFX.FireworkDisplay.prototype.start = function()
{
if(this.timerId == -1)
{
this.state = "OFF";
this.timerId = setInterval("window."+this.id+".animate()", 40);
}
}
JSFX.FireworkDisplay.prototype.stop = function()
{
if(this.timerId != -1)
{
clearInterval(this.timerId);
this.timerId = -1;
for(var i=0 ; i<this.fireworks.length ; i++)
{
this.fireworks[i].moveTo(-100, -100);
this.fireworks[i].step = 0;;
this.fireworks[i].state = "OFF";
}
}
}
/*** END Class FireworkDisplay***/
JSFX.FWStart = function()
{
myFW1.start();
myFW2.start();
myFW3.start();
myFW4.start();
}
myFW1 = new JSFX.FireworkDisplay(5, "fw05", 21);
myFW2 = new JSFX.FireworkDisplay(5, "fw08", 26);
myFW3 = new JSFX.FireworkDisplay(5, "fw11", 30);
myFW4 = new JSFX.FireworkDisplay(5, "fw13", 15);
$(JSFX.FWStart);
})();
je n'ai pas fait de grande modification mais il me semble que ça devrait fonctionner
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Feu d'artifice
Bonjour et merci pour votre aide Ea
malheureusement ça e fonctionne pas
malheureusement ça e fonctionne pas
Re: Feu d'artifice
Voilà avec encode quelques changements :
et un test : http://aska.123.st/h35-p
- Code:
/**
* You may use this code for free on any web page provided that
* these comment lines and the following credit remain in the code.
* Cross Browser Fireworks from http://www.javascript-fx.com
*/
/*************************************************/
(function() {
if (!window.JSFX) {
JSFX = new Object;
}
if (!JSFX.createLayer) {
var ns4 = document.layers;
var ie4 = document.all;
JSFX.objNo = 0;
JSFX.getObjId = function() {
return "JSFX_obj" + JSFX.objNo++;
};
JSFX.createLayer = function(theHtml) {
var layerId = JSFX.getObjId();
document.write(ns4 ? "<LAYER NAME='" + layerId + "'>" + theHtml + "</LAYER>" : "<DIV id='" + layerId + "' style='position:absolute'>" + theHtml + "</DIV>");
var el = document.getElementById ? document.getElementById(layerId) : document.all ? document.all[layerId] : document.layers[layerId];
if (ns4) {
el.style = el;
}
return el;
};
JSFX.fxLayer = function(theHtml) {
if (theHtml == null) {
return;
}
this.el = JSFX.createLayer(theHtml);
};
var proto = JSFX.fxLayer.prototype;
proto.moveTo = function(x, y) {
this.el.style.left = x;
this.el.style.top = y;
};
proto.setBgColor = function(color) {
this.el.style.backgroundColor = color;
};
proto.clip = function(x1, y1, x2, y2) {
this.el.style.clip = "rect(" + y1 + " " + x2 + " " + y2 + " " + x1 + ")";
};
if (ns4) {
proto.clip = function(x1, y1, x2, y2) {
this.el.style.clip.top = y1;
this.el.style.clip.left = x1;
this.el.style.clip.bottom = y2;
this.el.style.clip.right = x2;
};
proto.setBgColor = function(color) {
this.el.bgColor = color;
};
}
if (window.opera) {
proto.setBgColor = function(color) {
this.el.style.color = color == null ? "transparent" : color;
};
}
if (window.innerWidth) {
gX = function() {
return innerWidth;
};
gY = function() {
return innerHeight;
};
} else {
gX = function() {
return document.body.clientWidth;
};
gY = function() {
return document.body.clientHeight;
};
}
JSFX.fxLayer2 = function(theHtml) {
this.superC = JSFX.fxLayer;
this.superC(theHtml + "C");
};
JSFX.fxLayer2.prototype = new JSFX.fxLayer;
}
JSFX.Firework = function(fwImages) {
window[this.id = JSFX.getObjId()] = this;
this.imgId = "i" + this.id;
this.fwImages = fwImages;
this.numImages = fwImages.length;
this.superC = JSFX.fxLayer;
this.superC("<img src='" + fwImages[0].src + "' name='" + this.imgId + "'>");
this.img = document.layers ? this.el.document.images[0] : document.images[this.imgId];
this.step = 0;
this.timerId = -1;
this.x = 0;
this.y = 0;
this.dx = 0;
this.dy = 0;
this.ay = 0.2;
this.state = "OFF";
};
JSFX.Firework.prototype = new JSFX.fxLayer;
JSFX.Firework.prototype.getMaxDy = function() {
var ydiff = gY() - 130;
var dy = 1;
var dist = 0;
var ay = this.ay;
while (dist < ydiff) {
dist += dy;
dy += ay;
}
return-dy;
};
JSFX.Firework.prototype.setFrame = function() {
this.img.src = this.fwImages[this.step].src;
};
JSFX.Firework.prototype.animate = function() {
if (this.state == "OFF") {
this.step = 0;
this.x = -200;
this.y = -200;
this.moveTo(this.x, this.y);
this.setFrame();
if (Math.random() > 0.95) {
this.x = (gX() - 200) * Math.random();
this.y = (gY() - 200) * Math.random();
this.moveTo(this.x, this.y);
this.state = "EXPLODE";
}
} else {
if (this.state == "EXPLODE") {
this.step++;
if (this.step < this.numImages) {
this.setFrame();
} else {
this.state = "OFF";
}
}
}
};
JSFX.FireworkDisplay = function(n, fwImages, numImages) {
window[this.id = JSFX.getObjId()] = this;
this.timerId = -1;
this.fireworks = new Array;
this.imgArray = new Array;
this.loadCount = 0;
this.loadImages(fwImages, numImages);
for (var i = 0;i < n;i++) {
this.fireworks[this.fireworks.length] = new JSFX.Firework(this.imgArray);
}
};
JSFX.FireworkDisplay.prototype.loadImages = function(fwName, numImages) {
for (var i = 0;i < numImages;i++) {
this.imgArray[i] = new Image;
this.imgArray[i].obj = this;
this.imgArray[i].onload = window[this.id].imageLoaded;
this.imgArray[i].src = "http://www.javascript-fx.com/submitscripts/fireworks/fireworksImagePage/" + fwName + "/" + i + ".gif";
}
};
JSFX.FireworkDisplay.prototype.imageLoaded = function() {
this.obj.loadCount++;
};
JSFX.FireworkDisplay.prototype.animate = function() {
status = this.loadCount;
if (this.loadCount < this.imgArray.length) {
return;
}
for (var i = 0;i < this.fireworks.length;i++) {
this.fireworks[i].animate();
}
};
JSFX.FireworkDisplay.prototype.start = function() {
if (this.timerId == -1) {
this.state = "OFF";
this.timerId = setInterval("window." + this.id + ".animate()", 40);
}
};
JSFX.FireworkDisplay.prototype.stop = function() {
if (this.timerId != -1) {
clearInterval(this.timerId);
this.timerId = -1;
for (var i = 0;i < this.fireworks.length;i++) {
this.fireworks[i].moveTo(-100, -100);
this.fireworks[i].step = 0;
this.fireworks[i].state = "OFF";
}
}
};
JSFX.FWStart = function() {
myFW1.start();
myFW2.start();
myFW3.start();
myFW4.start();
};
myFW1 = new JSFX.FireworkDisplay(5, "fw05", 21);
myFW2 = new JSFX.FireworkDisplay(5, "fw08", 26);
myFW3 = new JSFX.FireworkDisplay(5, "fw11", 30);
myFW4 = new JSFX.FireworkDisplay(5, "fw13", 15);
$(JSFX.FWStart);
})();
et un test : http://aska.123.st/h35-p
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Feu d'artifice
Bonjour Ea,
Le feu d'artifice fonctionne mais il est seulement sur un petit carré dans le coin en haut à gauche.
Je vous met le lien de mon forum pour que vous constatiez par vous même :http://guilde-wanted.taguilde.net/
Cordialement.
Le feu d'artifice fonctionne mais il est seulement sur un petit carré dans le coin en haut à gauche.
Je vous met le lien de mon forum pour que vous constatiez par vous même :http://guilde-wanted.taguilde.net/
Cordialement.
Re: Feu d'artifice
ipodjeremy a écrit:Bonjour Ea,
Le feu d'artifice fonctionne mais il est seulement sur un petit carré dans le coin en haut à gauche.
Je vous met le lien de mon forum pour que vous constatiez par vous même :http://guilde-wanted.taguilde.net/
Cordialement.
Exact, un bon début mais pareil chez moi, il est au meme que ipodjeremy
Re: Feu d'artifice
un petit up
Re: Feu d'artifice
Cela me fait la même chose en testant sur une page avec du contenu.
Je ne vois pas d'où ça vient donc voici un petit script plutôt :
Je ne vois pas d'où ça vient donc voici un petit script plutôt :
- Code:
$(function(){
// tableau des adresses d'image et des temps ( en ms ) de leur affichage
var img = [
['http://i57.servimg.com/u/f57/18/11/47/14/0ywbrz10.gif', 3700],
['http://i57.servimg.com/u/f57/18/11/47/14/26d74a10.gif', 3800],
['http://i57.servimg.com/u/f57/18/11/47/14/278ad410.gif', 2900],
['http://i57.servimg.com/u/f57/18/11/47/14/65a09d10.gif', 3400],
['http://i57.servimg.com/u/f57/18/11/47/14/f6f13310.gif', 3400]
];
// image affichée en cas de clic
var img_bonus = 'http://i.imgur.com/JhbdrJw.gif';
// nombre maximum d'image
var max = 3;
// temps min ( en ms ) pour un ajout d'image
var update_min = 500;
// temps max ( en ms ) pour un ajout d'image
var update_max = 3000;
var add_img = function(){
setTimeout(add_img, update_min + Math.random()*(update_max - update_min));
if(max <= 0) return;
max--;
var img_num = Math.floor(Math.random()*img.length);
$('<img style="position:fixed;visibility:hidden;left:0;top:0;z-index:99999" src="'+img[img_num][0]+'?cache='+Math.random()+'" />').appendTo('body').on('load', function(){
$(this).css({'top': Math.floor(Math.random()*($(window).height()-$(this).height())), 'left': Math.floor(Math.random()*($(window).width()-$(this).width())),'visibility':'visible'});
var img_cur = this;
setTimeout(function(){ max++; $(img_cur).remove(); }, img[img_num][1]);
}).click(function(){ $(this).attr('src', img_bonus); });
};
add_img();
});
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Feu d'artifice
super Ea, merci beaucoup, c'est vraiment sympa en plus
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum