Sep 7, 2010

FourSquare.com like Animated Feeds Display with Jquery

I like FourSquare.com Animated Updates feed Ticker. I like the way they animate items. In this tutorial i am sharing a simple way to create same rss scrolling ticker using Jquery, so you can implement it on your website!

Code

HTML code

<div id="feeds">
<div class="item" id="feed0" style="display: none;">YOURCONTENTS</div>
<div class="item" id="feed1" style="display: none;">YOURCONTENTS</div>
<div class="item" id="feed2" style="display: none;">YOURCONTENTS</div>
</div>

CSS code

#feeds{
  width:1000px;
  margin-left:200px;
  margin-right:auto;
  margin-top:40px;
  border-top:#333 dashed 1px;
}
.item{
   margin:0;
   width:980px;
   height:80px;
   font-size:30px;
   border-bottom:#333 dashed 1px;
   padding:0px 10px 0px 10px;
}

JavScript(Jquery)

  var delay = 2000; // you can change it
      var count = 5; // How much items to animate
      var showing = 3; //How much items to show at a time
      var i = 0;
      function move(i) {
        return function() {
          $('#feed'+i).remove().css('display', 'none').prependTo('#feeds');
        }
      }
      function shift() {
        var toShow = (i + showing) % count;
        $('#feed'+toShow).slideDown(1000, move(i));
        $('#feed'+i).slideUp(1000, move(i));
        i = (i + 1) % count;
        setTimeout('shift()', delay);
      }    
      $(document).ready(function() {
        setTimeout('shift()', delay);
      });

Demo

You can see the working demo here.

Labels: Animation, jquery, Tutorials

By : Motyar+ @motyar