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

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.

Source: http://motyar.blogspot.in/2010/09/foursquarecom-like-animated-feeds.html

You can see the working demo here.

Advertisements

About amitsonikhandwa
I am a web developer working in PHP and MYSQL with AJAX, jQuery and JavaScript. I am in web development since 2007.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s