Закрашивание текста при движении

Question

Как можно сделать такое, чтобы текст двигался справа налево и закрашивался?

body {
  margin: 0;
  padding: 0;
}

.black,
.white,
.text {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100vh;
}

.black {
  left: 0;
  background-color: black;
}

.white {
  right: 0;
  background-color: white;
}

.text {
  left: 0;
  right: 0;
  width: 100%;
  line-height: 100vh;
  text-align: center;
  font-size: 10rem;
  color: white;
}

<section>
  <span class="black"></span>
  <span class="white"></span>
  <span class="text">Закрашивание текста</span>
</section>

Answer 1

* {
  margin: 0;
  padding: 0;
}

section {
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100vh;
}

.black {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
  background: black;
  color: white;
}

.white {
  position: absolute;
  overflow: hidden;
  top: 50%;
  white-space: nowrap;
  line-height: 100vh;
  font-size: 14rem;
  font-family: "arial black";
  animation: animate 15s linear infinite;
}

@keyframes animate {
  0% {
    transform: translate(50%, -50%);
  }
  100% {
    transform: translate(-100%, -50%);
  }
}

<section>
  <span class="white">
    <span>Закрашивание текста</span>
  </span>
  <div class="black">
    <span class="white">
      <span>Закрашивание текста</span>
    </span>
  </div>
</section>

Answer 2

Разделение

Попробуй разделить текст в html подогнать к друг другу и при наводе на одну из них,

селектор:hover{Параметры};

задать параметры:

background-color: black;
color: цвет который тебе нужен;

Тем самым ты сделаешь закрашивание, но! У него не будет анимации

Answer 3

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 72px;
  font-weight: 800;
}

.paint {
  display: inline-block;
  position: relative;
  letter-spacing: .05em;
}

.paint::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #000;
  z-index: 2;
  transition: width 5s ease;
}

.paint__inner::before {
  content: 'Закрашивание';
  position: absolute;
  color: #fff;
  z-index: 2;
  width: 0;
  transition: width 5s ease;
  overflow: hidden;
}

.paint:hover::before {
  width: 100%;
}

.paint:hover .paint__inner::before {
  width: 100%;
}

<div class="paint">
  <div class="paint__inner">Закрашивание</div>
</div>

Answer 4

Также можно реализовать такой эффект с помощью свойств CSS3 filter и mix-blend-mode. Правда, придётся отказаться от поддержки старых браузеров (а, в случае с mix-blend-mode и от Edge)

* { margin: 0; padding: 0; }

section {
  display: block;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background-color: white;
  filter: grayscale(100%) contrast(200%);
}

.bg {
  position: relative;
  height: 100%;
  width: 50%;
  background-color: red;
}

.txt {
  position: absolute;
  top: 50%;
  min-width: 200vw;
  overflow: hidden;
  font: bold 14em/100vh "arial black";
  white-space: nowrap;
  color: cyan;
  mix-blend-mode: difference;
  animation: animate 15s linear infinite;
}

@keyframes animate {
  from { transform: translate(50%, -50%); }
  to { transform: translate(-100%, -50%); }
}

<section>
  <div class="bg">
    <span class="txt">Закрашивание текста</span>
  </div>
</section>

БЛОГ НА HUSL

Закрашивание текста при движении

Ответы (4 шт):

Разделение