jquery/css: crea testo all'interno div scorri orizzontalmente come un ticker di notizie nessun plug-in

Question

qualcuno ha qualche consiglio su come fare testo all'interno di un scroll per scorrere orizzontalmente da destra verso sinistra in modo "news ticker" senza dover usare un plugin . Ecco un esempio di esattamente quello che sto cercando di realizzare (questa è una soluzione plugin: http://www.maaki.com/scrollingText.html).

Answer 1

ecco una rapida soluzione a questo: 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)); 
});​ 

Utilizzando la proprietà text-indent css, si può fare questo piuttosto semplice.

Answer 2

si potrebbe fare qualcosa di simile

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

e una funzione di js

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

scroll(); 

testato. può essere trovato qui: http://jsfiddle.net/zrW5q/85/

Answer 3

Recentemente ho risolto questo con animazioni keyframe CSS.

In sostanza il ticker ha bisogno di un wrapper div con overflow nascosto su di esso. I ticker contenevano elementi dovrebbe visualizzare inline-block in modo che siano in linea:

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

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

ho a demo che utilizza l'animazione CSS keyframe per poi trasformare il contenuto tutto il via da una parte all'altra infinitamente. N.B. Versioni con prefisso fornitori non mostrate.

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

L'unico ritocco necessario è impostare la durata dell'animazione e applicarla 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 
} 

Potete vedere il full demo