jquery/css: hacer que el texto dentro de div se mueva horizontalmente como un ticker de noticias sin complementos

Question

Alguien tiene algunos consejos sobre cómo hacer que un texto se deslice horizontalmente de derecha a izquierda sin tener que usar un complemento . Aquí hay un ejemplo de lo que estoy tratando de lograr (esta es una solución de complemento: http://www.maaki.com/scrollingText.html).

Answer 1

he aquí una solución rápida a este: 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)); 
});​ 

Utilizando la propiedad text-indent css, usted puede hacer esto en lugar simplemente.

Answer 2

que podría hacer algo como esto

<div id="scrollcontainer" style="postion:relative; overflow:hidden; width:100%;"> 
    <span id="scrolltext" style="position:absolute; white-space:nowrap">this is the scrolling text</span> 
</div> 

y una función js

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

scroll(); 

probado. se pueden encontrar aquí: http://jsfiddle.net/zrW5q/85/

Answer 3

Hace poco resolví esto con animaciones CSS de fotogramas clave.

Esencialmente su ticker necesita un div envoltura con desbordamiento escondido en él. Los teletipos contenían artículos deben mostrar inline-block para que estén en una línea:

<div class="ticker-wrap"> 
    <div class="ticker"> 
     <div class="ticker__item">Letterpress chambray brunch.</div> 
     <div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div> 
     <div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div> 
    </div> 
</div> 

Ejemplo 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; 
} 

tengo a demo que utiliza la animación CSS fotograma clave a continuación, transformar el contenido de toda la camino de un lado al otro infinitamente. nótese bien. Las versiones con prefijo del vendedor no se muestran.

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

El único ajuste que necesita es establecer la duración de la animación y aplicarla a .ticker.

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

Se puede ver la full demo