jQuery Girl
  1. jQuery Girl
  3. jquery / css: faire défiler le texte à l’intérieur de div horizontalement comme un ticker de news sans plugin
Intereting Posts
Pourquoi ce code slidequoggle jquery ne fonctionne-t-il pas? code de statut jquery ajax http Comment lire des nœuds parents avec des nœuds enfants partiellement sélectionnés L’exception c # n’est pas capturée correctement par jquery ajax Classe ajoutée dans un gestionnaire et en activant déjà un autre Comment actualiser un object SQLalchemy à l’aide de jQuery sans charger la page Web Analyser la liste JSON (via C #) dans jQuery AJAX Success Callback jQuery Datepicker dans l’application Angular2. Le format d’entrée doit différer du format d’affichage Empêcher les doubles soumissions Plusieurs calendriers affichés ou valeur sélectionnée ne s’affiche pas correctement comment sélectionner des options dans la liste de sélection multiple avec jQuery? Datepicker non déclenché à la page suivante hasClass retourne toujours faux même quand on bascule Aide JQuery nécessaire: quel événement est déclenché dans la liste déroulante avant l’événement de modification Comment écrire une boucle dans jQuery qui attend que chaque fonction soit terminée avant de continuer la boucle

jquery / css: faire défiler le texte à l’intérieur de div horizontalement comme un ticker de news sans plugin

tout le monde a quelques astuces pour créer du texte à l’intérieur d’une div, faire défiler horizontalement de droite à gauche de manière “téléscripteur” sans passer par un plugin. Voici un exemple de ce que j’essaie d’accomplir (il s’agit d’une solution de plug-in: http://www.maaki.com/scrollingText.html ).

Voici une solution rapide à ceci: http://jsfiddle.net/4mTMw/8/ 

 var marquee = $('div.marquee'); marquee.each(function() { var mar = $(this),indent = mar.width(); mar.marquee = function() { indent--; mar.css('text-indent',indent); if (indent < -1 * mar.children('div.marquee-text').width()) { indent = mar.width(); } }; mar.data('interval',setInterval(mar.marquee,1000/60)); });​

En utilisant la propriété css text-indent indent, vous pouvez le faire plutôt simplement.

J’ai récemment résolu ce problème avec des animations d’images clés CSS.

Essentiellement, votre ticker a besoin d’une div de wrapper avec un débordement masqué. Les tickers contenant les éléments doivent afficher inline-block afin qu’ils soient alignés: 

 
 
 
Letterpress chambray brunch.
 
Vice mlkshk crucifix beard chillwave meditation hoodie asymmesortingcal Helvetica.
 
Ugh PBR&B kale chips Echo Park.

Exemple CSS: 

 .ticker-wrap { position: fixed; bottom: 0; width: 100%; overflow: hidden; height: 4rem; background-color: rgba(51, 51, 51, 0.5); padding-left: 100%; // offsets items to begin } .ticker { display: inline-block; height: 4rem; line-height: 4rem; white-space: nowrap; padding-right: 100%; // taken from container as display inline-block } .ticker__item { display: inline-block; padding: 0 2rem; font-size: 2rem; color: white; }

J’ai une démo qui utilise l’animation d’images clés css pour transformer le contenu d’un côté à l’autre à l’infini. nb Les versions préfixées du vendeur ne sont pas affichées 

 @keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } }

Le seul ajustement dont vous avez besoin est de définir la durée de l’animation et de l’appliquer à .ticker. 

 .ticker { animation-name: ticker; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 25s; // tweak based on number of items/desired speed }

Vous pouvez voir la démo complète

tu pourrais faire quelque chose comme ça 

 
 this is the scrolling text

et une fonction js 

 function scroll() { $('#scrolltext').css('left', $('#scrollcontainer').width()); $('#scrolltext').animate({ left: '-='+($('#scrollcontainer').width()+$('#scrolltext').width()) }, 2000, function() { scroll(); }); } scroll();

testé. peut être trouvé ici: http://jsfiddle.net/zrW5q/85/