How to continue the div on the other hand, if it went beyond the parent block?

On jquery, javascript is not important.

That way as an example. I need that if the block goes beyond the limits, then the part that went beyond the limits appears on the other side at the same height. I think I explained it clearly.

  • character by character or half symbol - Alex
  • For example, a 10px square. If any part of this square goes beyond the limits of the screen, or parent unit, then this part will be displayed on the other side. The principle of the game 'snake'. - Alex

1 answer 1

Like for example using only css.

For the string:

 * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; } [data-string] { position: absolute; top: 0; left: 95vw; /* Меняем положение основной строки */ white-space: nowrap; /* Запрещаем перенос строки */ } [data-string]:after { content: attr(data-string); position: absolute; top: 0; left: -100vw; } .string { position: relative; background: #ccc; padding: 1rem 0; overflow: hidden; height: 3rem; } 
 <div class="string"> <p data-string="Lorem ipsum.">Lorem ipsum.</p> </div>

For the figure:

 * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; } .box { display: block; width: 100px; /* Ширина блока */ height: 100px; /* Высота блока */ background: orangered; position: absolute; top: 0rem; left: 0; left: 85vw; /* Меняем положение основной строки */ } .box:after { content: ''; width: inherit; height: inherit; background: orangered; position: absolute; top: 0; left: -100vw; } .string { position: relative; background: #ccc; overflow: hidden; height: 100px; } 
 <div class="string"> <div class="box"></div> </div>

Animated figure:

 * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; } .box { display: block; width: 100px; /* Ширина блока */ height: 100px; /* Высота блока */ background: orangered; position: absolute; top: 0rem; left: 0; animation: go 5s linear infinite; /* Для движения в другую сторону */ /*animation: go 5s linear infinite reverse; */ } .box:after { content: ''; width: inherit; height: inherit; background: inherit; position: absolute; top: 0rem; left: -100vw; } .string { position: relative; background: #ccc;0 overflow: hidden; height: 100px; } @keyframes go { from { left: 0vw; } to { left: 100vw; } } 
 <div class="string"> <div class="box"></div> </div>

  • The principle of operation is correct, but you need to do this with figures. For example, a 10px square. If any part of this square goes beyond the limits of the screen, or parent unit, then this part will be displayed on the other side. The principle of the game 'snake'. - Alex
  • @Alex, added a variant for the figure - HamSter
  • @Elena, so the example got in the way ... Or was it so terrible? (you can not respond to comments, just thinking out loud ...) - Air
  • one
    And using other people's laurels is not in my rules ... It’s just that the logic of my behavior was based on the fact that I often meet questions in the comments from newbies, а как сделать шо-бы в обратную сторону и шо-бы блок по высоте был меньше ))) My answer would have looked like plagiarism .... And it’s not my rules to be offended by girls ... Anyway, to be offended ...))) - Air
  • one
    @Elena These are suggestions for improvement for you or other participants, it does not at all pull on a separate answer. - Vadim Ovchinnikov