5

#container {
  position: relative;
  height: 300px;
  width: 400px;
  border: 1px solid black;
  background: url(https://www.firestock.ru/wp-content/uploads/2019/03/YArkiy-ryizhiy-kot-na-fone-siney-stenyi-Bright-red-cat-on-a-background-of-blue-wall-6072--4000-700x460.jpg)
}
#mask{
  position: absolute;
  border: 1px dashed lightblue;
  height: 300px;
  width: 900px;
  background: #87cefa24;
  left: -300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="mask"></div>
</div>

Имеется контейнер (#container) с фоновым изображением и вложенный, перемещающийся по оси x контейнер-маска (#mask) (большей ширины, нежели родительский контейнер). Каким способом я могу реализовать максимально кроссбраузерное решение следующей задачи: динамически заполнять маску либо полупрозрачным градиентом, либо изображением с альфа-каналом таким образом (только градиентные переходы прозрачности в разных конфигурациях), чтобы при перемещении маски сквозь нее «просвечивался» фон в соответствии с альфа-каналом маски? Соответственно, остальные участки изображения должны быть прозрачными. У меня есть один вариант, но хотелось бы увидеть другие решения, возможно более лаконичные и простые

2
  • Есть хорошее решение svg mask image, но оно не поддерживается ff
    – Alaksander
    10 июн 2019 в 9:55
  • всякие там фильтры и эффекты для картинок и видео можно реализовывать на webgl, что более менее кросс-браузерно =), да и svg должен справится 10 июн 2019 в 10:09

1 ответ 1

5

Вот вариант с svg и маской, отправлено и проверено в ff 66.0.3

введите сюда описание изображения

let d = [[100,100,70], [300,100,60], [500,100,50]]
         .map(d=>({x: d[0], y: d[1], r: d[2]}));
let mask = circles('mask').call(upd);
  
circles('g').style('fill','transparent')
  .style('cursor','pointer')
  .call(upd)
  .call(d3.drag().on("drag", function (d) {
    d3.select(this)
      .attr("cx", d.x = d3.event.x)
      .attr("cy", d.y = d3.event.y);
    mask.call(upd)  
  }));

function circles(selector) {
  return d3.select(selector)
           .selectAll('circle')
           .data(d)
           .enter()
           .append('circle')
}

function upd(selection) {
   selection.attr("cx", d => d.x)
            .attr("cy", d => d.y)
            .attr('r',  d => d.r)
            .attr('fill', 'url(#linear-gradient)');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg viewBox="0 0 600 600">
<defs>
  <filter id="blurfilter" width="110%" height="100%">
  	<feGaussianBlur stdDeviation="12" result="blur" />
  </filter>
  <linearGradient id="linear-gradient">
    <stop offset="0%" stop-color="#fff"/>
    <stop offset="100%" stop-color="#000"/>
  </linearGradient>
  <mask id="mask">
    <rect width="100%" height="100%" fill="#000"/>
  </mask>
</defs>

<image mask="url(#mask)" 
       x="-50%" y="-50%" height="200%" width="200%"
       xlink:href="https://i.imgur.com/cdqfoqZ.png" />
<g></g>
</svg>

2
  • Да к этому же и я пришел, хорошо оформленно! Единственное, что у меня не получилось в таком подходе реализовать — css transition при программном перемещении объектов (в данном случае, кругов) ну можно обойтись скриптами, спасибо еще раз за ответ и уделенное время
    – Alaksander
    10 июн 2019 в 11:36
  • @Alaksander рад помочь, для плавной анимации я так же чаще использую d3, чем css из за проблем которые возникают при попытках комбинирования анимации сделанных разными способами. js получается универсальнее 10 июн 2019 в 11:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.