Animation de texte au survol d'un lien

Invité · 28/10/2013, 16h11

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** · 29/10/2013, 16h24

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** · 30/10/2013, 11h53

Envoyé par thecaco

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é · 30/10/2013, 14h59

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** · 30/10/2013, 16h41

Alors plusieurs possibilités s'offrent à vous :

ce genre avec un sprite animé avec javascript : http://lab.tylergaw.com/css-write-on/

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

typed.js

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