3

Есть блок

<div id="block">
    <img src="image.jpg">
    <div class="background"></div>
</div>

<style>
   .background {
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       background: #000;
   }
</style>

Картинка перекрыта черным фоном. Можно ли сделать средствами canvas или svg такой эффект, чтобы при движении мышкой, по траектории движения удалялся черный фон? Либо может наоборот, прорисовывать изображение по траектории движения? Похожий пример есть здесь, но нужен с картинкой https://aeroidea.ru/

2
  • 2
    codepen.io/progrape/pen/XXBwWe
    – Deonis
    18 янв 2019 в 0:05
  • Deonis, спасибо большое! А если поверх canvas наложить div, можно как-нибудь сделать, чтобы он не блокировал данный эффект?
    – Victor
    18 янв 2019 в 16:53

1 ответ 1

1

Подобные эффекты можно достичь с помощью SVG clipping или SVG masking. Для понимания, подобные вещи лучше всего искать на css-tricks. Вот подходящая статья: https://css-tricks.com/masking-vs-clipping-use/

Примеры на практике лучше всего искать на codepen по тем же ключевым словам svg mask, svg clip. К примеру вот несколько: https://codepen.io/maoosi/pen/qNVZyG https://codepen.io/PointC/pen/KRWgOK/

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<rect width="100%" height="100%" fill="#E7E7E8"/>
<image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/a.svg" width="100%" height="100%" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<defs>
<clipPath id="mask">
<circle id="mask-circle" cx="50%" cy="50%" r="8%" style="fill: #ffffff"/>
</clipPath>
</defs>
<g clip-path="url(#mask)">
<rect width="100%" height="100%" fill="#272730"/>
<image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/b.svg" width="100%" height="100%" />
</g>
<circle id="circle-shadow" cx="50%" cy="50%" r="8%" style="stroke: #fff; fill: transparent; stroke-width: 5;" />
</svg>

По сути, clipping позволяет вам показывать только определённую часть картинки. Добавляем к этому фоновую картинку и логику перемещения за курсором на JS.

Ваш ответ

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

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