Comment faire défiler des textes

10 décembre 2017 à 16:54:21

Bonjour, j'aurais besoin d'aide svp , je suis un peu perdu.. je voudrais créer une animation texte, un premier texte qui défile de la gauche vers la droite,

puis un deuxième texte qui vient du bas vers le haut avec un temps d’arrêt dans la zone d'affichage en rouge, j'ai à peu prés réussi à faire ce que je voulais faire, c'est à dire faire défiler du texte mais le problème c'est qu'ils ne défilent pas comme je veux.. je ne sais pas comment le faire défiler vers le haut une fois que le premier texte à fini son animation.

voici mon HTML:

<!DOCTYPE> 
<html>
	<head>
	<link href="defile.css.css" rel="stylesheet" media="all" type="text/css" />
	<body> 
<div class="box">
	 <p class="defileGaucheDroite">
 Texte(1) qui defile de gauche à droite.
</p>

<p class="defileBasHaut">
  texte(2) qui defile de bas en haut.
</p>  
</div>	
	</<body>
</html>

CSS:

.box{
	border: 4px solid red;
	overflow: hidden;
	width:31%;
}

p {
  animation-duration: 8s;
  animation-name: glissement;
  animation-iteration-count: infinite;
}

.defileGaucheDroite {
  animation-direction: normal;
  
}

.defileBasHaut {
  animation-direction: top;
}
@keyframes glissement {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

-
Edité par FarCry 10 décembre 2017 à 16:55:20

JuliennePouchard

10 décembre 2017 à 20:06:16

Bonjour LudovicTaristas
Pour faire défiler votre texte veuillez svp utiliser la balise <marquee>, voici un exemple

<marquee>Le texte à faire défiler</marquee>

-
Edité par JuliennePouchard 10 décembre 2017 à 20:08:49

Comment Regarder Amazon Prime sur Android

AbcAbc6

10 décembre 2017 à 20:40:15

@JuliennePouchard Bonsoir, la balise marquee n'a jamais été standard, il ne faut pas l'utiliser.

C'est bien une animation @keyframes qu'il faut utiliser ou du JavaScript.

-
Edité par AbcAbc6 10 décembre 2017 à 20:40:36

Lucky13

10 décembre 2017 à 20:46:14

Hello,

Un jour, si j'y pense et trouve le temps je ferais un script sur le sujet.

En attendant le même sujet à été posé la semaine dernière (search en cours... 👀)

-> http://labs.viaxoft.com/texte-defilant-en-css/

$color_hover1

-
Edité par Lucky13 10 décembre 2017 à 20:49:46

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Anonyme

11 décembre 2017 à 10:24:38

Bonjour, attention la balise <marquee> ne fonctionne qu'avec internet explorer, ça vient de ton css tu déclares mal ton truc; et tu préfixes pas donc en fonction de ton navigateur ça marche ou pas.

exemple :

#carrerouge{
    width:250px;
    height:250px;
    background:red;
    position:absolute;
    animation:monmouvement 5s infinite;
    -webkit-animation:monmouvement 5s infinite;
    -moz-animation:monmouvement 5s infinite;
    -ms-animation:monmouvement 5s infinite;
    -o-animation:monmouvement 5s infinite;
    
        /* syntaxe:
        animation: nom de l'animation la durée en seconde ou en milliseconde et une répétition
    soit en valeur ou infinite
    ou
    animation-name:monmouvement;
    animation-duration:5s;
    animation-iteration-count:infinite;
    animation-delay:0;
    animation-timing-function:ease-in-out,
    */
}
@-webkit-keyframes monmouvement{
    from{transform:rotate(0deg);
       transform:rotate(0deg);
    } 
    
    to{transform:rotate(720deg);
        -webkit-transform:rotate(720deg);
       
}
}
    @-moz-keyframes monmouvement{
    from{transform:rotate(0deg);
        transform:rotate(0deg);
    
    } 
    to{transform:rotate(720deg);
        -moz-transform:rotate(720deg);
       
}
}
        @-ms-keyframes monmouvement{
    from{transform:rotate(0deg);
        transform:rotate(0deg);
    
    } 
    to{transform:rotate(720deg);
        -ms-transform:rotate(720deg);
       
}
}
            @-o-keyframes monmouvement{
    from{transform:rotate(0deg);
       transform:rotate(0deg);
    
    } 
    to{transform:rotate(720deg);
        -0-transform:rotate(720deg);
       
}
}
                @keyframes monmouvement{
    from{transform:rotate(0deg);
        transform:rotate(0deg);
    
    } 
    to{transform:rotate(720deg);
        transform:rotate(720deg);
       
}
}

Skull-dragon

11 décembre 2017 à 11:37:16

Salut pour compléter la réponse de Lucky13 j'avais déjà donné une réponse==> ici il y à peu à toi de l'adapter sans utiliser la balise marquee qui est déprécier

JuliennePouchard

15 décembre 2017 à 20:17:59

AbcAbc6 a écrit:

@JuliennePouchard Bonsoir, la balise marquee n'a jamais été standard, il ne faut pas l'utiliser.

C'est bien une animation @keyframes qu'il faut utiliser ou du JavaScript.

-
Edité par AbcAbc6 10 décembre 2017 à 20:40:36

Bonjour AbcAbc6,

Tout à fait d'accord avec vous, le Js et jquery sont les meilleurs pour mettre les animations, moi j'ai juste proposé une solution simple et rapide mais il n'est pas la meilleure solution

Comment Regarder Amazon Prime sur Android

Lucky13

15 décembre 2017 à 20:30:04

JuliennePouchard : en fait pour les animations événementielles on procède surtout ainsi :

On créé les animations CSS (keyframes) dans notre feuille CSS.

Soit on enchaîne en CSS pure, soit on utilise le Javascript pour gérer les événements (click, change, mouseover, gestion du delta, etc..). Et dans ce cas on modifie la classe de l'élément HTML qui a pour effet de lancer une animation/transition ou autre.

Bref le JS ne fait que changer la classe : https://www.alsacreations.com/article/lire/1498-LAPI-classList.html

Enfin pour jQuery il existe des plugins comme http://ricostacruz.com/jquery.transit/

-
Edité par Lucky13 15 décembre 2017 à 20:36:03

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS