CODEWITHSUNDEEP
htmlcss
Jules
Jules

Reputation: 143

pure css news/info feed

I have some code that works fine, it simply adds a horizontal news feed (or any information I list) It works good with no flicker but when I add more data to it, it seems to take a while to load and the speed changes? I have quite a lot more information to add to it but I dont want to keep changing the speed everytime the data is changed.

Any help would be great, thanks

@keyframes customticker {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 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 exit state */

#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: 70s;
  animation-duration: 70s;
}
<div id="tickerwrap">
  <div id="ticker">
    Avon <span style="color: #333638"> | </span> Bedfordshire <span style="color: #333638"> | </span> Buckinghamshire <span style="color: #333638"> | </span> Cambridgeshire <span style="color: #333638"> | </span> Cheshire <span style="color: #333638"> | </span>    Cleveland <span style="color: #333638"> | </span> Clwyd <span style="color: #333638"> | </span> Cornwall <span style="color: #333638"> | </span> County Antrim <span style="color: #333638"> | </span> County Armagh<span style="color: #333638"> | </span>    County Down<span style="color: #333638"> | </span> County Fermanagh<span style="color: #333638"> | </span> C ounty Londonderry<span style="color: #333638"> | </span> County Tyrone <span style="color: #333638"> | </span> Cumbria <span style="color: #333638"> | </span>    Derbyshire <span style="color: #333638"> | </span> Devon <span style="color: #333638"> | </span> Dorset <span style="color: #333638"> | </span> Dumfries <span style="color: #333638"> | </span> Galloway <span style="color: #333638"> | </span> Durham
    <span style="color: #333638"> | </span> Dyfed <span style="color: #333638"> | </span> East Sussex <span style="color: #333638"> | </span> Essex <span style="color: #333638"> | </span> Fife <span style="color: #333638"> | </span> Gloucestershire
    <span
      style="color: #333638"> | </span>
      Grampian <span style="color: #333638"> | </span> Greater Manchester <span style="color: #333638"> | </span> Gwent <span style="color: #333638"> | </span> Gwynedd County <span style="color: #333638"> | </span> Hampshire <span style="color: #333638"> | </span>      Herefordshire
  </div>
</div>

But I want to add more data to it without it taking ages to load.

Thanks

Upvotes: 2

Views: 459

Answers (1)

Shiva127
Shiva127

Reputation: 2623

Solution with margin-left & transform-origin

I've got a tricky solution with margin-left & transform-origin.

@keyframes customticker {
  0% {
    margin-left: 100%;
    transform: translateX(0);
  }
  100% {
    margin-left: 0%;
    transform: translateX(-100%);
  }
}

#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: black;
}

#ticker {
  display: inline-block;
  color: white;
  white-space: nowrap;
  transform-origin: 100% 0;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: customticker;
  animation-duration: 60s;
}

#ticker span {
  color: grey;
}
<div id="tickerwrap">
  <div id="ticker">
    Avon <span>|</span>
    Bedfordshire <span>|</span>
    Buckinghamshire <span>|</span>
    Cambridgeshire <span>|</span>
    Cheshire <span>|</span>
    Cleveland <span>|</span>
    Clwyd <span>|</span>
    Cornwall <span>|</span>
    County Antrim <span>|</span>
    County Armagh <span>|</span>
    County Down <span>|</span>
    County Fermanagh <span>|</span>
    County Londonderry <span>|</span>
    County Tyrone <span>|</span>
    Cumbria <span>|</span>
    Derbyshire <span>|</span>
    Devon <span>|</span>
    Dorset <span>|</span>
    Dumfries <span>|</span>
    Galloway <span>|</span>
    Durham <span>|</span>
    Dyfed <span>|</span>
    East Sussex <span>|</span>
    Essex <span>|</span>
    Fife <span>|</span>
    Gloucestershire <span>|</span>
    Grampian <span>|</span>
    Greater Manchester <span>|</span>
    Gwent <span>|</span>
    Gwynedd County <span>|</span>
    Hampshire <span>|</span>
    Herefordshire
  </div>
</div>

Solution with padding-left & padding-right

Or the solution proposed by @Jules with padding-left & padding-right.

@keyframes ticker {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: black;
  padding-left: 100%;
}

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

#ticker span {
  color: grey;
}
<div id="tickerwrap">
  <div id="ticker">
    Avon <span>|</span>
    Bedfordshire <span>|</span>
    Buckinghamshire <span>|</span>
    Cambridgeshire <span>|</span>
    Cheshire <span>|</span>
    Cleveland <span>|</span>
    Clwyd <span>|</span>
    Cornwall <span>|</span>
    County Antrim <span>|</span>
    County Armagh <span>|</span>
    County Down <span>|</span>
    County Fermanagh <span>|</span>
    County Londonderry <span>|</span>
    County Tyrone <span>|</span>
    Cumbria <span>|</span>
    Derbyshire <span>|</span>
    Devon <span>|</span>
    Dorset <span>|</span>
    Dumfries <span>|</span>
    Galloway <span>|</span>
    Durham <span>|</span>
    Dyfed <span>|</span>
    East Sussex <span>|</span>
    Essex <span>|</span>
    Fife <span>|</span>
    Gloucestershire <span>|</span>
    Grampian <span>|</span>
    Greater Manchester <span>|</span>
    Gwent <span>|</span>
    Gwynedd County <span>|</span>
    Hampshire <span>|</span>
    Herefordshire
  </div>
</div>

Upvotes: 3

Related Questions