Jump to content

scrolling text


Recommended Posts

how do I make scrolling text on frog I have a display TV with a frog element displaying news but I can't get the text to scrolling across the screen instead it just goes of screen creating a scroll bar which is not ideal. i found a you tube video dated 2012 that has a <marquee> command in the text but I don't see a strip formatting button in the text plan of frog any help would be appreciated. 

Link to comment
Share on other sites

Hi

Funnily enough i put some code together a little while ago just for this, then started building it into a widget.

ticker.PNG

This code in an HTML widget should get you started though:

<style style="text/css">
.scroll-body {
 height: 36px;	
 overflow: hidden;
 position: relative;
 background:#a52a2a;
 border-top: 5px solid #ffac00;
}
.heading-text {
 margin:0px 10px 5px 10px;
 width:150px;
 font-family: OpenSans-Regular, Helvetica, Arial, "Gill Sans", "Gill Sans MT", sans-serif, "DejaVu Sans Condensed", "Myriad Pro";
 font-weight:normal;
 font-size:18px;
 line-height:36px;
 text-align:left;
 color:#ffac00;
 float:left;
}
.scrollCont {
 width:calc(100% - 150px);
 height: 36px;	
 overflow:hidden;
 float:left;
 position: absolute;
 left:150px;
}
.scroll-text {
 border:0px solid #000000;
 position: absolute;
 padding: 0px 0px 0px 150px;
 width:100%;
 height: 100%;
 margin:0px 5px 5px 150px;
 font-family: OpenSans-Regular, Helvetica, Arial, "Gill Sans", "Gill Sans MT", sans-serif, "DejaVu Sans Condensed", "Myriad Pro";
 line-height: 36px;
 font-size: 18px;
 color:#ffffff;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 22s linear infinite;
 -webkit-animation: scroll-left 22s linear infinite;
 animation: scroll-left 22s linear infinite;

}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
@media only screen
  and (max-width: 800px)
  {
	.scroll-body {
 border-left: 5px solid #ffac00;
 border-top: 0px
 }
}
</style>

<div class="scroll-body">
<div class="heading-text">Announcements:</div>
<div class="scrollCont">
	<div class="scroll-text">CSS scrolling text...			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;						-Some More text, where will it go - nobody knows!!!				-</div>
</div>
</div>

I'll get the widget finished one day 

 

 

Link to comment
Share on other sites

4 hours ago, Graham Quince said:

Hi

Funnily enough i put some code together a little while ago just for this, then started building it into a widget.

This code in an HTML widget should get you started though:


<style style="text/css">
.scroll-body {
 height: 36px;	
 overflow: hidden;
 position: relative;
 background:#a52a2a;
 border-top: 5px solid #ffac00;
}
.heading-text {
 margin:0px 10px 5px 10px;
 width:150px;
 font-family: OpenSans-Regular, Helvetica, Arial, "Gill Sans", "Gill Sans MT", sans-serif, "DejaVu Sans Condensed", "Myriad Pro";
 font-weight:normal;
 font-size:18px;
 line-height:36px;
 text-align:left;
 color:#ffac00;
 float:left;
}
.scrollCont {
 width:calc(100% - 150px);
 height: 36px;	
 overflow:hidden;
 float:left;
 position: absolute;
 left:150px;
}
.scroll-text {
 border:0px solid #000000;
 position: absolute;
 padding: 0px 0px 0px 150px;
 width:100%;
 height: 100%;
 margin:0px 5px 5px 150px;
 font-family: OpenSans-Regular, Helvetica, Arial, "Gill Sans", "Gill Sans MT", sans-serif, "DejaVu Sans Condensed", "Myriad Pro";
 line-height: 36px;
 font-size: 18px;
 color:#ffffff;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 22s linear infinite;
 -webkit-animation: scroll-left 22s linear infinite;
 animation: scroll-left 22s linear infinite;

}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
@media only screen
  and (max-width: 800px)
  {
	.scroll-body {
 border-left: 5px solid #ffac00;
 border-top: 0px
 }
}
</style>

<div class="scroll-body">
<div class="heading-text">Announcements:</div>
<div class="scrollCont">
	<div class="scroll-text">CSS scrolling text...			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;						-Some More text, where will it go - nobody knows!!!				-</div>
</div>
</div>

I'll get the widget finished one day 

 

 

Some code.................  Just some...................... O.o

Link to comment
Share on other sites

  • 3 years later...

If you want t go further, and have DIVs scroll horizontally across the screen, then this code can help:

The benefit of being DIVs, is you can additional HTML inside each DIV, including images and links. 

scrollingdivs.PNG

<style>
    .ticker {
        border: 1px solid #000000;
        width: 100%;
    	height: 200px;
        overflow: hidden;
    }
    .scrolling {
        animation: marquee 20s linear infinite; 
    }
    .tickeritem {
        height: 165px; 
        width: 200px; 
        float: left;
        background: #EBEBEB;
        font-size: 14px;
        line-height: 19px;
        margin: 5px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        padding: 10px;
    }

@keyframes marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(232px * -6), 0, 0); }
</style>

<div class="ticker">
    <div class="scrolling">
        <div class="tickeritem" ><a href="https://google.co.uk" target="_new"> #1 goes here</a></div>
        <div class="tickeritem">#2 goes here</div>
        <div class="tickeritem">#3 goes here</div>
        <div class="tickeritem" >#4 goes here</div>
        <div class="tickeritem">#5 goes here</div>
        <div class="tickeritem">#6 goes here</div>
    </div>
</div>


<script>
var htmlWidget = arguments[0],
    scrolling = arguments[0].find('.scrolling'),
    scrollingDivs = arguments[0].find('.tickeritem'),
    numItems = scrollingDivs.length,
    gap = 32,
    divWidth = scrollingDivs.width(),
    scrollingWidth = numItems*(divWidth+gap)*2;


    scrolling.css('width',scrollingWidth+'px');
    scrollingDivs.clone().appendTo(scrolling);

</script>

 

Notes:

The animation is a little finicky:

  • The scrolling box needs to be wide enough to take each item plus padding, margins, borders etc...  I gave up getting Javascript to calculate it and just plugged in the number which worked.  For 6 items, 200px wide with the CSS I've set, that number was 32. 
  • This line in the style tag makes it all work:  100% { transform: translate3d(calc(232px * -6), 0, 0); }  - 6 is the number of items, and 232 is the item width plus the 32 mentioned above.  If you have 5 items, you need to adjust the accordingly etc...
  • The script duplicates all the DIV items and sets the width based on the number of DIV items.  The duplication is needed because the CSS Transform runs the whole original set of items from one side of the screen to the other before starting again.  This duplication makes it looks like a continuous loop.  Comment out the ticker's overflow to see what's really happening.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...