как сделать маску? [закрыт]

160
19 мая 2019, 21:30

Как сделать такую маску, что-бы можно было правый квадрат центрировать как сверху так и снизу (то есть что-бы можно было привязать паралакс)?

пример: recordit.co/EYQFhRIBlD

Answer 1

Вижу, что стартовые условия меняются на ходу.

var oMoveBlock = document.querySelector('.block_move'); 
var nBlockCoord, polygon, y = 0; 
 
function onMoveBlock(e) { 
  nBlockCoord = y + e.movementY; 
  if (nBlockCoord < -160) { nBlockCoord = -160; } 
  if (nBlockCoord > 200) { nBlockCoord = 200; } 
  y = nBlockCoord; 
  polygon = `polygon( 
    330px ${y + 160}px,  
    520px ${y + 160}px,  
    575px ${y + 195}px,  
    575px ${y + 400}px,  
    385px ${y + 400}px,  
    330px ${y + 365}px 
    )`; 
  oMoveBlock.style['-webkit-clip-path'] = polygon; 
  oMoveBlock.style['clip-path'] = polygon; 
}; 
 
function onBlockMouseup() { 
  document.removeEventListener('mousemove', onMoveBlock); 
  document.removeEventListener('mouseup', onBlockMouseup); 
}; 
oMoveBlock.addEventListener('mousedown', function() { 
  this.addEventListener('dragstart', function(e) { 
    e.preventDefault(); 
  }); 
  document.addEventListener('mousemove', onMoveBlock); 
  document.addEventListener('mouseup', onBlockMouseup); 
});
* { margin: 0; padding: 0; box-sizing: border-box; } 
 
html, body, .block_back, .block_move { height: 100%; width: 100%; left: 0; top: 0; } 
 
body { background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#0e1634; background-size:16px 16px; } 
 
.block_back { 
  background: url('//picsum.photos/610/496?image=133') 0 0 no-repeat; 
  background-size: auto; 
  -webkit-clip-path: polygon(40px 35px, 355px 35px, 450px 90px, 450px 441px, 135px 440px, 40px 385px); 
  clip-path: polygon(40px 35px, 355px 35px, 450px 90px, 450px 441px, 135px 440px, 40px 385px); 
} 
 
.block_move { 
  position: absolute; 
  z-index: 1; 
  background: url('//picsum.photos/610/496?image=133') 0 0 no-repeat; 
  background-size: auto; 
  -webkit-filter: grayscale(15%) contrast(20%) brightness(1.8); 
  filter: grayscale(15%) contrast(20%) brightness(1.8); 
  -webkit-clip-path: polygon(330px 160px, 520px 160px, 575px 195px, 575px 400px, 385px 400px, 330px 365px); 
  clip-path: polygon(330px 160px, 520px 160px, 575px 195px, 575px 400px, 385px 400px, 330px 365px); 
}
<div class="block_back"></div> 
<div class="block_move"></div>

READ ALSO
Не могу навесить Ripple Effect

Не могу навесить Ripple Effect

недавно начал изучать ReactJS(новичек) и столкнулся с маленькой проблемкой

145
NuxtJS &amp; WordPress

NuxtJS & WordPress

Существует вопрос, каким образом можно реализовать совместимость WordPress и NuxtJS? Может быть статейки какие-то или видео на youtube? Может у кого-то...

140
не работает код из документации. почему?

не работает код из документации. почему?

Код, приведенный ниже, взят из доков, но в ответе приходит пустая строка:

148
Конвертация CSV в XLSX с помощью node.js

Конвертация CSV в XLSX с помощью node.js

Конвертирую CSV в XLSX на nodejs с помощью библиотеки ExcelJS (украдено отсюда: https://www

171