Изменить цвет текста с черного на белый при наложении bg - PullRequest
Новая
       53

Изменить цвет текста с черного на белый при наложении bg

0 голосов
/ 23 февраля 2019

У меня есть div, который позиционируется абсолютно с градиентом цвета фона.У меня есть этот текст, который я хочу изменить на белый цвет при прокрутке текста вверх.

Я использую свойство 'mix-blend-mode', чтобы достичь этого в настоящее время, но не могунайдите любую настройку, которая превратит текст из черного в белый.Кто-нибудь делал это раньше или может придумать трюк, который я могу сделать?

image text change on scroll

.bg-container {
  position: fixed;
  top: -30px;
  left: 0;
  width: 100px;
  height: 100px;
}

.gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
  transform: skewY(-15deg);
}

.scroll-content {
  position: absolute;
  top: 50px;
}

.scroll-content p {
  color: #000;
  mix-blend-mode: overlay;
}

/*hack for iOS*/
.scroll-content p:after{
    content: '\200c'
}
<div class="bg-container">
  <div class="gradient-background">
    &nbsp;
  </div>
</div>
<div class="scroll-content">
  <p> abc 1 </p>
  <p> abc 2 </p>
  <p> abc 3 </p>
  <p> abc 4 </p>
  <p> abc 5 </p>
  <p> abc 6 </p>
  <p> abc 7 </p>
  <p> abc 8 </p>
  <p> abc 9 </p>
  <p> abc 10 </p>
  <p> abc 11 </p>
  <p> abc 12 </p>
  <p> abc 13 </p>
  <p> abc 14 </p>
  <p> abc 15 </p>
  <p> abc 16 </p>
  <p> abc 17 </p>
  <p> abc 18 </p>
  <p> abc 19 </p>
</div>

* edit 1: Изменен мой пример сниппета.Фоновый градиент - это не просто прямоугольник.Это немного наклонено, и это делает его таким трудным.Таким образом, текст становится двухцветным на границе.

* для ясности отредактируйте 2: я хочу, чтобы текст был черным (сплошной цвет # 000), когда он находится над белым фоном, и белым (сплошной цвет #FFF), когдаэто по градиенту / изображению.Мой контент - это текст с возможностью прокрутки, как в примере кода.

* edit 3: iOS Safari несовместим, если вы не сделаете следующий хак.Добавьте пробел нулевой ширины &#8203 ; для каждого текстового элемента, чтобы он работал.Это можно легко сделать с помощью свойства CSS, как я показываю, добавленного в разметку CSS.

Ответы [ 3 ]

0 голосов
/ 23 февраля 2019

Вы можете сделать это с помощью некоторого JavaScript: 

$(document).ready(function() {
  $(window).scroll(function() {
    var bgHeight = $('.bg-container').height();
    var scroll = $(window).scrollTop();
    $('.scroll-content p').each((i, el) => {
      var pPos = $(el).offset().top;
      var pHeight = $(el).height();

      if (pPos < (scroll - pHeight + bgHeight)) {
        $(el).removeClass('black');
        $(el).addClass('white');
      } else {
        $(el).addClass('black');
        $(el).removeClass('white');
      }
    });
  })
})
.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-image: linear-gradient(to bottom, rgb(1, 55, 124) 15%, rgb(81, 155, 244));
}

.scroll-content {
  position: relative;
  z-index: 99999;
  font-family: neuzeit-grotesk, sans-serif;
  font-weight: 700;
}

.white {
  color: #fff;
}

.black {
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-container">
  <div class="gradient-background">
    &nbsp;
  </div>
</div>
<br/><br/><br/><br/><br/><br/>
<div class="scroll-content menu_black">
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
  <p>asdf</p>
</div>
0 голосов
/ 23 февраля 2019

Вы можете использовать градиент для окраски текста.Хитрость заключается в том, чтобы этот градиент был похож на вашу форму (такая же степень и изменение окраски на краю фигуры).Поскольку ваш перекошенный элемент исправлен, необходимо также установить градиент, чтобы создать эффект magic прокрутки текста: 

.gradient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
  transform: skewY(-15deg);
  transform-origin:left;
}

.scroll-content {
  position: absolute;
  top: 50px;
  /* 165deg = 180deg - 15deg   */
  background: linear-gradient(165deg, #fff 195px,#000 195px) fixed;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
<div class="gradient-background">
</div>
<div class="scroll-content">
  <p> abc 1 </p>
  <p> abc 2 </p>
  <p> abc 3 </p>
  <p> abc 4 </p>
  <p> abc 5 </p>
  <p> abc 6 </p>
  <p> abc 7 </p>
  <p> abc 8 </p>
  <p> abc 9 </p>
  <p> abc 10 </p>
  <p> abc 11 </p>
  <p> abc 12 </p>
  <p> abc 13 </p>
  <p> abc 14 </p>
  <p> abc 15 </p>
  <p> abc 16 </p>
  <p> abc 17 </p>
  <p> abc 18 </p>
  <p> abc 19 </p>
</div>
0 голосов
/ 23 февраля 2019

Вы можете измерять с помощью JavaScript и применять стили к тегам, попадающим в нужный вам диапазон, но вы также можете сделать что-то очень простое, чтобы сделать текст читабельным (это относится к «другому трюку, который я могу сделать»): 

.scroll-content {
  text-shadow: 0 0 3px white;
}

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

Даже с реализацией JavaScript вы могли бы рассмотреть это для прогрессивного улучшения (для пользователей без JS).

...