1

I've achieved a ticker with pure css, there is a small issue which i'm not able to rectify.

I want the ticker to be continuous without any gaps. i.e after "item 2" scroll ends "item 1" should appear immediately.

Currently if you notice in the fiddle, after the last item in scroll there is a lot of empty space. I need the first item to appear immediately after the last item in the marquee.

    <style>

    .nochng {color:#333}
    .upchng {color:#00b300}
    .dwnchng{color:#cc0000}

    @-webkit-keyframes ticker {
    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);
    }
    }
    @keyframes ticker {
    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);
    }
    }
    .ticker-wrap {
    width: 100%;
    overflow: hidden;
    padding-left: 100%;
    }

    .ticker {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    }

    .ticker-wrap:hover .ticker {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
    }

    .ticker__item {
    display: inline-block;padding: 0 0.5rem;text-transform: uppercase;}
    .italic {font-style:italic;}
    </style>
    <div class="ticker-wrap">
    <div class="ticker">
    <div class="ticker__item"><span>Item1</span><span class="dwnchng"> Red <span class="italic">Color </span>&nbsp;<small>(inserted)</small>  </span></div>
    <div class="ticker__item"><span>Item2</span><span class="upchng"> Green <span class="italic">Color </span>&nbsp;<small>(inserted)</small>  </span></div>
    </div>

FIDDLE

Cœur
  • 37,241
  • 25
  • 195
  • 267
Sunny
  • 45
  • 1
  • 6
  • 2
    how retro! don't think you will be able to solve this with pure css – Pete Mar 21 '17 at 10:55
  • 2 options: if you think you'll have enough data to fill the full width (so you'll be able to put the first item in the last position when it's out of the viewport). The second option is cloning and appending the data with JS. – enguerranws Mar 21 '17 at 10:57
  • Hi Pete, being retro is a good thing or bad? Secondly my parent page is loading jquery, do you thing by jquery i can solve this? and how? – Sunny Mar 21 '17 at 10:58
  • Hi enguerranws, Currently there is enough data to fill the full width, but still it leave spacing. How can i clone in js, my parent page is loading jquery, can you please guide. – Sunny Mar 21 '17 at 10:58
  • this link may help you : http://jsfiddle.net/roine/TCJT4/ – sansan Mar 21 '17 at 10:59
  • Close, but i need stop on mouseover – Sunny Mar 21 '17 at 11:01
  • @user7357089, that link doesn't solve the problem of the blank space. See http://jsfiddle.net/k3fbseyn/ – Rick Hitchcock Mar 21 '17 at 11:07
  • check this link may solve the problem: http://www.sanwebcorner.com/2016/08/continuous-image-scroll-using-javascript.html – sansan Mar 21 '17 at 11:10

0 Answers0