How to Create Custom Marque Tag Moving Texts on Your Website

Here in this post, I've created some code that can give different styles of moving text. I have also included moving text samples that can assit you to create your own hyperlink on the moving text. The interesting part is that if a user wants to click on a moving text's hyperlink, the user can hover the mouse over the moving text. Upon hovering the mouse, the moving text will automatically stop moving and the user will have a chance to click on the hyperlink.

Video Tutoral at https://youtu.be/MH90m2o1ulM

1. Basic <marquee> tag :

<marquee> Subscribe by Email </marquee> Subscribe by Email
2. <marquee> tag without hyperlink: <marquee style="color:#e31efc; font-family:comic sans ms; font-size:13pt; background-color:lightgreen" scrollamount=" " id='scroll 1' direction=" " height=" "> <div onmouseover="document.getElementById('scroll 1').stop();" onmouseout="document.getElementById('scroll 1').start()"> <b> Subscribe by Email </b> </div> </marquee>

Subscribe by Email

3. <marquee> tag with hyperlink: <marquee style="color:#e31efc; font-family:comic sans ms; font-size:13pt; background-color:lightgreen; text-align:center" scrollamount="5" id='scroll 2' direction="up" height="90"> <div onmouseover="document.getElementById('scroll 2').stop();" onmouseout="document.getElementById('scroll 2').start()"> <b> <a href="http://feedburner.google.com/fb/a/mailverify?uri=c815" target="_blank">Subscribe by Email</a> | <a href="http://facebook.com/sirchogyal" target="_blank">Facebook</a> | <a href="http://instagram.com/sirchogyal" target="_blank">Instagram</a> | <a href="http://c815.blogspot.com">Home</a> </b> </div> </marquee>

Subscribe by Email | Facebook | Instagram | Home

4. <marquee> tag with border & shading: <div style="margin : 10px 25px 10px 15px; padding : 10px; clear : both; list-style-type : none; background : #07e64d; border-top : 8px solid #fc3276; border-right : 8px solid #fc3276; border-bottom : 8px solid #fc3276; border-left : 8px solid #fc3276"> <marquee style="color:#e31efc; font-family:comic sans ms; font-size:13pt; text-align:center" scrollamount="3" id='scroll 3' direction="up" height="90" ><div onmouseover="document.getElementById('scroll 3').stop();" onmouseout="document.getElementById('scroll 3').start()"><b> <a href="http://feedburner.google.com/fb/a/mailverify?uri=c815" target="_blank">Subscribe by Email</a> | <a href="http://facebook.com/sirchogyal" target="_blank">Facebook</a> | <a href="http://instagram.com/sirchogyal" target="_blank">Instagram</a> | <a href="http://c815.blogspot.com">Home</a> </b> </div> </marquee> </div>

Subscribe by Email | Facebook | Instagram | Home

5. <marquee> tag with more borders: <div style="background: #fb3276; border-bottom: 8px solid #3607f0; border-left: 8px solid #3607f0; border-right: 8px solid #3607f0; border-top: 8px solid #3607f0; clear: both; list-style-type: none; margin: 10px 25px 10px 15px; padding: 1px"> <div style="background:#f0d107; border-bottom: 3px solid #b3ff00; border-left: 3px solid #b3ff00; border-right: 3px solid #b3ff00; border-top: 3px solid #b3ff00; clear: both; list-style-type: none; margin: 5px 5px 5px 5px; padding: 1px"> <marquee style="color:#f200ff; font-family:Bahnschrift; font-size:13pt; text-align:center" scrollamount="3" id='scroll 4' direction="right"> <div onmouseover="document.getElementById('scroll 4').stop ();" onmouseout="document.getElementById('scroll 4').start()"> <br /> <b> <a href="http://feedburner.google.com/fb/a/mailverify?uri=c815" target="_blank">Subscribe by Email</a> | <a href="http://youtube.com/sirchogyal815?sub_confirmation=1" target="_blank">YouTube</a> | <a href="http://facebook.com/sirchogyal" target="_blank">Facebook</a> | <a href="http://instagram.com/sirchogyal" target="_blank">Instagram</a> | <a href="http://twitter.com/sirchogyal" target="_blank">Twitter</a> </b> <br /><br /> </div> </marquee> </div></div>

Subscribe by Email | YouTube | Facebook | Instagram | Twitter

▶Subscribe my YouTube channel at http://bit.ly/sub815

▶Like my Facebook Page at https://facebook.com/code8home

Follow me on: ❀ Twitter: https://twitter.com/sirchogyal
                          ❆ Instagram: https://www.instagram.com/sirchogyal

You Might Also Like

CSS & JavaScript

« PREV