How to make such a mask, so that the right square could be centered both from above and below (i.e., that it would be possible to tie parallax)?

example: recordit.co/EYQFhRIBlD

enter image description here

Closed due to the fact that the essence of the issue is incomprehensible by the participants Enikeyschik , 0xdb , aleksandr barakin , Air , Jarvis_J Nov 29 '18 at 18:15 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • one
    Set tasks clearer and immediately. In what range is the offset possible? CSS or SVG? Will these blocks be empty or will they contain text? Why do ticks need to pull everything out? Can someone come in handy for a starting point - ru.stackoverflow.com/a/885462/265406 - UModeL
  • in short - recordit.co/EYQFhRIBlD - Artem
  • This question in the form of a picture should be closed, because it is useless for the knowledge base (the one who has a similar question will not be able to find this question and answers to it) - aleksandr barakin
  • @UModeL, no need to set tasks for anyone here, this is not a free FPILAN CLUB , we are sharing experiences and helping each other, and not doing work for others ... - Air
  • @Air well, I do it firstly for myself, just practice in my free time. Now, they will close the question now, and this is not something that will help others, but even this person. The four welders noted with alarm, but they could have corrected the person or made the edits themselves. Here's how to ask a question? Describe the mask in the title? - UModeL

1 answer 1

I see that the starting conditions change on the go.

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>

  • 2
    Thank you very much for your help - Artem