Partagez | 
 

 signature avec effet accordéon

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

kiri

Doyenne

Bons Points (BP) : 60

Voir le profil de l'utilisateur

MessageSujet: signature avec effet accordéon   Mer 6 Avr - 15:31

Dernière édition par kiri le Ven 8 Avr - 8:18, édité 1 fois
~ Signature avec effet accordéon ~
Coucou,

voici un tutoriel pour embellir vos signatures

Le but



Réaliser une signature avec effet accordéon comme celle-ci




Voyons le code de plus près



Code du début



Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Le titre de la page</title>

ça c'est basique, c'est le début de la page html. On précise grâce au "Charset" qu'on accepte les accents (iso-8859-1 = caractère de notre partie de l'europe)

On danse la Java ..



On appelle les différents fichiers jquery. Le jquery permet de donner un coté dynamique à nos pages en jouant avec leur aspect visuel.

Le tout premier :

Code:
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Appelle la bibliothèque de base de jquery (celle qui contient toutes les fonctions prédéfinis, comme le .slide, ou le .show qu'on peut utiliser pour les en-têtes par exemple Smile )

Code:
<script type="text/javascript" >
$(document).ready(function(){
    lastBlock = $("#a1");
    maxWidth = 210;
    minWidth = 75;   

    $("ul li a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
   $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
   lastBlock = this;
      }
    );
});
</script>

appellent la fonction qui va vraiment déclencher l'animation de la sign'

Explication du javascript



On s'accroche pour cette partie !!

Voici le décryptage du javascript:

Code:
 $("ul li a").hover(

-> Quand tu passes sur un lien de la liste

Code:

      function(){

-> ça déclenche une fonction

Code:

        $(lastBlock).animate({width: minWidth+"px"},

-> qui fait que le bloc affiché par défaut va voir sa largeur passer de sa taille actuel à la largeur minimum fixé

Code:
   { queue:false, duration:400 });

-> Cette animation va durer 400 milliseconde (duration). Et la seconde animation ne sera déclenchée que lorsque celle-ci sera finie (queue:false)

Code:

  $(this).animate({width: maxWidth+"px"},

-> ensuite, le lien sur lequel on a cliqué (this) va lui voir sa largeur passer de la taille actuelle à la taille maximale que l'on a choisi

Code:
  { queue:false, duration:400});

-> Cette animation va durer 400 millisecondes (duration). Et l'étape suivant du javascript ne sera fait que lorsque l'animation sera finie (queue:false)
Code:

  lastBlock = this;

-> et le lien sur lequel on a cliqué (this) devient le dernier bloc affiché (celui à partir duquel commencera l'animation si on clique ailleurs)

( merci à Miettes pour les explications )

Un peu de Décoration



On règle l'apparence de notre signature
Code:
<style>

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 10px;
}

ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}

#a1{
  width: 210px;
}

ul li img{
  position: absolute;
  border: 3px solid #881212;
}

ul li p{
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
}
</style>

On remplit tout ça



Chaque slide va se présenter de la manière suivante :

Code:
 <li>
    <a>
      <img src="/images/onglet3.jpg" />
      <p>
        <strong>Onglet3</strong><br/>
        contenu Onglet3
      </p>
    </a>
  </li>


Code Final



La signature va se présenter sous cette forme la :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Le titre de la page</title>

<style>

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 10px;
}

ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}

#a1{
  width: 210px;
}

ul li img{
  position: absolute;
  border: 3px solid #881212;
}

ul li p{
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
    lastBlock = $("#a1");
    maxWidth = 210;
    minWidth = 75;   

    $("ul li a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
   $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
   lastBlock = this;
      }
    );
});
</script>
</head>
<body>


<ul>
  <li>
    <a id="a1">
        <img src="http://i68.servimg.com/u/f68/15/28/98/12/img-1710.png" />
      <p>
        <strong>Onglet1</strong><br/>
        contenu Onglet1
      </p>
    </a>
  </li>
  <li>
    <a>
        <img src="http://i68.servimg.com/u/f68/15/28/98/12/img-1710.png" />
      <p>
        <strong>Onglet2</strong><br/>
          contenu Onglet2
      </p>
    </a>
  </li>
  <li>
    <a>
        <img src="http://i68.servimg.com/u/f68/15/28/98/12/img-1710.png" />
      <p>
        <strong>Onglet3</strong><br/>
        contenu Onglet3
      </p>
    </a>
  </li>
</ul>

</body>

</html>


vous pouvez bien sur personnaliser tout ceci en vous aidant de ces petits [Trucs] Code CSS

Modifier les images, les tailles etc Smile

Bon courage et si vous avez des soucis, n'hésitez pas great

Tuto réalisé par ©kiri avec surtout des explications de Miettes pour Sop


EDIT Miettes :

Voici la modif à faire si tu veux mettre des liens dans les onglets :

1/ Transformer les liens dans le html

Pour cela, remplacez ça (ne regardez qu'au niveau des "a" des liens ^^ )

Code:
 <li>
    <a>
      <img src="/images/onglet3.jpg" />
      <p>
        <strong>Onglet3</strong><br/>
        contenu Onglet3
      </p>
    </a>
  </li>

par ça

Code:
 <li>
    <div>
      <img src="/images/onglet3.jpg" />
      <p>
        <strong>Onglet3</strong><br/>
        contenu Onglet3
      </p>
    </div>
  </li>

sans oublier celui là :

Code:
<li>
    <a id="a1">
        <img src="http://i68.servimg.com/u/f68/15/28/98/12/img-1710.png" />
      <p>
        <strong>Onglet1</strong><br/>
        contenu Onglet1
      </p>
    </a>
  </li>

à remplacer par :

Code:
<li>
    <div id="a1">
        <img src="http://i68.servimg.com/u/f68/15/28/98/12/img-1710.png" />
      <p>
        <strong>Onglet1</strong><br/>
        contenu Onglet1
      </p>
    </div>
  </li>

2/ Je modifie le javascript

Là on ne déclanche plus sur les "a" mais sur les "div". Donc on remplace ça :

Code:
$("ul li a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
  $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
  lastBlock = this;
      }

par ça :

Code:
$("ul li div").click(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
  $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
  lastBlock = this;
      }

3/ N'oublions pas le css

Ici, on va modifier ceci

Code:
ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}

par ça

Code:
ul li div{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
}


Et hop ! Vous pouvez mettre des liens dans cette sign' Smile Cool hein ? Very Happy




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].

Je soussignée, Kiri,  accepte qu'un directeur reposte le tutoriel "signature avec effet accordéon" tel que je l'ai rédigé.
___________________


Présidente LOTR = Ligue Organique des Taupes Ridicules

J’ai toujours rêvé que mon ordinateur soit aussi simple à utiliser que mon téléphone.
Ce rêve est devenu réalité : je ne comprends plus comment utiliser mon téléphone   [ by Bjarne Stroustrup ]

Spoiler:
 

 

signature avec effet accordéon

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Resolu] Bannière avec lien dans une signature
» Tableau de partenaires avec effet Zoom
» Signature RPG équin
» voyage avec l accordeon
» Pepito joué sur FR5b + Ketron XD3

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2018 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants