We've called this stack 'DotMatrix' as it imitates the horizontal scrolling dot-matrix signs you frequently see at railway stations and on trains, airports and on the front of buses. To call it Marquee would otherwise be a bit misleading, because the old HTML marquee tags (originally introduced in early versions of Microsoft Internet Explorer) have been obsolete for a long time and fail to work in some web browsers. DotMatrix has zero dependancies on Javascript and has instead been developed using just pure HTML and the wonders of CSS animations! The stack is lightweight, efficient and adds very little weight to pages. DotMatrix uses no graphics, and is therefore optimised for retina display devices. It also prints and saves as PDF very nicely too.

Used in moderation, DotMatrix can have lots of uses in websites. It could be used to display important messages; like temporary closure notices, alerts, important messages, sporting results, seasonal announcements or weather information. DotMatrix can be used in conjunction with other stacks like Gateway. You can place DotMatrix in your normal page flow or within a theme ExtraContent container. Custom classes let you make the contents of DotMatrix remotely editable using a free lightweight CMS like Cushy or Surreal.

Examples

These are some working examples of DotMatrix. The first example is using the default settings:
 
This is a working demonstration of the DotMatrix stack. You can use this stack to scroll sentences of text like an LED dot matrix sign. It's a fun and easy stack to work with. Visit www.stacks4stacks.com for more innovative stacks for your website.
 
This second example has a larger font size applied (40px), a faster scroll speed applied (40 seconds), uses the optional dot matrix font face (which uses an embedded web font face) and the optional hazard lights setting has been enabled.
 
This is a working demonstration of the DotMatrix stack. You can use this stack to scroll sentences of text like an LED dot matrix sign. It's a fun and easy stack to work with. Visit www.stacks4stacks.com for more innovative stacks for your website.
 
A plain and simple example. White background and dark grey text. The website address has been made an actual link in this test. We also demonstrate the option of animated Font Awesome icons:
 
This is a working demonstration of the DotMatrix stack. You can use this stack to scroll sentences of text like an LED dot matrix sign. It's a fun and easy stack to work with. Visit www.stacks4stacks.com for more innovative stacks for your website.
 
DotMatrix has several customisable style and colour settings, permitting you to adjust nearly every aspect of this stack. It would be possible to adjust the appearance to make it blend into an existing webpage design. Multiple DotMatrix stacks can be safely used on the same webpage, as this page demonstrates. The pause on mouseover effect can be disabled in the stack settings if it's not required.

Setup

Follow these instructions for getting a DotMatrix stack setup in your webpage
  1. Download and install the stack into RapidWeaver using the normal methods
  2. Add a stacks page to your project if you have not done so already
  3. Open the stacks library, and drag-and-drop a copy of DotMatrix into your webpage
  4. Double-click the content area within the stack to setup your content
  5. In the stack settings, customise aspects of the stack like the scroll speed, start position, dimensions, font styling and colours
  6. Preview your page to see the DotMatrix stack. Publish the webpage when finished.

In the DotMatrix settings, you can toggle between styled text, HTML, Markdown or generic stack types. Basic non-animated content types will tend to work better within the DotMatrix stack.

Please note that a rendering bug in RapidWeaver may give DotMatrix a rough and jerky animation effect when you preview it. Most users find animations are far smoother when you view DotMatrix in a modern web browser; like the latest versions of Safari, Chrome, Firefox or Opera. We are using hardware accelerated CSS animation effects in this stack.

Font awesome icons

You can use Font Awesome icons in this stack. If your RapidWeaver theme lacks support for Font Awesome icons, then you'll need to enable the Call Font Awesome Icons option in the stack. Please refer to the Font Awesome Icon website for all available icon designs and the correct code to use.

Additionally this stack includes the opensource Font Awesome Icon Animation Plugin. The purpose of this plugin is to animate Font Awesome icons, which can be highly effective within the DotMatrix stack. To animate your icons, add the preferred animation class names to your existing Font Awesome code. So as an example:

<i class="fa fa-warning"></i>

becomes...

<i class="fa fa-warning faa-flash animated"></i>

The icon will now flash while it scrolls within DotMatrix. The colour of icons can be changed in the DotMatrix settings. If you need to change the font size of icons, inline CSS code can be used.

Print / PDF output

When your webpage is printed or saved as a PDF, we automatically disable animation effects and display your content as a static block on the page. Backgrounds are removed and text converted to black.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.