Fade in sur un sprite

Résolu
Xyrto Messages postés 46 Date d'inscription   Statut Membre Dernière intervention   -  
Xyrto Messages postés 46 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je pense que c'est assez simple mais je ne trouve pas la réponse à ma question sur le net donc je viens vers vous.

J'aimerai juste que lorsque je charge ma page de garde, mon image apparait avec un effet fade in ( qu'elle apparaisse petit à petit ). Vous la trouverez ici www.mackraft.be
Je ne sais donc pas vraiment si il me manque un fichier dans le head ou si c'est ok, etc... et le code que je dois installer.

Merci pour votre aide.
Bien à vous.

6 réponses

Réponse 1 / 6
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Salut

cela peux ce faire facilement avec un peu de jquery , il faut juste cache l id choisie le temps du doc ready et de lancer le fade !

voila ta page avec l effet de fade et corrige des erreurs qu elle comportait !

tu repassera le css en extene ! 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Mackraft-Graphiste-Webdesigner
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content=
    "Mackraft (Vivian Gilles), jeune graphiste diplômé de l'ESA Saint-Luc Liège, vous propose son portfolio ainsi qu'un blog sur l'actualité graphique." />
    <meta name="keywords" content="Aywaille, Liège, Mackraft, mackraft, Graphiste, graphiste, Webdesigner" />
    <meta name="robots" content="index" />
    <meta name="REVISIT-AFTER" content="7 days" />
    <link rel="icon" type="image/ico" href="images/favicon.ico" />
    <style type="text/css">
/*<![CDATA[*/
    <!--
    #logo{
      height: 450px;
      left: 50%;
      margin: -230px 0 0 -230px;
      padding: 0;
      position: absolute;
      text-align: left;
      top: 50%;
      width: 450px;
      display: block;
      text-indent: -9999px;
      background: url("http://mackraft.be/images/mack-logo.png") 0 0 no-repeat;
    }

    #logo:hover,#logo:active,#logo:focus{
      background-position: 0 -450px;
    }

    #header{
      text-indent: -9999px;
    }

    #content{
      text-indent: -9999px;
    }

    #lien-pages{
      text-indent: -9999px;
      list-style-type: none;
    }

    #footer{
      text-indent: -9999px;
    }

    li{
      text-indent: -9999px;
      list-style-type: none;
    }
    -->
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="header">
      <h1>
        Mackraft (Vivian Gilles), jeune graphiste diplômé de l'ESA Saint-Luc Liège, vous propose son portfolio ainsi
        qu'un blog sur l'actualité graphique.
      </h1>
    </div>
    <div id="lien-pages">
      <ul>
        <li>
          <a href="https://mackraft.be/">home</a>
        </li>
        <li>
          <a href="http://mackraft.be/home/about/">about</a>
        </li>
        <li>
          <a href="http://mackraft.be/home/portfolio/">portfolio</a>
        </li>
        <li>
          <a href="http://mackraft.be/home/blog/">blog</a>
        </li>
        <li>
          <a href="http://mackraft.be/home/contact/">contact</a>
        </li>
      </ul>
    </div>
    <div id="content">
      <h3>
        Né à Ottignies-Louvain-la-Neuve le 20 mars 1990, j'ai commencé mes études artistiques à Saint-Luc Liège
        secondaire dans la section infographie. Diplômé et qualifié, j'ai continué dans cette direction en commençant
        un gradua à l'ESA Saint-Luc Liège dans la section graphisme. Trois ans d'enrichissement avec un mois de stage
        chez Plan.net Benelux qui a abouti au diplôme final. Graphiste freelance depuis cette réussite, il est temps de
        trouver ma place au sein d'une équipe!
      </h3>
    </div>
    <div>
      <a id="logo" title="mackraft" href="https://mackraft.be/" name="logo"></a>
    </div>
    <div id="footer">
      <p>
        design by mackraft.be
      </p>
    </div>
    <!-- DEBUT js-->
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>
    <script type="text/javascript">
/*<![CDATA[*/
    $(document).ready(function(){
    $("#logo").hide(0).delay(500).fadeIn(3500) /* reglage pour : l id ,cacher l id avant (document).ready, delay du fade */
    });
    /*]]>*/
</script>
    <!-- FIN js-->
  </body>
</html>


a+


♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
0
Réponse 2 / 6
Xyrto Messages postés 46 Date d'inscription   Statut Membre Dernière intervention   1
 
Super cela fonctionne comme sur des roulettes ! Je te remercie pour ta réponse claire et précise. Nickel. Si je veux inverser l'effet ( au clique l'image disparait petit à petit pour laisser apparaitre le site derrière ) le code change bcp ou je sais jouer avec les valeurs du script et c'est bon ?
0
Réponse 3 / 6
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
Salut

essaye d ajouter un truc comme ca , qui va fader la sortie de la page ! 

<script type="text/javascript">
    /*<![CDATA[*/
    $(document).ready(function()
      {
        $("#logo").hide(0).delay(500).fadeIn(3500) /* reglage pour : l id ,cacher l id avant (document).ready, delay du fade */



        $("a").each(function()

          {
            url = "#"+$(this).attr("href");
            $(this).attr("href", url);



            $("a").click(function()
              {
                redirect = $(this).attr("href").split('#')[1]
                $('#logo').fadeOut('slow', function()
                  {
                    window.location = redirect;
                  }
                );
              }
            );

          }
        );



      }
    );
    /*]]>*/
    </script>


