Aug
22nd

Javascript Vertical Scrolling Marquee

Files under Javascript | 8,415 views

In this tutorial, I’ll show you how to create a vertical scrolling marquee using JavaScript. Below is the demonstration of what I’ll be creating:

<div style=”font-family:Arial;font-size:11px;width:160px;”>
<div style=”color:#14A9D6;margin-bottom:5px” align=”center”>
Vertical Scrolling Marquee
</div>
<div style=”color:#EF6007″ align=”center”>
<marquee bgcolor=”#E5E5E5″ scrollamount=”2direction=”uploop=”true” height=”150px”>
<center><strong> More Exciting<br> Tutorials<br>
<font color=”red”>Coming Soon !!!<br><br>So, keep an eye <br>on upcoming tutorials.</font>
</strong></center>
</marquee>
</div>
</div>

Here I create an outer <div>. With this basic framework of the scroller created, lets see the script that will scroll the <div> upwards to create a vertical content scroller.

Click here to see the sample.

More Explanation:

As you can see, I control the vertical scrolling marquee using scrollamount, direction and loop.

From the above sample that I have provided, I set the scrollamount to 2 (set it higher will increase the speed of scrolling marquee). Then, I set the direction to up, as I want it to be displayed from bottom to top. In order to let it scrolling without stop, I set loop to true (loop infinite).

Main Features of My Vertical Scrolling Marquee:
- Easy to embed into an HTML document.
- The JavaScript scrolling marquee loops when finished.
- Configurable scrolling speed

The Limitation:
- No pause on mouse-over as I want to let people see the basic scrolling marquee



7 Responses to “Javascript Vertical Scrolling Marquee”

  1. By Javascript Multi Level Drop Down Menu on Aug 23, 2009 | Reply

    very cool & good tip, thank you very much for sharing.

  2. By Irribly on Aug 23, 2009 | Reply

    That is a really useful and informative guide. I’m going to try and keep a copy in my bag until i get used to what to watch out for.

  3. By autoauctions on Sep 12, 2009 | Reply

    amazing stuff thanx :)

  4. By pink sheets on Sep 20, 2009 | Reply

    love the site, awesome stuff!

  5. By penny stock news on Sep 20, 2009 | Reply

    Please, can you PM me and tell me few more thinks about this, I am really fan of your blog…

  6. By pinksheet news on Sep 21, 2009 | Reply

    Wow! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?

  7. By penny stocks on Sep 21, 2009 | Reply

    You made some good points there. I did a search on the topic and found most people will agree with your blog.

Post a Comment

| 8,415 views