Animate Your News Feed With CSS And jQuery
Providing a web or news feed to your site visitors is always considered as good practice when running a web site. It’s the best way to keep them informed of any updates to your content. But wouldn’t it be nice to spruce things up a little by giving your audience a fun and unique experience every time they check out your feed?
Fortunately for us, a web service and API developer named Motyar was nice enough to share his idea to the rest of the web design community through an easy tutorial.
This tutorial was inspired by FourSquare’s animated updates feed ticker. In order to mimic the effect, we’re going to use a combination of CSS and jQuery. And don’t worry; it’ll only be a short one, but knowledge in both programming languages and WordPress does help.
You can check out the DEMO be sure to back up your files beforehand.
We’ll start off with the basic HTML markup:
<div id="feeds">
<div id="feed0" style="display: none;">YOURCONTENTS</div>
<div id="feed1" style="display: none;">YOURCONTENTS</div>
<div id="feed2" style="display: none;">YOURCONTENTS</div>
</div>
We then apply a bit of CSS to take care of appearance though feel free to tweak the code to suit your preferences.
#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;
}
Finally, to add the animated effect, copy/paste this 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);
});
Save and check to see the result, and that’s it! If you have any questions or comments, you can get in touch with Motyar through Google Plus.
0
509
1 Comment
Paul
09.06.2012
Thanks for the awesome script. I tried implementing in my website - one thing I found is when I set the ‘var delay = 6000;’ the feed area is blank (empty) for 6 seconds and then starts to load the news. Can you please let me know if I can have the news starts as soon as the website loads and not having to wait 6 seconds. Thanks.
There are no trackbacks to display at this time.