Animation texte
Fermé
habilis
-
25 juil. 2016 à 18:01
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017 - 1 août 2016 à 00:32
leito666 Messages postés 74 Date d'inscription mercredi 18 avril 2012 Statut Membre Dernière intervention 15 octobre 2017 - 1 août 2016 à 00:32
A voir également:
- Animation texte
- Excel cellule couleur si condition texte - Guide
- Mettre un texte en majuscule - Guide
- Transcription audio en texte word gratuit - Guide
- Texte barré whatsapp - Guide
- Copier texte pdf - Guide
3 réponses
leito666
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017
Modifié par leito666 le 30/07/2016 à 03:44
Modifié par leito666 le 30/07/2016 à 03:44
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.
leito666
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017
Modifié par leito666 le 31/07/2016 à 22:58
Modifié par leito666 le 31/07/2016 à 22:58
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 ^^
leito666
Messages postés
74
Date d'inscription
mercredi 18 avril 2012
Statut
Membre
Dernière intervention
15 octobre 2017
Modifié par leito666 le 1/08/2016 à 00:36
Modifié par leito666 le 1/08/2016 à 00:36
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/
