What is scrolling text?
Scrolling text is text that moves onto a website page, by following the direction you define for it. It is dynamically displayed and has the properties you have set for this.
Types of such text:
- Classic (the text is scrolling onto the page in an infinite number of iterations)
See the Pen zLarzM by Veronica (@Veronica18) on CodePen.
- Slide-in (the text is scrolling onto the page up to a point, and then stays in place)
See the Pen VBderY by Veronica (@Veronica18) on CodePen.
- Alternate (the text is scrolling onto the page in one direction, then bounces back to the opposite direction, in another iteration of the movement)
See the Pen pZKgpL by Veronica (@Veronica18) on CodePen.
- Progress bar for scrolling text
See the Pen Super Simple Progress Bar by Veronica (@Veronica18) on CodePen.
This type of text is a quite rarely used feature, only for those cases when it brings real value to the website pages.
The example below proves good use of such text, in that it includes real-time, valuable information presented to visitors:
Daily Forex
Another example of properly using such text is that of a website where real-time news is feeding a specific area in the homepage with all readers need to know:
Scrolling text is practical for blogs where blog authors intend to draw attention to certain posts, by i.e. dynamically presenting their titles on the home page. It is also useful for newspapers that need to bring to the front real-time news and present them as-they-happen. Also, showing users how they progress in scrolling website text might be useful for better engagement with the site content (they know exactly how much they have read and how long it would take to scroll to the bottom of an article).
Scrolling Text – How to Add It to Your Website Pages?
There are 3 main methods of adding such text to your website pages: to use 1. a plugin (for WordPress websites), to use 2. a code generator giving you the code to paste in the page source, or else to write the code yourself (3. HTML or 4. CSS animations).
Automated Scrolling Text (How To’s)
Let’s tackle the methods of making such text function on your website pages. When readers land on a page, they will be able to watch the text moving (scrolling horizontally – left to right/right to left, scrolling vertically – from the bottom up/from top to bottom, bounce, slide in). How do you implement these?
1. Easy Way to Add Scrolling Text: Use a WordPress Plugin
If your site runs on WordPress, there’s one best method for adding this type of text to a page. Its name is Ditty News Ticker, and it’s a plugin specially created for inserting scrolling text into the website.
There’s a wide number of plugins available for scrolling text, we’ll speak in this article about the most trusted and completely functional one.
Here are the steps for including such text into a WordPress website, using this method:
a. Search for and install plugin
In the WordPress Admin dashboard, go to the Plugins section -> Add New and type Ditty News Ticker into the search box.
b. Click on Install Now.
c. Click on Activate.
d. Check whether the plugin is part of the installed and active plugins, by going to Plugins -> Installed Plugins.
e. In the WordPress Admin dashboard, a new section has been added to the menu: it is titled News Tickers. By clicking on this section, you can go to the dashboard dedicated to creating and customizing a new ticker.
f. Click and Add New New Ticker, to create scrolling text in a certain part of a webpage. It should open a dashboard as the one in the screenshot above.
g. Start by giving a name to the news ticker, to facilitate the management of texts in different portions of the page/website.
h. Customize the news ticker, before applying it to the page in the website.
Ticker Type
Ticker Text
You have to add in the dedicated field of this tab the text you want to submit to a scrolling movement.
Ticker Type – Link & Target
If wanted, you can add a link to the text. For doing so, you must specify the URL of the destination page/page section, and select whether the link will open in the same tab or in a new tab.
Ticker Mode – Scroll
Scroll Direction
Specify the direction the text will scroll to, when the animation is activated: left, right, up, down.
Scroll Speed
Set the speed at which the text is scrolling onto the page. Larger values equal a speedier scrolling of the text in the respective section.
Ticker Mode – Rotate
Rotation Type
Select the type of rotation for the ticker: fade, slide left, slide right, slide up or slide down.
- When all customizations are in place, click Save/Update the ticker with the new properties.
- You will find a shortcode (in the customization dashboard) that you need to copy and paste into the page where you want the scrolling text to appear.
- After having applied the shortcode to the page section dedicated to scrolling text, save the changes and see the results.
You will have a nice text scrolling on the page (left/right, up/down, depending on how you have set it), at the speed you defined into the dashboard, and scrolling in the direction you specified there.
2. Medium Difficulty Method: Scrolling Text with HTML Code Generator
For more ease of use, you can opt for a HTML code generator (marquee generator). You have the possibility to enter the text you want to submit to a scrolling movement, and adjust its properties directly online, in the code generator.
This marquee generator can be found here.
You will not only enter your own text, but also customize:
a. Text color
b. Background Color
c. Text Font
d. Scrolling direction
e. Scrolling speed
f. Type of movement (scroll/bounce)
g. Text padding
h. Text margins
i. Font size
j. Text in bold/italics
k. Text alignment (left, right, center, justify)
l. Line height
You also can apply a scrolling effect to an image. Specify the URL of the image and the alternate text for that image, and the selected image will have a scrolling movement into the page.
3. Code Yourself: Scrolling Text with HTML code
The first, and most widely known method of implementing scrolling text is to use HTML code. The tag corresponding to this function is named “marquee”, and has the following form:
<MARQUEE>… </MARQUEE>.
This tag comes in the html code of a page, and can have the following attributes:
a. Width – this attribute defines the horizontal distance upon which the scrolling text unfolds;
<MARQUEE WIDTH=100>This is my scrolling text</MARQUEE>
b. Height – this refers to the vertical distance upon which the scrolling text unfolds;
<MARQUEE HEIGHT=75>This is my scrolling text</MARQUEE>
c. Behavior – the “Behavior” attribute creates a certain movement type for the text concerned by this tag (different behaviors are: scroll, slide, alternate).
- Classic scroll means the text is infinitely scrolling.
- Slide means the text is scrolling up to a point and then stays in place.
- lternate means the text is scrolling up to a point and then bounces back to an opposite scrolling movement.
<MARQUEE BEHAVIOR=SCROLL>Scrolling text</MARQUEE>
<MARQUEE BEHAVIOR=SLIDE>Slide-in text</MARQUEE>
<MARQUEE BEHAVIOR=ALTERNATE>Alternate text movements</MARQUEE>
d. Loop – the attribute defines how many times the text movement is iterated
<MARQUEE LOOP=2 BEHAVIOR=SLIDE>This is my text</MARQUEE>
e. Direction – this sets up the direction of movement for the text (right, left, up or down)
<MARQUEE DIRECTION=LEFT>Here is my text</MARQUEE>
<MARQUEE DIRECTION=RIGHT>My text</MARQUEE>
<MARQUEE DIRECTION=UP>This is my text</MARQUEE>
<MARQUEE DIRECTION=DOWN>Here is my text</MARQUEE>
f. Background Color – this attribute defines the color of the background the text is moving onto
<MARQUEE BGCOLOR=Blue>Scrolling text on blue background</MARQUEE>
g. Scrollamount – the attribute refers to the speed at which the text is scrolling on the page. A higher amount relates to a speedier scrolling, while smaller values relate to a smoother scrolling movement.
<MARQUEE SCROLLAMOUNT=10>Text moving at this speed</MARQUEE>
Please note that this method (using the Marquee HTML tag) is deprecated and is not recommended for use in current websites. The information above is purely as a rough guide that should make you aware of what properties to follow when creating scrolling text.
4. Write the Code Yourself: Scrolling Text with CSS Animations
This is the best method to create scrolling text. It is compliant with the W3C standards; however, it takes a little more time and effort to write the code.
We’ll explain you how to create this code, by highlighting key aspects of the coding lines.
The CSS marquees are formed using CSS animations and the @keyframes rule.
a. CSS animations have the following syntax:
[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>]
Where:
animation-name = the name of the animation
animation-duration = the length of time an animation takes to complete (one iteration)
animation-timing-function = how an animation progresses between keyframes
animation-delay = time when the animation begins
animation-iteration-count = the number of iterations defined for an animation
animation-direction = the direction an animation follows onto the webpage
animation-fill-mode = defines the values applied by the animation outside the time it is playing.
b. The @keyframes rule (what it is and what it contains):
First, the syntax of the @keyframes rule is as follows:
@keyframes: name {
keyframes selector {
keyframes declaration
}
}
The @keyframes rule defines the style of the text, at different points throughout the animation, while this is playing.
It contains selectors and declarations.
Selectors are used to define different points along the iteration, they can be from/to keywords, or they can be expressed in percentages.
Declarations represent the set of properties and values specific to that @keyframes rule. They are marked by curly brackets.
For the code to be created correctly, use translateX for a horizontal movement of the scrolling text, and translateY for a vertical movement of the scrolling text.
Some particularities of CSS code
In the coding lines, you will have to include:
-moz-transform = it defines the transformation of the text
-webkit-transform = it defines transformation of the text in two-dimensional or three-dimensional space
5. Manually Scrolling Text (Progress Bar)
When users land on a lengthy page, especially on blogs, it’s worthwhile to include a progress bar that notifies them of the reading progress and hence, engages them further into browsing the page.
This time, scrolling text is executed by people, and there’s a visual “counter” signalling them what amount of text they have been scrolled/what amount of text still needs to be scrolled.
For websites build on WordPress, there’s a quick and easy way to add a progress bar to the lengthy pages you find useful for the readers to pass through. Again, it’s a plugin, named Worth the Read.
a. In the WordPress Admin dashboard, go to the Plugins -> Add New section.
b. Type Worth the Read in the search bar and search for the respective plugin.
c. Click Install Now.
d. Click Activate.
e. Check in the list of active plugins that Worth the Read has been properly installed and activated.
f. Installing the plugin adds a new section in the WordPress Admin menu, named as such: Worth the Read. Click on it and start setting the features that define the progress bar in the website pages.
Functionality tab
Where you’ll display a progress bar
You can choose to display the progress bar on specific sections of the website: posts/pages/home page or all of them.
Placement of the progress bar
The plugin comes with several options as to the placement of the progress bar. Choose to set it in the upper part/bottom of the screen, or on the left/right side of the screen.
A common rule is to place it at the bottom of the screen, and as users have got used to this practice, it’s recommended that you choose this placement.
Style Tab
From here, you can set the look, colors, dimensions of the progress bar, as it is shown on the page on which it marks users’ scrolling text.
Thickness
This defines how thick the progress bar will be on the page where it measures the visit progress.
Foreground Color
The foreground is the part of the progress bar that moves when scrolling. You should set a contrasting color, for the progress to really be visible to users.
Foreground Opacity
If set to 100% opaque, the foreground of the progress bar will more efficiently mark the visit progress. However, more stylish effects are possible, when setting a different value of opacity of the foreground.
Background Color
The background refers to the static part of the progress bar, onto which the foreground moves on scroll. Its color can be adjusted to your liking.
Transparent Background
For practical purposes, there’s an option of the plugin to set the progress bar background to transparent.
Muted Foreground Color
This option refers to the foreground when scrolling text is stopped. So, when users do not scroll down the page, the foreground will have the color defined from here.
A wrapping word
Setting up such text into a page of your website is easy. Any of the above-mentioned methods will do, though we recommend you choose CSS animations or simpler, the Ditty News Ticker plugin (if your site is built using WordPress). And users’ scrolling text can also be turned in a simple way to drive more engagement: by inserting a reading progress bar into the webpage. Thus, they will know exactly how they have read and how much they still have to read, and this will keep them on page, with a promise this will not consume much of their precious time.
Happy usage of scrolling text!
[sibwp_form id=1]
