эффект прокрутки в твиттере

Question

Вы заметили полосу прокрутки на домашней странице твиттера?

Как правильно сделать это с помощью jquery?Я слышал, что jquery лучше, чем javascript.

Answer 1

Если вы посмотрите на исходный код, вы увидите базовую структуру:

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

Элемент ul - это контейнер списка, содержащий темы.Положение этого элемента анимируется, чтобы прокрутить его.Когда список прокрутки подходит к концу, содержимое списка добавляется в конец списка (для имитации списка, который появляется и непрерывно прокручивается).Если бы это не было сделано, Twitter, вероятно, решил бы изменить направление прокрутки.Но то, как они это сделали, гораздо приятнее.

Чтобы получить эффект затухания, используются элементы .fade-left и .fade-right.Они выровнены влево и вправо, соответственно.Они установлены как прозрачные, а само изображение представляет собой прозрачный градиент: http://s.twimg.com/a/1283564528/images/fronts/fade-trends2.png. Используя z-index, оно располагается над списком прокрутки, что дает прозрачный эффект с обеих сторон.

Twitter действительно использует jQuery (но, как вы знаете, jQuery - это JavaScript, просто инфраструктура JavaScript), и я не потратил время на анализ кода, но реализовать его довольно просто

Answer 2

Я заново создал Twitter-шатер, посмотрите его: Twitter-шатер

Я использовал raw javascript и автоматизировал его, чтобы при добавлении дополнительных ссылок он вычислял ширину и знал, когда нужно нарезатьэто и вернуться к нулю

Answer 3

много опций:

Что хорошего в JS или JQuery для горизонтальной прокрутки новостной ленты