ray
ray

Reputation: 11

Scrolling text long delay before start after video html and css

I have just finished working on a new website for my festivals business and the scrolling text "ticker tape" is taking an age (Sometimes up to a minute) to load especially on phones. It's just on our camping page though (https://wildfestivals.co.uk/school_holiday_camping.html), all other tickers and videos are working well together. My question is, is it the video that's delaying the start and is there a way I can keep both items on there, but speed the start of the ticker up at all?

I'd hate to lose the function. Does anyone know a way that I can sort this please? As you can see I am a have a go guy, not a pro developer.

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

.ticker2-wrap {
  position: static;
  left: 0;
  width: 100%;
  overflow: hidden;
  height: 2rem;
  background: rgba(0, 0, 0, 0.2);
  box-sizing: content-box;
}

.ticker2-wrap .ticker2 {
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -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: 120s;
  animation-duration: 120s;
}

.ticker2-wrap .ticker2__item {
  display: inline-block;
  padding: 0 0rem;
  font-size: 1.2rem;
  letter-spacing: 2px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 400;
  color: rgba(0, 0, 0, 0);
  text-shadow: none;
}
<div class="ticker2">
  <div class="ticker2__item">********<strong>School holidays with a difference Camping is just £6 a night for Adults &amp; £3 for Children</strong>********</div>
  <div class="ticker2__item">********<strong>With daytime &amp; evening entertainment included in the price everyone can afford to enjoy a camping holiday with us</strong>********</div>
  <div class="ticker2__item">********<strong>Have as much space as you need at no extra cost</strong>********</div>
  <div class="ticker2__item">********<strong>Caravans Campervans Motorhomes and tents are all welcome here</strong>********</div>
  <div class="ticker2__item">********<strong>Pop up campsites at 7 beautiful locations for up to a week at each one</strong>********</div>
  <div class="ticker2__item">********<strong>Full toilet facilities including disabled toilets and elsan points on site</strong>********</div>
  <div class="ticker2__item">********<strong>Camping zones to suit all campers you can stay up late or you can enjoy peace and quiet it's your choice</strong>********</div>
  <div class="ticker2__item">********<strong>Our camping is now available for everyone, no festival booking required</strong>********</div>
  <div class="ticker2__item">********<strong>Camp more for less at WF</strong></div>
</div>
</div>

Upvotes: 1

Views: 66

Answers (0)

Related Questions