Blog

Twitter style vertical scrolling ticker

Twitter is a famous microblogging and real-time information social network that connects you to the latest information. On twitter‘s home page , there is a one section “Top Tweets” that scrolls through the tweets that, algorithmically selects some of the most favorited tweets from twitter database . In this tutorial I will tell you how to create Twitter style scrolling effect for your website content, in three steps.

Step 1: Download the files

Download the zip file and extract it.after extracting the zip file you can see 3 files, those are

Index.html
jquery.vticker-min.js
jquery.js

Download file details:

File name: twitter-style-scrolling
File type : .zip
File size : 17.0 KB

Step 2:Creating the Scrolling content

Open index.html file for edit .Change content between <li> </li>
tag and place it in <ul> </ul> tag .For each item, we create a new list item that will be scrolled through. like this…..

Step 3: Configuring the script

Now comes the real part. You can change the time interval , direction and some other properties of scroller by editing this java script function . ” speed: ” – in micro seconds like 1500,100,1000 etc. ,”direction: ” – down,up

Then save the file and run it .The list will start autoscrolling. All that is left now is to styles that match your site and using these simple HTML tags it is very easy to do.

Enjoy :)