Horizontal Ticker without scrollbars

flyboy · #5 Aug 30, 2016, 11:58 AM

Hey thank you for the reply JD

Actually I was hoping for the opposite effect - a way to get rid of the horizontal scroller without changing the position of a ticker. I had one solution for a scrollbar but it too moved my ticker as it used absolute positioning (hence the need to avoid absolute positioning).

But I got the best solution from some guys at stack overflow.

Also, got another solution from a dev of ours:

HTML:

Code:

<p>Content before ticker</p>

<div id="tickerwrap">
  <div id="ticker">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel augue eget velit tristique 
    pretium. Nam ultrices nulla risus, ut elementum mauris dignissim at. Sed ultrices placerat 
    dolor, ac congue nunc molestie et.
  </div>
</div>

<p>Content after ticker</p>

CSS:

Code:

/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
0% {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible;}
100% {-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
}

/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {width: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); color: #fff;}

/* Formatting the ticker content background, font color, padding and off-screen entrance */
#ticker {display: inline-block; white-space: nowrap; -webkit-animation-iteration-count: infinite; 
            animation-iteration-count: infinite; -webkit-animation-timing-function: linear; 
            animation-timing-function: linear; -webkit-animation-name: customticker; 
            animation-name: customticker; -webkit-animation-duration: 10s; animation-duration: 10s;}