jQuery vertical scroll text plug-in: 2 demos

Scrolling text vertically by jQuery

The vertical scrolling of text can be used for purposes like news or press release scrolling. You may use it for scrolling the updates about the website or newly added features etc.

By using jQuery.scrollText plug-in, you may create a customized section with vertical text scrolling in your web pages. You may set the duration of the scroll to next item along with other options.

See the section below for live demos and how to download and set up this simple plugin on your website.

A demo of scrolling text vertically

The headlines or updates are placed by using the <ul> and <li> tags. Obviously, it can be database driven and as many as you want. You may style the text, use links etc inside the vertical scrolling section. Have a look with the simple default layout:

jquery scroll text

See online demo and code

The duration is set as 2000 milliseconds or two seconds.

The script:

 

 

The markup used for the demo:

 

A little CSS is used for styling that you can see in the style section

A demo of customizing the jQuery scrolling of text

In this demo, I have used a different style for scrolling the text vertically. Not much is changed than the above example, except different CSS is applied to the scrolling text section. Apart from that, the scrolling speed is changed to 1500 milliseconds:

jquery scroll text style

See online demo and code

The style for this example:

 

The script:

 

How to set up this plug-in?

Step 1:

First of all, download the plug-in from Github website.

Step 2:

Include the reference of plug-in and jQuery JS file above the </body> closing tag:

  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

<script type=”text/javascript” src=”js/scrollText/jQuery.scrollText.js”></script>

You may also get the JS file by view source the above demos and right click the jQuery.scrollText.js file and save it in your system.

Step 3:

After writing the markup and style, call the scrollText function as shown in above demos.