Rob Bedeaux Posted December 28, 2015 Share Posted December 28, 2015 Ever wanted to create a bit of text that scrolls across your screen? With this simple code block and the head code you can input some text and have it 'march' across the container similar to how the news scroll works. Put this bit in the head code of the page <style style="text/css"> .example1 { height: 50px; overflow: hidden; position: relative; } .example1 h3 { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); /* Apply animation to this element */ -moz-animation: example1 15s linear infinite; -webkit-animation: example1 15s linear infinite; animation: example1 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes example1 { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes example1 { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes example1 { 0% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-100%); } } </style> Put this bit in your code page element <div class="example1"> <h3>YOUR TEXT HERE. YOUR TEXT HERE. YOUR TEXT HERE.</h3> </div> Rob Bedeaux (he/him/his) Director, Content Marketing & Strategy E rob.bedeaux@nbcuni.com Link to comment Share on other sites More sharing options...
Bryan Hopper Posted August 16, 2016 Share Posted August 16, 2016 Has anyone found a way to make this longer and slower? When i went to increase the width, the message was longer but it went faster...seems like an easy fix but I have no idea how to do it! thanks Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted August 16, 2016 Share Posted August 16, 2016 Hi Bryan, In the code, you can change the speed of the scroll here: /* Apply animation to this element */ -moz-animation: example1 15s linear infinite; -webkit-animation: example1 15s linear infinite; animation: example1 15s linear infinite; Change the 15 to a higher number for a slower scroll, a lower number gives a faster scroll.Hope that helps!- Loren P.S. Here's a site that allows you to check out and play with different types of marquee code. Link to comment Share on other sites More sharing options...
Bryan Hopper Posted August 17, 2016 Share Posted August 17, 2016 Hi Loren, Thanks for the quick reply, I was able to get the text to move faster, but now that I have increased the width, it seems like it takes a while for the text to even appear on the screen...seems like this is getting more complicated! Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted August 17, 2016 Share Posted August 17, 2016 Hey Bryan, Send me an example of the page you are referring to, and I can take a look. If you are talking about your home page, the scroll shows up right away for me. - Loren Link to comment Share on other sites More sharing options...
Bryan Hopper Posted August 18, 2016 Share Posted August 18, 2016 Hi Loren, If you scroll all the way down to the bottom of our home page, and wait a second or two, the scroll will appear with a list of college. I had to increase width to %500 and then made it 45s. It just is very delayed in starting to appear... Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted August 18, 2016 Share Posted August 18, 2016 Hey Bryan, OK, I think I might have figured this out. If you delete the code you dropped into your head code, and then just add the code below as a code element on the page, I think it will work for you. <!-- HTML --> <marquee behavior="scroll" direction="left" scrollamount="10" scrolldelay="50"><div class="example1"> <h3>United States Naval Academy, United States Military Academy, Yale, Villanova, Princeton, University of Pennsylvania, Georgetown, Cornell, Amherst, Middlebury, Virginia, Brown, North Carolina, Maryland, Fairfield, Lafayette, Richmond, Bucknell, Tufts, Penn State, Mt. St. Marys, Hobart, Delaware, Babson, Rutgers, Hamilton, Salisbury, Oberlin,</marquee></div></h3> Let me know how this works. - Loren Link to comment Share on other sites More sharing options...
Bryan Hopper Posted August 18, 2016 Share Posted August 18, 2016 Loren, This worked perfectly! I think this is actually a better option than the code above, easier to work with. Thanks for being so responsive! Bryan Link to comment Share on other sites More sharing options...
Bryan Hopper Posted August 18, 2016 Share Posted August 18, 2016 Loren, Just when we though we were out of the trees, it looks like it doesnt work on mobile phones...oh well. I will search for another way to do it! Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted August 19, 2016 Share Posted August 19, 2016 Ok, Bryan, I think I have this figured out this time (no really). Try this in your head code: <!DOCTYPE html> <html> <head><!-- Styles --> <style style="text/css"> .example1 { height: 50px; overflow: hidden; position: relative; } .example1 h3 { position: absolute; width: 4500px; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(0%); -webkit-transform:translateX(0%); transform:translateX(0%); /* Apply animation to this element */ -moz-animation: example1 15s linear infinite; -webkit-animation: example1 15s linear infinite; animation: example1 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes example1 { 100% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes example1 { 100% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes example1 { 100% { -moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-100%); } } </style> </head> <body> And then drop this code wherever you want it on the page: <!-- HTML --> <div class="example1"> <h3>United States Naval Academy, United States Military Academy, Yale, Villanova, Princeton, University of Pennsylvania, Georgetown, Cornell, Amherst, Middlebury, Virginia, Brown, North Carolina, Maryland, Fairfield, Lafayette, Richmond, Bucknell, Tufts, Penn State, Mt. St. Marys, Hobart, Delaware, Babson, Rutgers, Hamilton, Salisbury, Oberlin,</h3> </div></body> </html> You will need to adjust the scroll speeds to fit your preference. I tried this in Chrome, Safari and Firefox at multiple widths, and tested on iPhone and Android. Let me know how this works. - Loren Link to comment Share on other sites More sharing options...
Bryan Hopper Posted August 24, 2016 Share Posted August 24, 2016 This worked! Thank you so much Loren! Everything is set now. Thanks so much! Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted August 24, 2016 Share Posted August 24, 2016 That's great to hear! I just posted a Pro Tips article on how to put scrolling text on a page: http://community.sportngin.com/news_article/show/689702?referrer_id=1286159 - Loren Link to comment Share on other sites More sharing options...
akmillers Posted August 25, 2016 Share Posted August 25, 2016 What's the best way to decrease the delay encountered when loading the page and in-between animations? Your original code on this post was perfect as far as speed and start delay but had problems on mobile devices. The final iteration of your code works on everything...but the animation start delay is longer then desired. Anyone have any suggestions? Thank you for this tip! --Chris Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted August 29, 2016 Share Posted August 29, 2016 Hi Chris, I'm certainly no CSS expert, but what I noticed in playing around with this code is that the original version of the code worked fine, in terms of delay, with short messages. But once the messages got longer and longer (beyond the width of the page), and the width in the code needed to be bumped up, the delay became much too long. I think it is important to make sure the width is set as close as possible to exact percentage (or pixels) of the message. That should help reduce the delay. I also played around with the percentage on the starting position code, reducing it from 100 percent to 0 percent at one point, but I'm not sure what effect that had. -- Loren Link to comment Share on other sites More sharing options...
Tim Hobgood Posted January 4, 2018 Share Posted January 4, 2018 I followed the link you provided to some of the other marquee effects. Where would I add/integrate the code the marquee? In the head code, as a code element on the page? Any assistance is greatly appreciated. Cheers, Tim Tim Hobgood Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted January 4, 2018 Share Posted January 4, 2018 You could put the code in either place, really. if you want it on just the one page, the code element would work. If you want it on multiple pages, or throughout the site, you would want to use the Head Code option. Link to comment Share on other sites More sharing options...
Tim Hobgood Posted January 4, 2018 Share Posted January 4, 2018 Thank you for that. When I put the code in it reacts like it should but I don't see anywhere that I can manipulate the text, i.e. size, color... Tim Hobgood Link to comment Share on other sites More sharing options...
Tim Hobgood Posted January 4, 2018 Share Posted January 4, 2018 I missed some info in my last post...if I was to put it in the head option where exactly would I put it within the code? Tim Hobgood Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted January 4, 2018 Share Posted January 4, 2018 You could paste it below anything you have existing in the head code. Just make sure you code starts with <style> and ends with </style> Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted January 4, 2018 Share Posted January 4, 2018 To play around with the size, color, font of the marquee, I would suggest going here to modify your code: https://www.quackit.com/html/html_editors/scratchpad/?example=/css/codes/marquees/scrolling_text Link to comment Share on other sites More sharing options...
gregzerafa Posted March 5, 2016 Share Posted March 5, 2016 this worked great. How do we increase size of message? Link to comment Share on other sites More sharing options...
Rob Bedeaux Posted March 5, 2016 Author Share Posted March 5, 2016 Sure...that's easy. The message is wrapped in an <h3> tag. You can change that from <h1> to <h5> larger to smaller. Don't forget to close the tag at the end with an </h3> or </h4> or whatever size you use. Additionally, you will need to alter the .example1 h3 { bit to match your size Rob Bedeaux (he/him/his) Director, Content Marketing & Strategy E rob.bedeaux@nbcuni.com Link to comment Share on other sites More sharing options...
gregzerafa Posted March 7, 2016 Share Posted March 7, 2016 ALSO HOW TO INCREASE LENGTH OF MESSAGE CUTS OUT AFTER CERTAIN NUMBER OF CHARACTERS. Link to comment Share on other sites More sharing options...
Rob Bedeaux Posted March 7, 2016 Author Share Posted March 7, 2016 Great question! Any real front end developers out there care to take a crack at this? My meager CSS skills are at their limit. Rob Bedeaux (he/him/his) Director, Content Marketing & Strategy E rob.bedeaux@nbcuni.com Link to comment Share on other sites More sharing options...
pmcaughey Posted May 3, 2016 Share Posted May 3, 2016 I was able to increase the length of the message by increasing the width variable to a number larger than 100%. Link to comment Share on other sites More sharing options...
Question
Rob Bedeaux
Ever wanted to create a bit of text that scrolls across your screen? With this simple code block and the head code you can input some text and have it 'march' across the container similar to how the news scroll works.
Put this bit in the head code of the page
Put this bit in your code page element
Rob Bedeaux (he/him/his)
Director, Content Marketing & Strategy
E rob.bedeaux@nbcuni.com
Link to comment
Share on other sites
24 answers to this question
Recommended Posts
Archived
This topic is now archived and is closed to further replies.