Как изменить цвет шрифта при наложении изображения?

Question

Я видел этот сайт на днях https://bahaasamir.me, и мне было интересно, как этот текстовый эффект может быть воспроизведен? Я имею в виду изменить черный цвет на белый при наложении изображения (CSS или JS). Я пытался использовать режимы наложения, но результат был не таким хорошим. Любые идеи или указания о том, как этот эффект может быть достигнут?

Answer 1

У вас есть несколько вариантов. Вы можете написать сценарий и анимацию CSS самостоятельно или использовать библиотеку

animejs

, другой вариант - использовать CSS-анимацию

.element {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: red;
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
    background-color: red;
    border-radius: 100%;
  }
  50% {
    background-color: orange;
  }
  100% {
    transform: scale(1.5);
    background-color: yellow;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="element"></div>

Просто проверьте текстовую анимацию CSS

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Finger+Paint);

body {
  background: black;
  overflow: hidden;
  font: 5vw/100vh "Finger Paint";
  text-align: center;
  color: transparent;
  backface-visibility: hidden;
}

span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s 3s both;
}

span:nth-child(even){
  animation-name: smoky-mirror;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform:
      translate3d(15rem,-8rem,0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke; }
  to {
    transform:
      translate3d(18rem,-8rem,0)
      rotate(-40deg) 
      skewX(-70deg)
      scale(2);
     text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(3 + ($item/10))}s; 
  }
} 

<span>C</span><span>S</span><span>S</span><span>&nbsp;</span><span>S</span><span>m</span><span>o</span><span>k</span><span>y</span><span>&nbsp;</span><span>T</span><span>e</span><span>x</span><span>t</span><span>&nbsp;</span><span>E</span><span>f</span><span>f</span><span>e</span><span>c</span><span>t</span>

Бесплатные примеры

Answer 2

https://css -tricks.com / Methods-Contraing-Text-Backgrounds /

После прочтения вашего вопроса я обнаружил, что это позволяет контрастировать текст на фоновых изображениях ...

Имеется несколько ручек для анимации по пути клипа, которые вы можете изменить цвет