a+
0
Réponse 4 / 6
Xyrto Messages postés 46 Date d'inscription   Statut Membre Dernière intervention   1
 
J'ai mis le script en fin de body et celui la ne marche pas.
Cependant si je dois faire plus qu'un copier coller faut le préciser parce que la le code est trop haut pour moi sur ce coups la! :)
( si trop compliqué pas de soucis c'est déjà bon comme ça ;)) je te remercie
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
;-)) voila ta page complete ! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Mackraft-Graphiste-Webdesigner
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content=
    "Mackraft (Vivian Gilles), jeune graphiste diplômé de l'ESA Saint-Luc Liège, vous propose son portfolio ainsi qu'un blog sur l'actualité graphique." />
    <meta name="keywords" content="Aywaille, Liège, Mackraft, mackraft, Graphiste, graphiste, Webdesigner" />
    <meta name="robots" content="index" />
    <meta name="REVISIT-AFTER" content="7 days" />
    <link rel="icon" type="image/ico" href="images/favicon.ico" />
    <style type="text/css">
/*<![CDATA[*/
    <!--
    #logo{
      height: 450px;
      left: 50%;
      margin: -230px 0 0 -230px;
      padding: 0;
      position: absolute;
      text-align: left;
      top: 50%;
      width: 450px;
      display: block;
      text-indent: -9999px;
      background: url("http://mackraft.be/images/mack-logo.png") 0 0 no-repeat;
    }

    #logo:hover,#logo:active,#logo:focus{
      background-position: 0 -450px;
    }

    #header{
      text-indent: -9999px;
    }

    #content{
      text-indent: -9999px;
    }

    #lien-pages{
      text-indent: -9999px;
      list-style-type: none;
    }

    #footer{
      text-indent: -9999px;
    }

    li{
      text-indent: -9999px;
      list-style-type: none;
    }
    -->
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="header">
      <h1>
        Mackraft (Vivian Gilles), jeune graphiste diplômé de l'ESA Saint-Luc Liège, vous propose son portfolio ainsi
        qu'un blog sur l'actualité graphique.
      </h1>
    </div>
    <div id="lien-pages">
      <ul>
        <li>
          <a href="https://mackraft.be/">home</a>
        </li>
        <li>
          <a href="http://mackraft.be/home/about/">about</a>
        </li>
        <li>
          <a href="http://mackraft.be/home/portfolio/">portfolio</a>
        </li>
        <li>
          <a href="http://mackraft.be/home/blog/">blog</a>
        </li>
        <li>
          <a href="http://mackraft.be/home/contact/">contact</a>
        </li>
      </ul>
    </div>
    <div id="content">
      <h3>
        Né à Ottignies-Louvain-la-Neuve le 20 mars 1990, j'ai commencé mes études artistiques à Saint-Luc Liège
        secondaire dans la section infographie. Diplômé et qualifié, j'ai continué dans cette direction en commençant
        un gradua à l'ESA Saint-Luc Liège dans la section graphisme. Trois ans d'enrichissement avec un mois de stage
        chez Plan.net Benelux qui a abouti au diplôme final. Graphiste freelance depuis cette réussite, il est temps de
        trouver ma place au sein d'une équipe!
      </h3>
    </div>
    <div>
      <a id="logo" title="mackraft" href="https://mackraft.be/" name="logo"></a>
    </div>
    <div id="footer">
      <p>
        design by mackraft.be
      </p>
    </div>
    <!-- DEBUT js-->
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>
    <script type="text/javascript">
    /*<![CDATA[*/
    $(document).ready(function()
      {
        $("#logo").hide(0).delay(500).fadeIn(3500) /* reglage pour : l id ,cacher l id avant (document).ready, delay du fade */

        /* debut fade #logo sur sortie page et redirection */
        $("a").each(function()
          {
            url = "#"+$(this).attr("href");
            $(this).attr("href", url);



            $("a").click(function()
              {
                redirect = $(this).attr("href").split('#')[1]
                $('#logo').fadeOut('slow', function()
                  {
                    window.location = redirect;
                  }
                );
              }
            );
           /* fin fade sur sortie page */
          }
        );
      }
    );
    /*]]>*/
    </script>
    <!-- FIN js-->
  </body>
</html>


a+
0
Réponse 6 / 6
Xyrto Messages postés 46 Date d'inscription   Statut Membre Dernière intervention   1
 
Parfait! Beau taff et grand merci ;)
0

Discussions similaires

[URGENT] Que veut dire prise (AUX IN)?
quentinel -
ankae -

18 réponses
autoradio Android que peut-on brancher sur vidéo input
chrisia -
baladur13 -

3 réponses
Que veut dire " in da place " ?
westcoastDJ -
fyu -

9 réponses
qu'est ce qu'une prise DC IN ?
daphdu974 -
Andy31200 -

3 réponses
Avis site DECO IN PARIS decoinparis.com [SUJET GROUPÉ].
robby54 -
PangolinRapide83 -

316 réponses