Смена цвета текста на гифку при наведении

333
13 июня 2018, 11:30

Всем привет Недавно друзья заказывали билет на фестиваль на этом сайте https://bmfest.com/ (не реклама) и показали мне.

Мне очень понравился эффект с заменой цвета текста на гифку и я хочу узнать как это реализовано,желательно с примером.

Заранее спасибо!

Answer 1

Секрет в особом выводе фона и заглушке прорех до момента наведения.
Тогда просто скрыть заглушку и показать что фон вырезан особым свойством (-webkit-background-clip), хотя делали немного криворукие ребята:

body { 
  background: black; 
} 
 
.bg { 
  background-image: url(https://bmfest.com/wp-content/themes/bmfest/images/map.jpg); 
  background-size: cover; 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
   color: white; 
  animation: animatedBackground 30s linear infinite; 
} 
 
@keyframes animatedBackground { 
  0% { 
    background-position: 0 0; 
  } 
  50% { 
    background-position: -300px 0; 
  } 
} 
 
ul { 
  list-style-type: none; 
  padding: 0; 
  margin: 0; 
} 
 
li span { 
  font-size: 100pt; 
  font-weight: 700; 
  font-family: Impact; 
} 
 
.v { 
  position: absolute; 
  left: 8px; 
  cursor: pointer; 
  z-index: 999; 
  color: white; 
  -webkit-text-fill-color: white; 
  transition: all ease 0.2s; 
} 
 
.v:hover { 
  opacity: 0; 
}
<div class='bg'> 
  <ul> 
    <li> 
      <span>Text</span> 
      <span class='v'>Text</span> 
    </li> 
  </ul> 
</div>

READ ALSO
Добавление элемента в новый вопрос

Добавление элемента в новый вопрос

Имеется блок с вопросом и ответамиПри нажатии на "Добавить вопрос", а затем в новом вопросе "Добавить ответ" - добавляет новый ответ только...

252
Как правильно работать со списком checkbox&#39;ов?

Как правильно работать со списком checkbox'ов?

Это фрагмент таблицы с суммами для загрузки в БДПри загрузке (в параметрах хранимой процедуры БД) у каждого банка есть свой параметр, который...

201
Как убрать лишние символы @ из json файла?

Как убрать лишние символы @ из json файла?

Получаю данные из JSON файла более 3к строк и вывожу на страницу через jsrender, но столкнулся с проблемой, в конечных объектах, в начале у свойств,...

297