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 one section “Top Tweets" that scroll 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 a 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:
| Filename: | 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…..
<div class="tweets"> <ul> <li>1-Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.</li> <li>2-Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.</li> <li>3-Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.</li> </ul> </div>
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 javascript function . ” speed: ” – in microseconds like 1500,100,1000, etc. ,”direction: ” – down,up
<script>
$(function(){ $('.tweets').vTicker({ speed: 500, pause: 3000, animation: 'fade', mousePause: true, showItems: 10, direction: 'down', height:228 }); });
</script>
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 🙂 …
