Animation texte
habilis
-
leito666 Messages postés 83 Statut Membre -
leito666 Messages postés 83 Statut Membre -
Bonjour,
Voila la ligne de texte que je dois changer.
<h1 class="wow slideInUp" style="font-family:'Arial',sans-serif;text-align:center; font-size: 30px ;color:#000000;">EFFET ANIMATION WEBACAPPELLA</h1>
Comment faire pour faire aller le texte un endroit, le stoper et le faire disparaitre. en bref un texte animé sur un slide et le tout synchro.
j'espere avoir été clair. merci pour vos réponses.
Voila la ligne de texte que je dois changer.
<h1 class="wow slideInUp" style="font-family:'Arial',sans-serif;text-align:center; font-size: 30px ;color:#000000;">EFFET ANIMATION WEBACAPPELLA</h1>
Comment faire pour faire aller le texte un endroit, le stoper et le faire disparaitre. en bref un texte animé sur un slide et le tout synchro.
j'espere avoir été clair. merci pour vos réponses.
A voir également:
- Animation texte
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Texte barré whatsapp - Guide
- Mettre un texte en majuscule - Guide
3 réponses
code HTML
Ligne 12 ENLEVER L'ESPACE entre & et nbsp;
code CSS
Les 2 codes peuvent être testé sur le site --> codepen.io/pen
( bien mettre le code HTML et CSS aux bons endroits ^^ )
---------------------------------------------------------------------
Il est possible de supprimer :
.. pour finalement avoir :
---------------------------------------------------------------------
Ce code est valable pour 6 caractères ,mais il est possible d'en ajouter
( #anim1 div:nth-child(6) )
5 pour le mot " Texte " + 1 pour " l'espace " à la fin
Bonne chance ;)
<html>
<head>
<title> Nom du site </title>
<link href="script.css" media="all" rel="stylesheet" type="text/css"></link>
</head>
<body>
<div id="anim1" style="border:1px solid green">
<div>& nbsp;</div>
<div>e</div>
<div>t</div>
<div>x</div>
<div>e</div>
<div>T</div>
</div>
</body>
</html>
Ligne 12 ENLEVER L'ESPACE entre & et nbsp;
code CSS
html {
background-color: grey;
width: 98%;
margin-left: 1%;
height: 98%;
margin-top: 1%;
}
body {
width: 90%;
margin-left: 5%;
height: 50%;
background-color: black;
}
a:link {
text-decoration: none;
}
#anim1 {
margin-top: 3%;
margin-left: 4%;
width: 80%;
height: 10%;
}
#anim1 {
position: absolute;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
#anim1 div {
position: absolute;
width: 20px;
height: 36px;
opacity: 0;
font-family: Zapf Chancery, cursive;
font-weight: 900;
font-size: 24px;
transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
color: #dd7700;
}
#anim1 div {
animation: move 3.8s linear infinite;
-o-animation: move 3.8s linear infinite;
-moz-animation: move 3.8s linear infinite;
-webkit-animation: move 3.8s linear infinite;
}
#anim1 div:nth-child(2) {
animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
#anim1 div:nth-child(3) {
animation-delay: 0.8s;
-o-animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
#anim1 div:nth-child(4) {
animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
#anim1 div:nth-child(5) {
animation-delay: 1.6s;
-o-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
-webkit-animation-delay: 1.6s;
}
#anim1 div:nth-child(6) {
animation-delay: 2s;
-o-animation-delay: 2s;
-moz-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
@keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
Les 2 codes peuvent être testé sur le site --> codepen.io/pen
( bien mettre le code HTML et CSS aux bons endroits ^^ )
---------------------------------------------------------------------
Il est possible de supprimer :
style="border:1px solid green"( dans HTML )
.. pour finalement avoir :
<div id="anim1">( donc sans le cadre vert )
---------------------------------------------------------------------
Ce code est valable pour 6 caractères ,mais il est possible d'en ajouter
( #anim1 div:nth-child(6) )
5 pour le mot " Texte " + 1 pour " l'espace " à la fin
Bonne chance ;)
Merci beaucoup Leito, d'avoir répondu. Malheureusement, je n'ai pas réussi à mettre les codes au bon endroit parce que j'ai un cadre et du texte sans aucune animation. j'ai mis le code html dans le head de la page et le code Ccs dans le boostrap. Mais Ca marche pas. Ah la la!! Il me reste plus beaucoup de cheveux. en tous cas merci encore.
De rien Habilis ;)
il ne faut pas mettre tout le code html dans le <head>
Le <head> doit ressembler à ça :
et seulement après on ajoute <body> pour le contenue de la page
( texte , animation , image ....etc ).
..Si je comprend bien class="wow slideInUp" c'est le cadre ?
si oui , dans mon code il correspond à id="anim1"
Et EFFET ANIMATION WEBACAPPELLA c'est le texte à animer ?
Il est important de définir le nombre de caractères pour animer un texte .
exemple :
_Pour <h1>Hello World</h1>
il faut 5 caractères pour le mot "Hello" + 1 caractères pour l'espace entre les mots + 5 caractères pour le mot "World" + 1 caractères pour l'espace après le dernier mot . Soit un total de 12 caractères .
_Pour <h1>EFFET ANIMATION WEBACAPPELLA</h1> il faudra 29 caractères
si j'peux aider à faire tomber les derniers ce sera avec plaisir ^^
__<< j'ai un cadre et du texte sans aucune animation. j'ai mis le code html dans le head >>
il ne faut pas mettre tout le code html dans le <head>
Le <head> doit ressembler à ça :
<head>
<title> Nom du site </title>
<link href="script.css" media="all" rel="stylesheet" type="text/css"></link>
</head>
et seulement après on ajoute <body> pour le contenue de la page
( texte , animation , image ....etc ).
..Si je comprend bien class="wow slideInUp" c'est le cadre ?
si oui , dans mon code il correspond à id="anim1"
Et EFFET ANIMATION WEBACAPPELLA c'est le texte à animer ?
Il est important de définir le nombre de caractères pour animer un texte .
exemple :
_Pour <h1>Hello World</h1>
il faut 5 caractères pour le mot "Hello" + 1 caractères pour l'espace entre les mots + 5 caractères pour le mot "World" + 1 caractères pour l'espace après le dernier mot . Soit un total de 12 caractères .
_Pour <h1>EFFET ANIMATION WEBACAPPELLA</h1> il faudra 29 caractères
__<< Mais Ca marche pas. Ah la la!! Il me reste plus beaucoup de cheveux >>
si j'peux aider à faire tomber les derniers ce sera avec plaisir ^^
Au pire une image (.gif) devrait faire l’affaire pour une simple animation de texte .
https://www.online-image-editor.com/
https://www.online-image-editor.com/
