Продолжение блока с другой стороны

#javascript #html #jquery #css

Как продолжить div с другой стороны, если он вышел за пределы родительского блока? 

На jquery, javascript - не важно. 



Этак как пример. Мне нужно, чтобы если блок выходит за пределы, то та часть, которая
вышла за пределы, появилась на другой сторон на одной высоте.
Думаю я объяснил понятно. 
    

Ответы

Ответ 1

Как например с помощью одного лишь css.

Для строки:



* {
  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;
}

  
Lorem ipsum.





Для фигуры:



* {
  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;
}

  






Фигура с анимацией:



* {
  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; }
}