Script "Feux d'artifices"

[TerraGF]

Bonjour à tous,

j'ai récemment installé le script compte à rebours suivant le tuto de no_way.

Alors voilà, à la fin, il précise que l'on peut créer une fonction lorsque le compteur tombe à 0 en utilisant cette fonction :

Code:

x.fin_a_rebours=function(){try{
votre code javascript
}catch(e){console.log(e)}};

tout d'abord, est-ce que je dois créer un nouveau javascript pour celle-ci ou est-ce que je rajoute à la fin du code déjà crée comme par exemple :

Code:

$(function(){
var x=new horloge($("#id_horloge"));
x.options.f_H='<img src="url/{h1}.jpg" /><img src="url/{h2}.jpg" />:<img src="url/{m1}.jpg" /><img src="url/{m2}.jpg" />:<img src="url/{s1}.jpg" /><img src="url/{s2}.jpg" />';
x.a_rebours("11/11/2015-00:00:00");
});

x.fin_a_rebours=function(){try{
votre code javascript
}catch(e){console.log(e)}};

Sur son tuto ce n'est pas très clair, je ne fais que souligner un doute.

Ma seconde question, ma vraie question:
Est-ce que quelqu'un saurait m'aider à créer un script "feu d'artifices".

Todo list :
1. ajouter un fond noir transparent (opacité à 80%) sur l'entièreté de la page --> effet nuit
2. ajouter un bouton/image au milieu (affiché dès le début) pour fermer l'animation (fond noir sur le forum)
3. ajouter des gif (3 à 4 images) de feux d'artifices qui popent aléatoirement un peu partout sur toute la page puis disparaissent. De préférence des variables en début pour ne pas avoir à chercher dans le code, tout en déterminant, la source de l'image gif et la durée d'affichage de l'image avant qu'elle ne disparaisse en "fade out"
4. à chaque fois qu'un gif pop, un son est émis
5. ajouter un cookie qui détermine si l'utilisateur a eu cette animation ou non.*

*remarque : si la fonction x.fin_a_rebours=function() n'est appelée qu'une seule fois, comme sur cet exemple le 11/11/2015 à 00h00m00, le point 5. n'est pas à envisager ce qui me fait plutôt penser au point 6.

6. créer un cookie qui définit que le membre n'a pas encore vu le feu d'artifice : vrai pour tout utilisateur connecté avant le 11/11/2015 à 00h00m00 vrai aussi pour tout membre/visiteur qui ne se serait connecté après cette date. Si le membre n'était pas connecté à minuit mais par exemple à 11h le lendemain, il aura quand même la possibilité de voir le feu d'artifice. Je ne sais pas si je me suis bien exprimé.

Les points 1,2 et 3 sont les plus importants, les autres sont juste un bonus ^^

Merci d'avance,
S.

[no_way]

Bonjour.
Concernant le code pour le compte à rebours, utilisez cet ordre-ci:

Code:

$(function(){
var x=new horloge($("#id_horloge"));
x.fin_a_rebours=function(){try{
VOTRE CODE JAVASCRIPT
}catch(e){console.log(e)}};
x.a_rebours(UNE DATE);
});

La fonction 'fin_a_rebours' n'est exécutée qu'une fois.

Voici une page de démo où le fond est rouge au départ, puis au bout de 10 secondes, le fond passe au vert et le texte affiché passe à 'Terminé'.

Concernant votre deuxième question, cela ressemble plus à une commande qu'à une demande d'aide, si vous essayez de coder un peu par vous-même et idéalement fournissez quelque chose de visuel (capture d'écran, retouche sur logiciel de dessin ...) de ce que vous voulez, vous aurez plus de chance d'avoir une aide.

[TerraGF]

Salut, et merci pour ta réponse

Alors voici un petit aperçu de mon avancement :

Voici également le code mis en place dans le template overall_header

Code:

<div id="fullscreen_animation">
<iframe src="/h4-fireworks" style="width:100%;height:100%;"></iframe>
<img id="animation_close" src="http://images.clipartpanda.com/happy-birthday-banner-clipart-dT6zAqaT9.png"/>
</div>

Et le css

Code:

div#fullscreen_animation {
height: 100%;
width: 100%;
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index: 998;
opacity: 0.9;
filter: alpha(opacity=90);
}

Alors voilà, je suis déjà confronté à un premier problème, l'image #animation_close ne s'affiche pas. Cette image sera placée au milieu de l'écran et servira à fermer l'animation. Je pense qu'un événement OnClick devrait suffir, non ?

[no_way]

Très joli effet.
Oui en effet un onClick fera parfaitement l'affaire, en revanche tu as 2 fois l'id animation_close. Perso l'image s'affiche sans souci.

P.S:
tu as quelques erreurs dans ta page html fireworks, les entêtes telles que meta et title doivent être dans la balise head

[TerraGF]

Répondre, oui je viens de trouver la solution pour l'image, c'est pour ça que tu la vois :

voici le code mis-à-jour ainsi que CSS.

Edit : il y eu du changement :

Pour fermer l'animation, disons que la méthode la plus facile est de changer la visibility de ma div en hidden. Est-ce que si j'arrive à mettre du son, ça le coupera aussi ? Est-ce que la page sera moins lourde vu que l'iframe ne s'affiche pas ?

Merci pour tes remarques, j'édite la page html fireworks de ce pas

Edit - Nouveau code, plus ou moins fini

Code HTML

Code:

<div id="fullscreen_animation" style="visibility:hidden;">
  <iframe src="/h4-fireworks" style="width:100%;height:100%;"></iframe>
</div>
<div id="fullscreen_close" style="visibility:hidden;" onclick="fireworks_animation_close()">
  <script>
    function fireworks_animation_close()
    {
    document.getElementById("fullscreen_animation").style.visibility = "hidden";
    document.getElementById("fullscreen_close").style.visibility = "hidden";
    }     
</script>
</div>

CSS

Code:

div#fullscreen_animation {
height: 100%;
width: 100%;
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index: 998;
opacity: 0.9;
filter: alpha(opacity=90);
}

div#fullscreen_close {
height: 100%;
width: 100%;
position: fixed;
overflow:hidden;
z-index: 999;
background:url("http://images.clipartpanda.com/happy-birthday-banner-clipart-dT6zAqaT9.png");
background-repeat:no-repeat;
background-position: center;
}

Javascript

Code:

x.fin_a_rebours=function(){try{
document.getElementById("fullscreen_animation").style.visibility = "visible";
document.getElementById("fullscreen_close").style.visibility = "visible";
}catch(e){console.log(e)}};

Bon c'est pour cette partie là que j'aurai besoin d'une petite aide.

1. Alors tout d'abord serait-il possible de mettre l'affichage de l'id "fullscreen_close" en différé ? Genre 2 à 3 secondes après l'ouverture de la page ?
2. Je ne m'y connais pas vraiment en cookies mais j'aimerai que les feux d'artifices s'affichent qu'à la première connexion de chaque membre ou visiteur puis qu'elle ne se ré-affiche plus. Sur mon code HTML, j'ai ma fonction onclick="fireworks_animation_close()" est-ce que l'on pourrait la modifier de façon à créer un cookie du style "fireworks_seen" = true.

puis sur le javascript qui fait appel à la fin du compte à rebours, vérifier l’existence de ce cookie. S'il existe, il n'affichera plus l'animation, s'il n'existe pas, il l'affichera.

Quelqu'un s'y connait assez ?

[TerraGF]

J'ai fini par trouver toutes mes réponses (à part pour le son) en regardant des codes javascript que j'avais déjà mis en place pour le changement de thème. Je passe le sujet en