CSS - Есть ли лучший способ создать прокручивающийся повторяющийся текст, который появляется и исчезает с самого края поля? - PullRequest
Новая
       9

CSS - Есть ли лучший способ создать прокручивающийся повторяющийся текст, который появляется и исчезает с самого края поля?

0 голосов
/ 03 декабря 2018 

.container {
      font-family: sans-serif;
      font-size: 30px;
      position: relative;
    /*   border: 1px solid #000; */
      width: 90%;
      margin: 0 auto;
      overflow: hidden;
      text-align: center;
      margin-top: 10px;
    }
    
    .individual {
      animation: scroll 500ms linear infinite;
      }
    
    @keyframes scroll {
      100% {
        transform: translateY(100%);
      }
    }
    
    .overlay-1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: none;
      outline: 20px solid #fff;
      outline-offset: -20px;
    }
    
    .overlay-2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      background-color: none;
      z-index: 2;
      outline: 2px solid #000;
      outline-offset: -20px;
    }
<div class="container">
 
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>

<div class="overlay-1"></div>
<div class="overlay-2"></div>
  
</div>

Я пытаюсь выяснить, как воссоздать эффект, используемый на этом сайте: https://inthecity.strelka.com/en

Это эффект в поляхгде слово, как «конференция» повторяется снова и снова в списке прокрутки.Глядя на их исходный код, кажется, что они повторяют одно и то же слово в серии идентичных элементов div, а затем анимируют их в бесконечном цикле с помощью transform: translate.Эта часть была достаточно простой, но было сложнее получить верхнюю строку для ввода поля «снаружи», точно так же, как нижний текст выходит из поля, если это имеет смысл.Верхняя строка просто появляется внезапно.

Я решил ее с помощью наложенного прямоугольника с контуром с отрицательным смещением, который действует как внутренняя маска по краям, а затем с другим прямоугольником для предоставления границы.

Но мне интересно, есть ли более простой способ решить эту проблему?

Любая помощь или идеи будут великолепны, спасибо!

1 Ответ

0 голосов
/ 03 декабря 2018

Ваша проблема в этих двух строках: 

outline: 20px solid #fff;
outline-offset: -20px;

Я добавил приведенный ниже фрагмент с правильным кодом. 

.container {
      font-family: sans-serif;
      font-size: 30px;
      position: relative;
    /*   border: 1px solid #000; */
      width: 90%;
      overflow: hidden;
      text-align: center;
      margin-top: 10px;
    }
    
    .individual {
      animation: scroll 1000ms linear infinite;
      }
    
    @keyframes scroll {
      100% {
        transform: translateY(100%);
      }
    }
    
    .overlay-1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: none;
      outline: 50px solid #fff;
      outline-offset: -30px;
    }
    
    .overlay-2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      background-color: none;
      
      outline: 2px solid #000;
      outline-offset: -20px;
    }
<div class="container">
 
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>

<div class="overlay-1"></div>
<div class="overlay-2"></div>
  
</div>
...