CSS режим смешивания + JS - PullRequest
Новая
       61

CSS режим смешивания + JS

2 голосов
/ 13 апреля 2020

Итак, у меня есть пользовательский курсор js (который следует за курсором мыши с задержкой), у которого цвет фона # 000 и режим смешивания-смешивания, установленный на разность. Мой цвет фона тела и текста установлен на #fff. Теперь у меня есть тег ap с текстом «HELLO», который я хочу видеть только словами «H» и «O», поэтому я создал диапазон, цвет которого установлен на # 000. При наведении курсора на тег P из-за режима смешивания-смешивания я могу видеть слова «ELL» так, как я хотел, но слова «H» и «O» становятся «невидимыми». Как я могу сделать их видимыми, когда курсор проходит над ним? (только часть каждого слова, на которую указывает курсор, а не все слово, ЕСЛИ курсор не охватывает все слово)

Есть ли какое-либо решение? Я попытался изменить цвет "H" и "O" на mouseenter / mouseleave, но он не работает должным образом. 

const cursor = document.querySelector('.cursor')
const wuc = document.querySelectorAll('.wuc')
document.addEventListener('mousemove', e => {
    cursor.setAttribute('style', 'top: ' + e.clientY+'px; left: '+e.clientX+'px;')
})


wuc.forEach((wuc) => {
    wuc.addEventListener('mouseenter', () => {
        wuc.style.color = '#fff'
    })
    wuc.addEventListener('mouseleave', () => {
        wuc.style.color = '#000'
    })
})
body {
    background-color: #fff;
    color: #fff;
}

.cursor {
    width: 5vw;
    height: 5vw;
    transform: translate(-2.5vw, -2.5vw);
    position: fixed;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    background-color: #000;
    border-radius: 50%;
    mix-blend-mode: difference;
}

p {
    margin-left: 30vw;
    margin-top: 40vh;
}
.wuc {
    color: #000;
}
 <div class="cursor"></div>
    <p class="container">
       <span class="wuc">H</span>ELL<span class="wuc">O</span>
    </p>

1 Ответ

0 голосов
/ 13 апреля 2020

Я бы покрасил текст, используя radial-gradient, которые следуют той же позиции вашего пользовательского курсора 

const cursor = document.querySelector('.cursor')
document.addEventListener('mousemove', e => {
  cursor.setAttribute('style', 'top: ' + e.clientY + 'px; left: ' + e.clientX + 'px;');
  document.body.setAttribute('style', '--x: ' + e.clientX + 'px;--y:' + e.clientY + 'px;');
})
body {
  background-color: #fff;
  color: #fff;
}

.cursor {
  width: 5vw;
  height: 5vw;
  transform: translate(-2.5vw, -2.5vw);
  position: fixed;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  background-color: #000;
  border-radius: 50%;
  mix-blend-mode: difference;
}

p {
  margin-left: 30vw;
  margin-top: 40vh;
}

.wuc {
  background: 
    radial-gradient(farthest-side, #fff 99.5%, #000 100%) calc(var(--x,0px) - 2.5vw) calc(var(--y,0px) - 2.5vw)/5vw 5vw fixed no-repeat,
    #000;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  color:transparent;
  
}
<div class="cursor"></div>
<p class="container">
  <span class="wuc">H</span>ELL<span class="wuc">O</span>
</p>
...