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

248

02 марта 2018, 14:54

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

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

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

Answer 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; 
}

<div class="string"> 
  <p data-string="Lorem ipsum.">Lorem ipsum.</p> 
</div>

Для фигуры:

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

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

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

mysqli_real_escape_string неправильно экранирует

вот строка которую передаю в real escape string

218

MySQL

Как написать запрос с «USE INDEX (artist_2)» используя kohana 3 orm?

Есть такой код

252

MySQL

Ошибка при использовании транзакций

Необходимо очистить данные в двух связанных таблицах

275

MySQL

Не могу подключиться ко второй базе данных Laravel

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

238