CSS: проблемы совместимости браузера с использованием background-clip: text и linear-gradient

Я пытаюсь создать эффект выцветшего текста при прокрутке, где текст вверху и внизу элемента прозрачен, но текст в центре остается полностью непрозрачным. Также есть бесконечная прокрутка текста по фоновому видео. Поскольку объяснить эффект непросто, вот демонстрация эффекта, работающего пока только в Chrome:

Рабочая демонстрация: http://dboxcg.dev.dbox.com/portfolio

Он работает на Chrome (v81.0.4), но ломается в firefox, safari и всех мобильных браузерах.

Вот код для демонстрации выше:

.container {
  background:linear-gradient(rgba(255,255,255,0) 10%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-attachment: fixed;
}

.video-background {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -1;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<div class="container">
  <ul>
     <li><a href="/portfolio/108_leonard">108 LEONARD</a></li>
     <li><a href="/portfolio/20_grosvenor_square">20 GROSVENOR SQUARE</a></li>
     <li><a href="/portfolio/25_park_row">25 PARK ROW</a></li>
     <li><a href="/portfolio/432_park_avenue">432 PARK AVENUE</a></li>
     <li><a href="/portfolio/57_ocean">57 OCEAN</a></li>
     <li><a href="/portfolio/aerials">AERIALS</a></li>
     <li><a href="/portfolio/animations_films">ANIMATIONS / FILMS</a></li>
     <li><a href="/portfolio/bathrooms">BATHROOMS</a></li>
     <li><a href="/portfolio/bedrooms">BEDROOMS</a></li>
     <li><a href="/portfolio/human_models_in_cg">HUMAN MODELS IN CG</a></li>
     <li><a href="/portfolio/institutions">INSTITUTIONS</a></li>
  </ul>
  <div class="video-background">
    <video src="https://player.vimeo.com/external/111111.hd.mp4" style="width: 100%; height: 100%;" preload="auto" autoplay="" loop="" playsinline="" webkit-playsinline="" x5-playsinline=""></video>
  </div>
</div>

Мне удалось заставить вышеуказанное работать в Chrome с помощью ответов на этот вопрос: Затухание текста на изображении

mask-image выглядит как правильное свойство CSS, но в моем примере я столкнулся с проблемой бесконечной прокрутки текста.

Можно ли добиться подобного эффекта кроссбраузерности для этого эффекта?


html css linear-gradients css-mask
person Joel Hoelting    schedule 29.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот как это можно сделать с помощью маски. Уловка состоит в том, чтобы иметь два слоя. Один под текстом и такой же над текстом, к которому вы применяете маску.

Вот пример, в котором я использовал и изображение, но вы можете сделать это с видео, как в своем примере.

.box {
  padding:0 100px;
  font-size:50px;
  font-weight:bold;
  color:#fff;
}

html {
  min-height:100%;
  background:url(https://picsum.photos/id/1074/1000/1000) center/cover fixed;
}
html:before {
  content:"";
  position:fixed;
  z-index:99;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://picsum.photos/id/1074/1000/1000) center/cover fixed;
  -webkit-mask: linear-gradient(#fff,transparent 30% 70%,#fff);
          mask: linear-gradient(#fff,transparent 30% 70%,#fff);
}
<div class="box">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac venenatis enim. Suspendisse vestibulum mattis finibus. Ut velit metus, pulvinar id elementum nec, tempus et mi. Phasellus consequat mauris nisi, a iaculis nulla molestie eget. Praesent velit arcu, consectetur ac arcu ac, volutpat laoreet erat. Nulla eu est dui. Pellentesque ultricies finibus velit sit amet feugiat. Integer posuere mauris eu faucibus laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam in ullamcorper dui. Nunc fermentum scelerisque metus cursus tincidunt. Phasellus tortor justo, gravida eget mi sed, condimentum placerat neque. Vivamus fermentum quam a tincidunt placerat. Pellentesque quis dictum odio.
</div>

person Temani Afif    schedule 29.04.2020
comment
Спасибо за ответ, у меня все работает, используя фоновое изображение. Я попытаюсь реализовать это с помощью фонового видео, а затем вернусь. Очень признателен! - person Joel Hoelting; 29.04.2020