Script "Feux d'artifices"

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

Résolu Script "Feux d'artifices"

Message par TerraGF le Sam 29 Aoû 2015 - 21:43

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 :

@no_way a écrit:
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.


Dernière édition par TerraGF le Mar 1 Sep 2015 - 12:28, édité 1 fois

TerraGF
Nouveau membre

Messages : 24
Inscrit(e) le : 26/12/2013

http://terragf.com
TerraGF a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script "Feux d'artifices"

Message par no_way le Dim 30 Aoû 2015 - 2:59

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.

no_way
Aidactif
Aidactif

Messages : 1780
Inscrit(e) le : 26/03/2010

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

Résolu Re: Script "Feux d'artifices"

Message par TerraGF le Dim 30 Aoû 2015 - 15:20

Salut, et merci pour ta réponse Smile

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 ?

TerraGF
Nouveau membre

Messages : 24
Inscrit(e) le : 26/12/2013

http://terragf.com
TerraGF a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script "Feux d'artifices"

Message par no_way le Dim 30 Aoû 2015 - 15:40

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 Wink

no_way
Aidactif
Aidactif

Messages : 1780
Inscrit(e) le : 26/03/2010

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

Résolu Re: Script "Feux d'artifices"

Message par TerraGF le Dim 30 Aoû 2015 - 16:19

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 Wink

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
Nouveau membre

Messages : 24
Inscrit(e) le : 26/12/2013

http://terragf.com
TerraGF a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Script "Feux d'artifices"

Message par TerraGF le Mar 1 Sep 2015 - 12:28

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 résolu

TerraGF
Nouveau membre

Messages : 24
Inscrit(e) le : 26/12/2013

http://terragf.com
TerraGF 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