Discussion :

[Invité]

Bonjour à tous,

Tout d'abord, j'espère poster mon message dans la bonne rubrique, j'avoue avoir hésité, ne sachant pas trop vers où me diriger.

J'utilise Wordpress pour développer des sites, et une cliente me demande d'afficher un texte manuscrit (en animation) au survol des liens de son menu.
Plusieurs questions me viennent donc à l'esprit:
1- Est-ce possible d'afficher une animation au survol d'un lien?
2- Si oui, quelle technologie utiliser?

Après quelques recherches, il me semble qu'After Effect est le mieux placé pour réaliser l'animation, mais puis-je l'insérer dans les liens du menu Wordpress?
Me conseillez-vous une autre méthode (JQuery???)?

Voilà, mes questions restent assez général, une fois que je saurai vers où me diriger, je pense arriver à me débrouiller pour réaliser l'animation. Mais pour bien démarrer, j'ai besoin de vos lumières.

En vous remerciant par avance pour votre temps et vos conseils...

[grafimages]

Bonjour,

Il me semble bien plus logique d'utiliser, soit les animations HTML5/CSS3, soit JQuery, soit une combinaison, plutôt qu'une vidéo.

Rien qu'avec JQuery, tu as déjà pas mal de possibilités : http://megahitmag.com/jquery-text-an...les-tutorials/

[rodolphebrd]

Après quelques recherches, il me semble qu'After Effect est le mieux placé pour réaliser l'animation

Non pas vraiment surtout qu'aujourd'hui vous avez des outils performants.
grafimages vous en donne un exemple parmi tant d'autres.

Avez-vous un exemple d'animation ?

[Invité]

Bonjour et merci pour ces premières réponses.

Je viens de regarder grafimages, je tombe sur le site d'une agence qui réalise, entre autres, des animations en Flash... Je n'ai pas dû trouver le bon lien...

Pour l'animation que je souhaite, il s'agit d'un texte qui s'écrit au fur et à mesure, en écriture manuscrite (lors du survol d'un lien). Comme ici:
http://www.photoshop-creation.com/tu...ure.php?id=253

[rodolphebrd]

Alors plusieurs possibilités s'offrent à vous :

1. ce genre avec un sprite animé avec javascript : http://lab.tylergaw.com/css-write-on/
   
2. un exemple simple avec jquery: http://codepen.io/anon/pen/LnxmC
   

   Code :

   Sélectionner tout - Visualiser dans une fenêtre à part

    <h1 id="target"></h1>

   Code javascript :

   Sélectionner tout - Visualiser dans une fenêtre à part

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   $(function(){
     var str = "Voici un texte qui s'écrit tout seul.".split("");
     var delay = 0;
     for (var i = 0; i <= str.length; i++) {
       (function(str){
       delay += 50 + Math.floor(Math.random()*11)*6;
       setTimeout(function(){
         appendStr(str)       
       },delay);
     })(str[i])
     }
     function appendStr(str) {
         $('#target').append(str);
     }
   });

3. typed.js
   
4. en css pur : http://codepen.io/anon/pen/mynId
   

   Code html :

   Sélectionner tout - Visualiser dans une fenêtre à part

   <h1>Voici un texte qui s'écrit tout seul.</h1>

   Code css :

   Sélectionner tout - Visualiser dans une fenêtre à part

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   @-webkit-keyframes typing {
       from { width: 0 }
       to { width:16.3em }
   }
    
   @-moz-keyframes typing {
       from { width: 0 }
       to { width:16.3em }
   }
    
   @-webkit-keyframes blink-caret {
       from, to { border-color: transparent }
       50% { border-color: black }
   }
    
   @-moz-keyframes blink-caret {
       from, to { border-color: transparent }
       50% { border-color: black }
   }
    
   body { font-family: Consolas, monospace; }
    
   h1 { 
       font-size:150%;
       width:16.3em;
       white-space:nowrap;
       overflow:hidden;
       border-right: .1em solid black;
    
       -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                           blink-caret 1s step-end infinite;
       -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                           blink-caret 1s step-end infinite;
   }

[Invité]

Alors plusieurs possibilités s'offrent à vous :

[LIST=1][*]ce genre avec un sprite animé avec javascript : http://lab.tylergaw.com/css-write-on/

La première solution a l'air idéale au niveau du rendu. Mais, question de débutante: Comment dois-je faire pour l'afficher au survol d'un lien?

[rodolphebrd]

en utlisant la pseudo-classe hover

J'imagine un peu le rendu avec le déclenchement au survol, et je me dis que ce n'est pas forcément la meilleure solution.

L'utilisateur qui survole un lien le fait sur un laps de temps très court et n'attendra pas que le texte se déroule pour le lire.

A moins qu'il s'agisse d'un texte très court et animé très vite, mais là encore ça laisse supposer que celui-ci n'est pas visible tant qu'il n'est pas survolé. Donc en terme d'ergonomie c'est moyen.

Je ne fais que des suppositions bien sûr car je n'ai pas d'idée précise sur le projet.

[Invité]

C'est vrai au niveau ergonomie, c'est moyen.

Merci beaucoup pour tous ces conseils!