Jump to content
J.Heaton

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 post
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 post
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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...