Fade in sur un sprite

Résolu/Fermé

Xyrto Messages postés 46 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 18 octobre 2017 - 3 oct. 2013 à 23:13
Xyrto Messages postés 46 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 18 octobre 2017 - 7 oct. 2013 à 22:14

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.

A voir également:

Fade in sur un sprite
Av in - Forum Audio
Navigation in private - Guide
Cvbs in 1 - Forum Autoradio
Deco in paris avis ✓ - Forum Consommation & Internet
Light in the box problème - Forum Consommation & Internet

6 réponses

Réponse 1 / 6

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié par RAD ZONE le 4/10/2013 à 01:46

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

Réponse 2 / 6

Xyrto Messages postés 46 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 18 octobre 2017 1
6 oct. 2013 à 23:28

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 ?

Réponse 3 / 6

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
7 oct. 2013 à 09:11

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>

Réponse 4 / 6

Xyrto Messages postés 46 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 18 octobre 2017 1
7 oct. 2013 à 20:23

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

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

Posez votre question

Réponse 5 / 6

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
7 oct. 2013 à 21:19

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

Réponse 6 / 6

Xyrto Messages postés 46 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 18 octobre 2017 1
7 oct. 2013 à 22:14

Parfait! Beau taff et grand merci ;)

Discussions similaires

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

qu'est ce qu'une prise DC IN ?

Avis site DECO IN PARIS decoinparis.com (lina sofas)

Que veut dire " in da place " ?

Arnaque du site light in the box

Discussions similaires

Newsletters