Effet Fade [Méthode Simple]

[xepos]

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 = '';

        }

    } 

[Sephi-Chan]

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

[xepos]

Après j'ai voulu proposer ça dans le but d'aider des futur personnes pouvant en avoir besoin

[Sephi-Chan]

Oui, ça peut montrer comment gérer le temps.


Sephi-Chan

[Anthor]

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.

[xepos]

merci pour le conseille de l'interval

Je l'ai mis en place

[theptitprince]

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

[php_addict]

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

[niahoo]

ta fonction popup(page) prends un argument (page), dans ton HTML sur le onclick tu n'envoies pas d'argument.

[theptitprince]

@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 )