Scrolling Text In A Box - HTML5

+1 HyJax LTD · October 21, 2014
So I have decorative box that I have text I want to scroll from right to left across it.

The box is fixed but the text scrolls across like the old style digital panel boards.

Here is a box, what would go in the field "#scrolling_text"; and lower if needed, to make this effect happen?


#scrollbox_window{
 display: block;
 width: 65%;
 height: 28px;
 margin: auto;
 margin-top: 280px;
 margin-bottom: 20px;
 padding 4px;
 border:3px solid lightgreen;
 color:red;
 display: flex;
 flex-direction: column;
 border-radius: 5px;
 font: normal 24px Comic Sans MS;
 text-align: center;
 
}
#scrolling_text{


}

Post a Reply

Replies

Oldest  Newest  Rating
0 HyJax LTD · October 22, 2014
NEVER MIND

Must be having some serious cerebellum constipation this morning.

Its works in all browsers now.
0 HyJax LTD · October 22, 2014
Okay.. works in Chrome.

I tried to make work in IE without the vendor prefix but it doesn't scroll.

What is the non-vendor prefix version of this?
0 HyJax LTD · October 22, 2014
Must have misspelled something or left a semicolon out in my design.

Thanks, this works in Chrome now to cross support.
+1 Anormal Dev · October 22, 2014
@-webkit-keyframes scroll{ 
0% { -webkit-transform: translate(0, 0); } 
  100% { -webkit-transform: translate(-100%, 0);} 


.marque { 
display:block; 
width:100%; 
white-space:nowrap; 
overflow:hidden; 


.marque span{ 
display:inline-block; 
padding-left:100%; 
-webkit-animation: scroll 5s infinite linear; 
0 HyJax LTD · October 21, 2014
Nice..

Ill give you the Kudos if you write the css script and post it.

I liked the video and will watch more of them but I wanted the actual css posted so it can be easily referenced.

This video has EXACTLY what I was wondering.  Thank you.

(Ill like the post you just did to. If you beat me to posting the css script from the video Ill Kudos that :)
  • 1

HTML / CSS / Web Design

107,318 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators