Как сделать такую маску, что-бы можно было правый квадрат центрировать как сверху так и снизу (то есть что-бы можно было привязать паралакс)?
пример: recordit.co/EYQFhRIBlD
Вижу, что стартовые условия меняются на ходу.
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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
недавно начал изучать ReactJS(новичек) и столкнулся с маленькой проблемкой
Существует вопрос, каким образом можно реализовать совместимость WordPress и NuxtJS? Может быть статейки какие-то или видео на youtube? Может у кого-то...
Код, приведенный ниже, взят из доков, но в ответе приходит пустая строка:
Конвертирую CSV в XLSX на nodejs с помощью библиотеки ExcelJS (украдено отсюда: https://www