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;}