Feu d'artifice

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Feu d'artifice

Message par cescedric21 Dim 15 Déc 2013 - 10:07

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


Dernière édition par cescedric21 le Sam 21 Déc 2013 - 18:16, édité 1 fois (Raison : résolu)
avatar

cescedric21
***

Masculin
Messages : 179
Inscrit(e) le : 14/01/2013

http://www.vectra-gts.com/
cescedric21 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par cescedric21 Lun 16 Déc 2013 - 20:07

up
avatar

cescedric21
***

Masculin
Messages : 179
Inscrit(e) le : 14/01/2013

http://www.vectra-gts.com/
cescedric21 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par cescedric21 Mar 17 Déc 2013 - 21:26

up
avatar

cescedric21
***

Masculin
Messages : 179
Inscrit(e) le : 14/01/2013

http://www.vectra-gts.com/
cescedric21 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par Ea Mar 17 Déc 2013 - 21:41

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.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par cescedric21 Mar 17 Déc 2013 - 22:15

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
avatar

cescedric21
***

Masculin
Messages : 179
Inscrit(e) le : 14/01/2013

http://www.vectra-gts.com/
cescedric21 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par Ea Mar 17 Déc 2013 - 23:33

vous pourriez peut-être essayé ce script là :

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

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par cescedric21 Mer 18 Déc 2013 - 19:42

Bonjour et merci pour votre aide Ea

malheureusement ça e fonctionne pas Mad 
avatar

cescedric21
***

Masculin
Messages : 179
Inscrit(e) le : 14/01/2013

http://www.vectra-gts.com/
cescedric21 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par Ea Jeu 19 Déc 2013 - 1:08

Voilà avec encode quelques changements :

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

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par ipodjeremy Jeu 19 Déc 2013 - 1:30

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.
avatar

ipodjeremy
**

Masculin
Messages : 89
Inscrit(e) le : 24/07/2012

http://chudoku.superforum.fr/
ipodjeremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par cescedric21 Jeu 19 Déc 2013 - 18:36

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  pale 
avatar

cescedric21
***

Masculin
Messages : 179
Inscrit(e) le : 14/01/2013

http://www.vectra-gts.com/
cescedric21 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par cescedric21 Sam 21 Déc 2013 - 9:55

un petit up
avatar

cescedric21
***

Masculin
Messages : 179
Inscrit(e) le : 14/01/2013

http://www.vectra-gts.com/
cescedric21 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par Ea Sam 21 Déc 2013 - 15:41

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 :

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

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Feu d'artifice

Message par cescedric21 Sam 21 Déc 2013 - 17:39

super Ea, merci beaucoup, c'est vraiment sympa en plus
avatar

cescedric21
***

Masculin
Messages : 179
Inscrit(e) le : 14/01/2013

http://www.vectra-gts.com/
cescedric21 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum