CSS/jQuery texto lateral de desplazamiento lateral en vuelo estacionario

Question

Tengo un feed de Twitter en un sitio web que corro. Sin embargo, se corta en pantallas pequeñas. Tengo una barra lo suficientemente alta para 1 línea de texto en la que tengo el último tweet. Quiero que el tweet se elipsifique o se desvanezca al final si es demasiado largo. Pero al pasar el cursor, quiero que el texto se desplace lentamente hacia la izquierda, exponiendo así la parte oculta.

Este efecto se utiliza en el iPod classic cuando resalta una canción que tiene un título que es más ancho que la pantalla. (Espero que entiendas lo que estoy buscando.)

Tengo curiosidad de cómo implementar algo como esto? ¿Cómo puedo obligar al texto a permanecer en una línea?

Answer 1

es una forma bastante simple de hacer aquí. En primer lugar, establecer un div que contiene el texto largo:

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

Se puede utilizar un poco de CSS para manejar automáticamente el truncamiento y puntos suspensivos:

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

Si a continuación, determinar el ancho nativa, no truncado del contenido , puede usar jQuery's .animate() para mover ese contenido a una velocidad constante, incluso si no conoce la longitud del texto hasta el tiempo de ejecución (como sería el caso con un feed de Twitter). Aquí está una manera un tanto mecánica de conseguir la medición:

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; 
})(); 

Por último, un poco de animación:

$('#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" 
}); 

Sin importar la longitud del texto, obtendrá una velocidad constante de aproximadamente un segundo por 100 píxeles (ajustar según lo deseado). Restablecer o rebobinar contenido en mouseleave se deja como un ejercicio. Este enfoque tiene algunas partes ingenuas, pero puede darte algunas ideas.

Aquí está un ejemplo de trabajo: http://jsfiddle.net/redler/zdvyj/

Answer 2

Steffen Rusitschka ha escrito una secuencia de comandos jQuery, RUZEE.Ellipsis, para hacerlo.

Answer 3

Hay unos plugins por ahí que hacer esto (Remy de Sharp: http://remysharp.com/demo/marquee.html por ejemplo), pero si alguien quisiera construir desde cero:

El ítem está desplazando necesidades de tener "white-space: nowrap;" (para mantenerlo en una línea), "posición: absoluta" (para permitir que se desplace hacia la izquierda y derecha) y envuelto en un elemento relativamente posicionado que tiene "desbordamiento: oculto" (para que parezca que solo muestra el ancho que desea) .

Usando jQuery, podría utilizar .animate() para mover el elemento de desplazamiento de izquierda a derecha en el caso de la libración

Answer 4

Por fin, aquí está mi entrada: http://jsfiddle.net/sdleihssirhc/AYYQe/3/

Cool stuff:

1. Biblioteca agnóstico
2. Usos scrollLeft en lugar de posicionamiento absoluto, por lo que es más suave y más rápido
3. Utiliza text-overflow:ellipsis en lugar de agregar elementos DOM

Answer 5

le puede dar un vistazo a jRollingNews
Utilice el generador de código de personalizar las barras y para visualizar el resultado.

Descargo de responsabilidad: Lo logré.

Answer 6

Mi solución en jsfiddle o aquí al final, utiliza animaciones CSS3. Tomé prestado ideas de here y here. Mi idea era dejar que el contenedor div, es decir div.s creciendo lo suficientemente amplia como para que pueda contener todo el texto, lo que permite el uso de porcentajes para la propiedad left en la regla @keyframes, de ahí el:

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

aquí está el código:

.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>