J'essaie de faire défiler du texte dynamique sur la page. Je veux qu'il défile sur une surface incurvée et inclinée juste pour le design. Devrai-je utiliser Flash pour cela? Parce que je préférerais ne pas.Comment faire défiler du texte dynamique sur une courbe en HTML/Javascript/CSS?
Les caractères doivent-ils pivoter avec la courbe? Obtenir les caractères d'un texte pour suivre un chemin courbe (sans rotation) est possible avec JavaScript. Si le texte doit pivoter, vous pouvez le faire avec VML/SVG/Canvas, mais dans ce cas, vous pourriez être mieux avec Flash.
Ce n'est pas exactement ce que vous êtes après, mais un coup d'oeil sur la façon dont le texte se comporte et vous verrez ce que je veux dire par ne tourne pas: http://s.blixt.org/physics-enabled-html/
J'ai une idée de faire quelque chose qui peut, ou ne peut pas être ce que vous pensé, mais il pourrait être utile pour vous:
il cherche el ements avec l'attribut data-path (HTML 5: data-* attributes) et l'analyse pour créer un chemin pour le déplacement du texte.
Je mis à jour il également inclure la rotation en utilisant CSS3 pour les navigateurs qui le supportent (Mozilla et les navigateurs récents WebKit.)
Eh bien, vous pouvez animer chaque lettre simple ou paire de lettres. C'est faisable mais ce serait beaucoup plus efficace/plus rapide avec Flash. Vous auriez à faire une représentation mathématique de la courbe.
Est-ce vraiment nécessaire? Le texte clignotant/en mouvement n'est pas vraiment considéré comme une bonne pratique de conception. Bien sûr, il y a des exceptions.
Edit:
Voir les commentaires pour plus de pointeurs vers la solution.
Je sais que l'utilisation de chapiteau en général peut être très ennuyeux. Mais je veux voir si je peux le modifier et le rendre beau avec le reste du site. En outre, ce texte défilant fera partie de l'arrière-plan/design, pas du contenu. – fent
Eh bien, je ne vois rien de mal à utiliser JavaScript/HTML pour faire de l'animation. Je dis juste qu'il y a une raison pour laquelle tant de gens désactivent les gifs animés et les tags [blink] =). Ma réponse, comme celle de Blixt, est exacte. C'est faisable, mais cela prendrait beaucoup moins d'effort dans Flash que dans JavaScript. Vous devez diviser chaque caractère du texte en éléments séparés et animer chacun d'entre eux séparément ou utiliser le canevas. Si vous n'utilisez pas canvas, vous ne pouvez pas faire pivoter les éléments html (déplacez simplement em sur les axes x/y) sauf si vous utilisez Level 3 css qui n'est pas encore supporté par tous les navigateurs. –
Aussi pour les déplacer le long d'un chemin, vous devrez trouver comment représenter le chemin en utilisant une fonction mathématique. Selon la complexité du chemin, il existe différentes approches pour le faire. De votre question je suppose que le chemin n'est pas quelque chose de simple comme un cercle. Vous pouvez vérifier http://en.wikipedia.org/wiki/Polynomial_interpolation et http://en.wikipedia.org/wiki/Spline_(mathematics) Si vous n'avez toujours pas assez de pointeurs de nos réponses à réellement le code, vous êtes probablement mieux avec flash où il suffit de quelques clics de souris pour le faire. –
Je préférerais que le texte puisse tourner. – fent
Si vous regardez l'exemple ci-dessus, vous verrez qu'il est * possible * de déplacer le texte le long d'un chemin et de le faire tourner uniquement avec JavaScript, mais vous n'aurez pas de support de rotation pour les anciens navigateurs. La partie moving-along-a-path fonctionne dans tous les navigateurs. – Blixt
Oh, et si vous utilisez quelque chose comme ça, je vous recommande de placer le chemin dans la partie liée à l'interface de votre JavaScript. Le chemin n'ajoute pas de valeur au contenu et ne devrait pas être placé dans le HTML, je l'ai juste fait parce que je voulais l'essayer et voir à quel point cela a fonctionné à travers les navigateurs (et il s'avère que cela fonctionne dans tous les principaux navigateurs .) – Blixt