Как получить переформатированный текст для динамически плавающего поля над контейнером, используя HTML/CSS и JavaScript? ⇐ Html

[Anonymous]

У меня есть анимация, в которой блок перемещается из верхнего левого угла контейнера в нижний правый (см. изображения ниже).
Перед запуском
После завершения
Как я могу переформатировать текст после каждой итерации рендеринга, чтобы блок анимации не перекрывал текст?
Я пробовал следующее:

• Чтобы перезаписывать текст итеративно, т. е. во время каждого перемещения блока, используя JS-DOM, чтобы он перезаписывал любую политику макета и перерисовывал ее правильно.
• Рассмотреть CSS float для animation_block. В отдельном примере, где блок должен плавать с правой стороны (в CSS установлено «float: left»), если я масштабирую (увеличиваю) блок и он увеличивается, основной текст автоматически переформатируется по мере возникновения проблемы, поскольку в макете не требуется связанная информация о позиционировании.

Пример взят из этого пример: https://www.w3schools.com/js/js_htmldom_animate.asp

Код: Выделить всё

function startAnimation() {
var block = document.getElementById("animation_block");
let offset = 0;

clearInterval(null);
var id = setInterval(frame, 5);

function frame() {
if (offset == 350) {
clearInterval(null);
} else {
offset++;
block.style.top = offset + "px";
block.style.left = offset + "px";
document.getElementById("animation_text").innerHTML = "THIS IS A NEW TEXT WITH DYNAMIC FLOATING BOX";
}
}
}

Код: Выделить всё

.animation_container {
width: 400px;
height: 400px;
position: relative;
background-color: lightgray;
}

.animation_block {
position: absolute;
width: 50px;
height: 50px;
background-color: pink;
top: 0px;
left: 0px;
}

.animation_text {
font-size: 16pt;
}

Код: Выделить всё

START ANIMATION



LOOT

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

Подробнее здесь: https://stackoverflow.com/questions/797 ... iner-using