+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Effet Fade [Méthode Simple] (/showthread.php?tid=4937)
Pages :
1
2
Effet Fade [Méthode Simple] - xepos - 24-06-2010
Bonjour,
Je viens vous donner la source que je viens de faire pour mon jeu mais que je tien à faire partager car ce que j'ai pu trouver sur internet sont très complexe a mettre en place.
Donc voila le code ci-dessous vous permettra de faire disparaitre des éléments doucement.
Code PHP :
<?php
var TimeFade = 25;
var FadeInitial = 100;
function affichage( id_div, time ){
document.getElementById(id_div).innerHTML = 'test';
setTimeout("FadeCache("+ id_div +", 0)", time);
}
function FadeCache( id_div, FadeActuelle ){
var elem = document.getElementById(id_div);
// - On montre que ce sont des nombres.
FadeInitial = parseInt( FadeInitial );
TimeFade = parseInt( TimeFade );
// - Remet en phase initiale.
if( FadeActuelle == '' || FadeActuelle == 0 ){
FadeActuelle = FadeInitial;
}
// - Calcul de la pertes de transparences.
FadeAjout = FadeInitial / TimeFade;
FadeActuelle = FadeActuelle - FadeAjout;
// - Mise en place de l'opaciter
elem.style.opacity = FadeActuelle / 100;
elem.style.filter = 'alpha(opacity = ' + FadeActuelle + ')';
// - Arriver a zéro on arrête.
if( FadeActuelle != 0 ){
setTimeout("FadeCache("+ id_div +", "+ FadeActuelle +")", 100);
} else {
FadeActuelle = '';
}
}
Code html:
Code :
<span onClick="affichage('id_du_div', 1000);">test</span>
id_du_div => Le div ou le résultat doit arriver.
1000 => Le temps avant le début de la disparition de texte.
<div id="id_du_div">-</div>Il reste cependant des problèmes de clignotement par moment, Je cherche a corriger ce petit soucis.
Voila
Cordialement xepos,
RE: Effet Fade [Méthode Simple] - Sephi-Chan - 24-06-2010
C'est sympa de partager ça.
Cependant, il faut avoir en tête que bon nombre de développeurs utilisent dans leur projet une librairie Javascript comme jQuery ou Prototype, qui intègrent ce genre d'effet (avec une implémentation parfaite).
Sephi-Chan
RE: Effet Fade [Méthode Simple] - xepos - 24-06-2010
Après j'ai voulu proposer ça dans le but d'aider des futur personnes pouvant en avoir besoin
RE: Effet Fade [Méthode Simple] - Sephi-Chan - 24-06-2010
Oui, ça peut montrer comment gérer le temps.
Sephi-Chan
RE: Effet Fade [Méthode Simple] - Anthor - 24-06-2010
(24-06-2010, 06:45 PM)Sephi-Chan a écrit : Oui, ça peut montrer comment gérer le temps.
Sephi-Chan
Bof, un interval serait bien moins pompeux en ressources
En plus c'est pas cross browser la pour le coup.
RE: Effet Fade [Méthode Simple] - xepos - 24-06-2010
merci pour le conseille de l'interval
Je l'ai mis en place
RE: Effet Fade [Méthode Simple] - theptitprince - 05-11-2011
Je viens de coder le même type de fonction pour mon jeu (et non, j'ai toujours pas abandonné mon projet, même si ça fait trééééés longtemps que je suis pas passé par ici).
Pour info, j'ai créé ce code pour l'apparition et la disparition de message d'avertissement.
Donc voila:
Le javascript
Code :
var show = 0;
function popup(page){
if(show == 0){
xhr(page, 'popup_container');
document.getElementById("popup_background").style.visibility = "visible";
document.getElementById("popup_block").style.visibility = "visible";
for (var i=0;i<101;i++){
setTimeout('opacity_popup('+i+')',1.5*i);
}
}else{
for (var i=0;i<101;i++){
setTimeout('opacity_popup('+i+')',1.5*i);
}
}
}
function opacity_popup(value){
if(show==1){
val = 100 - value;
}else{
val = value;
}
document.getElementById("popup_background").style.opacity = val/125;
document.getElementById("popup_background").style.filter = 'alpha(opacity=' + val*0.125 + ')';
document.getElementById("popup_block").style.opacity = val/100;
document.getElementById("popup_block").style.filter = 'alpha(opacity=' + val*1 + ')';
if(value==100){
if(show==0){
show=1;
}else{
show=0;
document.getElementById("popup_background").style.visibility = "hidden";
document.getElementById("popup_block").style.visibility = "hidden";
}
}
}Le css (simplifié):
Code :
#popup_block{ visibility:hidden; background: #fff; padding: 5px; border: 12px solid #ddd; font-size: 1.2em; position: fixed; left:50%; top:130px; margin-left: -220px; margin-top: -60px; width:440px; min-height: 100px; opacity:0; filter:alpha(opacity=0) }
#popup_background{ visibility:hidden; background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity:0; filter:alpha(opacity=0) }
#popup_block #btn_close { float: right; margin: -30px -30px 0 0; width:40px; height:40px }Et le html:
Code :
<!-- DIV DE MESSAGE D'ALERTE -->
<div id="popup_background"></div>
<div id="popup_block">
<a href="#" onclick="popup()"><img src="style/close_pop.png" id="btn_close" /></a>
<div id="popup_container"></div>
</div>
<!-- FIN DU DIV DE MESSAGE D'ALERTE -->Aprés, pour faire afficher le message d'alerte, il suffit de faire un appel à la fonction popup("page a afficher dans le popup").
Je voulais un rendu proche de Facebook. Voila le rendu en image:
Capture d’écran 2011-11-05 à 19.06.17.png (Taille : 66,41 Ko / Téléchargements : 14)
Peut être cela aidera quelqu'un qui en a besoin
RE: Effet Fade [Méthode Simple] - php_addict - 05-11-2011
Comme disais Sephi-Chan il y a plus d'un an, avec Jquery tu fais ca en 2 ou 3 lignes de code ... et en plus plus tu es certain du résultat sur 99% des navigateurs...
RE: Effet Fade [Méthode Simple] - niahoo - 05-11-2011
ta fonction popup(page) prends un argument (page), dans ton HTML sur le onclick tu n'envoies pas d'argument.
RE: Effet Fade [Méthode Simple] - theptitprince - 05-11-2011
@niahoo: Grosso modo, au premier appel de la fonction popup, ça ouvre le popup (et tu doit passer en argument la page à y afficher). Au deuxiéme appel de la fonction popup, ça ferme ton popup, et tu n'as pas besoin d'y passer d'argument cet fois
Là, le code html que j'ai mis, c'est le code du popup, avec son bouton pour le fermer
(sous entendu que tu as donc déjà fait appel une fois à la fonction popup pour l'afficher)@php_addict: Sinon, je pense bien qu'il doit exister des fonctions JQuery ou autre, mais je suis une bille en JS pour tout avouer... et je l'ai fait plus par besoin! Mon truc à moi, c'est plutôt le php
Je le partageais juste parce que mon script n'avait pas les problèmes de clignotements décris dans le premier message du post (et par fierté personnel aussi )