Comment puis-je créer un effet de texte défilant?

Je suis de créer un effet de texte défilant avec CSS3 animation.

CSS:

#caption {
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 20px;
    line-height: 30px;
    height:30px;
    width: 100%;
    white-space: nowrap;
    -moz-animation:  caption 50s linear 0s infinite;
    -webkit-animation:  caption 50s linear 0s infinite;
}
@-moz-keyframes caption { 
    0% { margin-left:120%; } 100% { margin-left:-4200px; }  
}
@-webkit-keyframes caption { 
    0% { margin-left:120%; } 100% { margin-left:-4200px; }  
}

HTML:

<div id="caption">
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.
</div>

Je peux maintenant la base de marquise effet, mais le code est trop spécifique pour cette démo.

Est-il un moyen d'éviter d'utiliser des valeurs spécifiques comme margin-left:-4200px;, afin qu'il puisse adapter le texte dans n'importe quelle longueur?

Voici une semblable démonstration: http://jsfiddle.net/jonathansampson/XxUXD/ qui utilise text-indent mais toujours avec des valeurs spécifiques.

InformationsquelleAutor Fred Wu | 2014-01-20

77

Avec une petite modification du balisage, voici mon approche (j'ai juste inséré un span à l'intérieur du paragraphe):

CSS:
```
.marquee {
  width: 450px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
```
HTML:
```
<p class="marquee">
   <span>
       Windows 8 and Windows RT are focused on your life—your friends 
       and family, your apps, and your stuff. With new things like the 
       Start screen, charms and a Microsoft account, you can spend    
       less time searching and more time doing.
   </span>
   </p>
```
JSFiddle Démo

(frontières inclus uniquement pour des fins de débogage, testé sur Firefox et Chrome)

Pas de valeurs codées en dur — dépendante sur le paragraphe de largeur ont été insérés

L'animation s'applique le CSS3 transform propriété (utiliser des préfixes si nécessaire) de sorte qu'il fonctionne bien.

Si vous avez besoin d'insérer un délai juste une fois au début et ensuite également définir une animation-delay. Si vous avez besoin de place pour insérer un petit retard à l' chaque boucle puis essayer de jouer avec un supérieur padding-left (par exemple 150%)
- Cela n'a pas fonctionné pour moi, quand je l'ai essayé sur mon site. J'ai trouvé qu'il y a une ressource externe prefixfree.js ce qui est nécessaire. Je dois avoir remarqué les (1) à côté des ressources externes sur le jsfiddle page. Pour ceux qui ont juste copié le texte ci-dessus, sans y aller, vous aurez besoin de la prefixfree fichier javascript aussi.
- bien sûr, vous devez ajouter le vendeur préfixes si nécessaire.
- Merci, mais je me demandais.. Est-il possible de détecter si le texte a fini de défilement à l'aide de javascript?
- J'ai tordu un peu de sorte qu'au lieu de partir sur la droite, il commence avec le premier texte déjà positionné à gauche. Petit changement: ajouter .marquee span { animation-delay: -7.5s; }
- Version Simple : jsfiddle.net/MaY5A/1437
- Est-il possible de faire de l'animation, sans fuite de l'espace? Je veux dire la deuxième animation de commencer avant le 1er de l'animation est de terminer ce qu'aucun espace vide entre l'animation. Je vous remercie.
- Très bien, mais si les caractères du texte devient plus ou moins, les changements de vitesse ainsi. Le plus du texte, le plus rapidement le texte. Est-il une solution pour cela? @fcalderan
- essayez d'augmenter l'animation-durée
- Cette réponse a travaillé, en quelque sorte, Si vous rencontrez des comportements bizarres comme: Texte ralentit lorsque pleinement de la vue (même avec linear) ou: Lors de l'utilisation de text-indent: -100% le texte s'arrête à ~50%. Vous pourriez avoir le css de la balise: text-align: center sur. Il provoque des choses bizarres à se produire. Je voulais juste rajouter ici au cas où quelqu'un a eu des problèmes que j'avais.
InformationsquelleAutor fcalderan

Basée sur la réponse précédente, principalement @fcalderan, cette tente défile lors de son survol, avec l'avantage que l'animation des parchemins complètement, même si le texte est plus court que l'espace à l'intérieur de ça défile, également toute la longueur de texte prend la même quantité de temps (cela peut être un pros ou les inconvénients) lorsqu'il n'est pas plané le texte de retour à la position initiale.

Pas de valeur codée en dur autre que le défilement du temps, le mieux adapté pour les petits de défilement des espaces

CSS:

.marquee {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    display: inline-flex;    
}

.marquee span {
    display: flex;        
    flex-basis: 100%;
    animation: marquee-reset;
    animation-play-state: paused;                
}

.marquee:hover> span {
    animation: marquee 2s linear infinite;
    animation-play-state: running;
}

@keyframes marquee {
    0% {
        transform: translate(0%, 0);
    }    
    50% {
        transform: translate(-100%, 0);
    }
    50.001% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(0%, 0);
    }
}
@keyframes marquee-reset {
    0% {
        transform: translate(0%, 0);
    }  
}

HTML:

<span class="marquee">
    <span>This is the marquee text</span>
</span>

InformationsquelleAutor Mosè Bottacini

Les réponses acceptées animation ne fonctionne pas sur Safari, je l'ai mis à jour à l'aide de traduire au lieu de padding-left qui rend pour une plus lisse, à l'épreuve des balles d'animation.

Aussi, les réponses acceptées démo de violon a beaucoup d'inutiles styles.

J'ai donc créé une version simple, si vous voulez juste de couper et de coller le code utile, et ne pas passer 5 minutes de compensation par le biais de la démo.

http://jsfiddle.net/e8ws12pt/

CSS:

.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    height: 16px;
    display: block;
}
.marquee span {
    display: inline-block;
    text-indent: 0;
    overflow: hidden;
    -webkit-transition: 15s;
    transition: 15s;
    -webkit-animation: marquee 15s linear infinite;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }
    100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }
}

HTML:

<p class="marquee"><span>Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-origin coffee iPhone. Edison bulb blue bottle neutra shabby chic. Kitsch affogato you probably haven't heard of them, keytar forage plaid occupy pitchfork. Enamel pin crucifix tilde fingerstache, lomo unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter.</span></p>

InformationsquelleAutor Pixelomo

0

Les éléments suivants doivent faire ce que vous voulez.
```
@keyframes marquee {
    from  { text-indent:  100% }
    to    { text-indent: -100% }
}
```
- ne fonctionne pas, essayez-le sur l'exemple de violon.
- Fonctionne pour moi dans Safari, Chrome et Firefox. jsfiddle.net/XxUXD/711
- Non, il ne fonctionne pas, puisque le parent largeur est considéré pour cette: Laissez défiler jusqu'à la fin et de voir que le texte disparaît avant qu'elle équivaut complètement hors de la vue: jsfiddle.net/XxUXD/712
- J'ai juste voté à vos commentaires, vous avez raison... personne ne m'a dit qu'il s'exécute à l'infini. 😉
InformationsquelleAutor Lars Beck

Vous devez vous connecter pour publier un commentaire.