Moving Text Effects are fun way to catch the attention of Site Visitors for giving important News or Making Blog More attractive. But, most of the novice Bloggers are left unanswered with a question finding a way to move text in a blog or slide text in the Website.
How to Create a Running / Scrolling Text in WordPress / Blogger HTML Website?
This article outlines all doubts and Solutions for the Moving Text using HTML CSS JavaScript plugin etc.
- Scrolling Text using HTML Marquee tag
- Moving Text HTML With Background Colour:
- Marquee Text
- HTML Code for Moving Text Effects Up And Down
- Moving text with Bounce effect – Alternate Behaviour in HTML
- Moving text using HTML, JS and Pause when Cursor Point over it.
- How to Insert Moving Text in Blogger/Blogspot Blog?
Scrolling Text using HTML Marquee tag
HTML5 Code Syntax For Simple Moving Text:
<marquee>This is moving text Moving Right to Left </marquee>
Output:
Plain simple moving text looks ugly to look it more attractive we need to tailor the code and add some spice to our cuisine by adding a background color to it by bgcolor: “hexadecimal code”
Moving Text HTML With Background Colour:
HTML For Scrolling Text With Background Colour
<marquee bgcolor=”#33cc99″>This is moving text with Background Colour </marquee>
Output:
Even after adding Background Colour, text may be difficult to read depending upon Background color. To address the issue, let’s change the color of the text.
Marquee Scrolling Coloured Text With Background Colour
<marquee bgcolor=”#33cc99″ style=”color:white;”>This Is Coloured Scrolling Text With Background Colour </marquee>
Output:
To control the speed of Moving text in Marquee tag use the attribute scrollamount=”Range”
Speed Range is from 0 to 10, where 0 is for still text.
Moving Text HTML with Speed Control
<marquee bgcolor=”#33cc99″ scrollamount=”4″>This Is Scrolling Text with scrollamount=”4″ </marquee>
Output:
To further format the Moving text in HTML ,Webmaster may use following HTML Tags
<b> – for bold text
<i> – for italic text
<u> – for use
Dont forget to close the tag.
new HTML CSS Code for Moving text will be
<marquee bgcolor=”#33cc99″ style=”color:white;”><b><i><u>This Is Coloured Scrolling Italic , Underlined and Bolded Text With Background colour </i></u> </b> </marquee>
Output:
Now, to add direction to moving text use Direction attribute in Marquee tag .
Direction = “Option”
Options right, up, down
By default, the text moves from Right to Left
Marquee Text
This Is Moving Text with Up Direction
<marquee bgcolor=”#33cc99″ style=”color:white;”><b><i><u>This Is Coloured Scrolling Italic , Underlined and Bolded Text With Background colour </i></u> </b> </marquee>
HTML Code for Moving Text Effects Up And Down
<marquee bgcolor=”#33cc99″ direction=”up” scrollamount=”2″>This Is Moving Text Effect with Up Direction Using HTML </marquee>
<marquee bgcolor=”#33cc99″ direction=”Down” scrollamount=”2″>This Is Moving Text Effect with Down Direction Using HTML</marquee>
<marquee bgcolor=”#33cc99″ direction=”Right” scrollamount=”2″>This Is Moving Text Effect with Right Direction Using HTML</marquee>
<marquee bgcolor=”#33cc99″ scrollamount=”2″>This Is Moving Text Effect with left Direction Using HTML</marquee>
Moving text with Bounce effect – Alternate Behaviour in HTML
<marquee bgcolor=”#33cc99″ style=”color:white;”><br /> <a href=”url”>Link 1</a><br /> </marquee>
Moving text using HTML, JS and Pause when Cursor Point over it.
<marquee bgcolor=”#33cc99″ style=”color:white;width:500px;” onmouseover=”this.stop()” onmouseout=”this.start()”><br /> This text can be paused.Just Point Mouse Over It.<br /> </marquee> /
How to Insert Moving Text in Blogger/Blogspot Blog?
- Login to Blogger.com Google Account
- Select the Blog
- Click on Layout
- Click on Add Element
- HTML/Text
- Paste the Code