CSS/JQuery alimenté latéralement texte défilant sur hover

Question

J'ai un flux Twitter sur un site Web que je cours. Cependant, il est coupé sur de petits écrans. J'ai une barre assez haute pour 1 ligne de texte dans laquelle j'ai le dernier tweet. Je veux que le tweet s'illipse 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 vais mettre en œuvre quelque chose comme ça? Comment puis-je forcer le texte à rester sur une ligne?

Answer 1

Voici une façon assez simple de le faire. Tout d'abord, mettre en place un div contenant votre texte long:

<div id="container"> 
Here is the long content, long long content. So long. Too long. 
</div> 

Vous pouvez utiliser du code CSS pour gérer automatiquement la troncature et 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, non tronquée du contenu , vous pouvez utiliser le .animate() de jQuery pour déplacer ce contenu à une vitesse constante - même si vous ne connaissez pas la longueur du texte avant l'exécution (comme ce serait le cas avec un fil Twitter). Voici une manière 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('<div id="content"/>') // 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, une animation:

$('#container').one('mouseenter', function(){ // perhaps trigger 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('<div id="content">').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 (ajuster comme désiré). Réinitialiser ou rembobiner le contenu sur mouseleave est laissé comme un exercice. Cette approche a quelques bits naïfs, mais peut vous donner quelques idées.

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

Answer 2

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

Answer 3

Il y a quelques plugins là-bas qui font (Remy Sharp: http://remysharp.com/demo/marquee.html par exemple), mais si vous construisiez à partir de zéro:

L'élément étant besoins en rouleau d'avoir « white-space: nowrap; » (pour le garder sur une ligne), "position: absolute" (pour le laisser défiler à gauche et à droite) et enveloppé dans un élément relativement positionné qui a "overflow: hidden" (pour le faire apparaître comme la largeur que vous voulez montrer) .

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

Answer 4

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

Cool stuff:

1. Bibliothèque agnostique
2. utilise scrollLeft au lieu de positionnement absolu, il est donc plus lisse et plus rapide
3. Utilise text-overflow:ellipsis au lieu d'ajouter des éléments DOM

Answer 5

Vous pouvez donner un look à jRollingNews
Utilisez le générateur de code pour personnaliser les barres et pour afficher un aperçu du résultat.

Avis de non-responsabilité: Je l'ai fait.

Answer 6

Ma solution sur jsfiddle ou ici à la fin, il utilise CSS3 Animations. J'ai emprunté des idées de here et here. Mon idée était de laisser le conteneur div, à savoir div.s de croître suffisamment large pour qu'il puisse contenir tout le texte, ce qui permet 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%;}     
 
}

<div class="f"> 
 
    <div class="s"> 
 
    <div class="t">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. 
 
    </div> 
 
    </div> 
 
</div>