Как сделать бегущую строку на чистом CSS

Franky Jo

11 месяцев назад

Было время, когда можно было сделать бегущую строку только при помощи HTML, используя тег <marquee>
Теперь уже так не сделаешь, а поэтому, я расскажу вам как сделать бегущую строку на чистом CSS и не используя JS.

HTML

<header class="header ticker-wrapper">
  <div class="ticker-wrapper__first-half">
    <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p>
    <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p></div>
  <div class="ticker-wrapper__second-half">
  <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p>
    <img src="http://pngimg.com/uploads/mercedes/mercedes_PNG1834.png" alt="BorisCooper">
    <p>просто для новичков, выгодно для каждого</p>
  </div>
</header>

<p>просто для новичков, выгодно для каждого</p>

<p>просто для новичков, выгодно для каждого</p></div>

<p>просто для новичков, выгодно для каждого</p>

<p>просто для новичков, выгодно для каждого</p>

</div>

</header>

CSS

.header {
  background: #212121;
  overflow: hidden;
  height: 65px;
  position: relative;

  div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 65px;
    transform: translate(100%, 0);

    p {
      font-family: 'Roboto', sans-serif;
      color: #fff339;
      text-transform: uppercase;
    }
    img{
      height: 60px;
    }
  }

  $duration: 30s;

  .ticker-wrapper__first-half, .ticker-wrapper__second-half {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    animation: ticker $duration infinite linear forwards;
  }

  .ticker-wrapper__second-half {
    animation: $duration ticker $duration/2 infinite linear forwards;
  }
}

@keyframes ticker {
  0% {
    transform: translate(100%, 0);
  }

  50% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}

.header {

background: #212121;

overflow: hidden;

height: 65px;

position: relative;

div {

display: flex;

flex-direction: row;

justify-content: space-around;

align-items: center;

overflow: hidden;

width: 100%;

height: 65px;

transform: translate(100%, 0);

p {

font-family: 'Roboto', sans-serif;

color: #fff339;

text-transform: uppercase;

}

img{

height: 60px;

}

$duration: 30s;

.ticker-wrapper__first-half, .ticker-wrapper__second-half {

display: flex;

flex-direction: row;

justify-content: space-around;

align-items: center;

position: absolute;

top: 0;

right: 0;

animation: ticker $duration infinite linear forwards;

}

.ticker-wrapper__second-half {

animation: $duration ticker $duration/2 infinite linear forwards;

}

@keyframes ticker {

0% {

transform: translate(100%, 0);

}

50% {

transform: translate(0, 0);

}

100% {

transform: translate(-100%, 0);

}

ДЕМО

Все довольно просто, но если у вас остались вопросы или есть интересные темы для статьи, которые хотите что бы я подсветил, оставляйте свои комментарии 🙂
И еще, не забудьте подписаться на наш телеграм-канал, чтобы вы всегда были вкурсе новых статей, книг и курсов 😉