Effet de la barre de défilement de Twitter

Question

Avez-vous remarqué la barre de défilement de la page d'accueil de Twitter?

Quelle est la bonne façon de le faire avec jquery? J'entends jquery est mieux que javascript.

Answer 1

de nombreuses options:

What's a good bit of JS or JQuery for horizontally scrolling news ticker

Answer 2

Si vous jetez un coup d'oeil au code source, vous pouvez voir la structure de base:

<div> 
    <div> 
    <ul> 
     <li>Year Without Rain</li> 
     <li>Gameday</li> 
     <li>etc...</li> 
    </ul> 
    </div> 
    <span class="fade fade-left">&nbsp;</span> 
    <span class="fade fade-right">&nbsp;</span> 
</div> 

L'élément ul est le conteneur de liste contenant les sujets. La position de cet élément est animée pour le faire défiler. Lorsque la liste déroulante est sur le point de se terminer, le contenu de la liste est ajouté à la fin de la liste (pour simuler la liste et faire défiler en continu). Si ce n'était pas fait, Twitter aurait probablement choisi d'inverser la direction du parchemin. Mais comment ils l'ont fait est beaucoup plus agréable.

Pour obtenir l'effet d'évanouissement, les éléments .fade-left et .fade-right sont utilisés. Ils sont alignés à gauche et à droite, respectueusement. Ils sont définis pour être transparent et l'image elle-même est un dégradé transparent: http://s.twimg.com/a/1283564528/images/fronts/fade-trends2.png. En utilisant z-index, il est positionné sur la liste déroulante, donnant ainsi un effet transparent des deux côtés. Twitter utilise effectivement jQuery (mais juste pour que vous sachiez, jQuery est JavaScript, juste un framework JavaScript) et je n'ai pas pris le temps d'analyser le code, mais il devrait être assez simple à implémenter.

Answer 3

Je recréés le chapiteau twitter vérifier: Twitter marquee

Je l'ai utilisé javascript cru et automatisé de sorte que si vous annonce plus de liens il calculera la largeur et savoir quand le découper et revenir à zéro