CSS / JQuery alimenté défilement latéral du texte en survol

J’ai un fil Twitter sur un site Web que je dirige. Cependant, il est coupé sur les petits écrans. J’ai une barre assez grande pour une ligne de texte dans laquelle j’ai le dernier tweet. Je veux que le tweet soit ellipsé ou disparaisse à la fin s’il est trop long. Mais en vol stationnaire, je veux que le texte glisse lentement vers la gauche, exposant ainsi la partie cachée.

Cet effet est utilisé sur l’iPod classic lorsque vous mettez en surbrillance une chanson dont le titre est plus large que l’écran. (J’espère que vous comprenez ce que je vais faire.)

Je suis juste curieux de savoir comment je mettrais en place quelque chose comme ça? Comment puis-je forcer le texte à restr sur une ligne?

Voici un moyen assez simple de le faire. Commencez par configurer une div contenant votre texte long:

 Here is the long content, long long content. So long. Too long.

Vous pouvez utiliser certains CSS pour gérer automatiquement la troncature et les points de suspension:

 div#container { /* among other settings: see fiddle */ width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

Si vous déterminez ensuite la largeur native et non tronquée du contenu, vous pouvez utiliser la .animate() de jQuery pour déplacer ce contenu à une vitesse constante, même si vous ne connaissez pas la longueur du texte jusqu’au moment de l’exécution cas avec un fil twitter). Voici un moyen un peu mécanique d’obtenir la mesure:

 var true_width = ( function(){ var $tempobj = $('#container') // starting with truncated text div container .clone().contents() // duplicate the text .wrap('
') // wrap it in a container .parent().appendTo('body') // add this to the dom .css('left','-1000px'); // but put it far off-screen var result = $tempobj.width(); // measure it $tempobj.remove(); // clean up return result; })();

Enfin, quelques animations:

 $('#container').one('mouseenter', function(){ // perhaps sortinggger once only var shift_distance = true_width - $(this).width(); // how far to move var time_normalized = parseInt(shift_distance / 100, 10) * 1000; // speed $(this).contents().wrap('').parent() // wrap in div .animate({ left: -shift_distance, right: 0 }, time_normalized, 'linear'); // and move the div within its "viewport" });

Quelle que soit la longueur du texte, vous obtiendrez une vitesse constante d’environ une seconde par 100 pixels (ajustez à votre guise). Réinitialiser ou rembobiner le contenu de la souris est laissé comme un exercice. Cette approche comporte des éléments naïfs, mais peut vous donner quelques idées.

Voici un exemple de travail: http://jsfiddle.net/redler/zdvyj/

Enfin, voici mon entrée: http://jsfiddle.net/sdleihssirhc/AYYQe/3/

Truc cool:

Bibliothèque agnostique
Utilise scrollLeft au lieu d’un positionnement absolu, donc plus fluide et plus rapide
Utilise text-overflow:ellipsis au lieu d’append des éléments DOM

Quelques plugins existent pour cela (Remy Sharp: http://remysharp.com/demo/marquee.html par exemple), mais si vous construisez à partir de rien:

L’élément en cours de défilement doit avoir “white-space: nowrap;” (pour le garder sur une seule ligne), “position: absolute” (pour le faire défiler à gauche et à droite) et enveloppé dans un élément relativement positionné comportant “overflow: hidden” (pour le faire apparaître uniquement comme la largeur que vous souhaitez afficher) .

En utilisant jQuery, vous pouvez utiliser .animate () pour déplacer l’élément de défilement de gauche à droite sur l’événement de survol.

Ma solution sur jsfiddle ou ici à la fin, il utilise CSS3 Animations. J’ai emprunté des idées ici et ici . Mon idée était de laisser le conteneur div , c’est div.s à-dire div.s , suffisamment grand pour qu’il puisse contenir tout le texte, permettant ainsi l’utilisation de pourcentages pour la propriété left dans la règle @keyframes , d’où le:

 .s { display: inline-block; } .t:hover, .s:hover { width: auto; }

Voici le code:

 .t { white-space: nowrap; position: relative; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; } .s { display: inline-block; width: 100%; } .t:hover, .s:hover { width: auto; } .s:hover .t { animation: scroll 15s; } .f { width: 100px; background: red; overflow: hidden; } @keyframes scroll { 0% {left: 0px;} 100% {left: -100%;} }

   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id impedit accusamus nulla facilis unde sed ipsum maiores adipisci, eius excepturi saepe perspiciatis sequi optio ipsam odio quibusdam quo libero repudiandae.

Steffen Rusitschka a écrit un script jQuery, RUZEE.Ellipsis , pour cela.

Vous pouvez jeter un oeil à jRollingNews
Utilisez le générateur de code pour personnaliser les barres et prévisualiser le résultat.

Avertissement: je l’ai fait.