I have created the below animation that contains 3 side by side text columns (newspaper style) continuously scrolling up and a separate div element with some text appearing later in the center of the page. Currently my div element is placed on top and the text is scrolling behind it. I was wondering if there is a way to make the text wrap around the div element once it appears, similar to the attached image?
:root {
--color-red: #E3120B;
--color-beige: #F5F4EF;
--color-grey: #1A1A1A;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
box-sizing: border-box;
background-color: var(--color-beige);
}
.scroll-container {
height: 80%;
width: 70%;
overflow: hidden;
position: relative;
font-family: 'Inconsolata', monospace;
color: var(--color-grey);
font-size: 10pt;
line-height: 15pt;
display: flex;
justify-content: space-between;
padding: 0px 10px;
background-color: var(--color-beige);
}
.center-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 20%;
background-color: white;
font-size: 32px;
opacity: 0;
animation: fadeIn 2s forwards;
animation-delay: 5s;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
.scroll-column {
width: 33%;
overflow: hidden;
position: relative;
margin: 0px 10px;
}
.scroll-text {
width: 100%;
position: absolute;
top: 0;
text-align: justify;
padding-top: 10px;
transform: translateY(100%);
animation: scroll 4s linear infinite;
z-index: 0;
}
.scroll-text-2 {
animation-delay: 2s;
transform: translateY(100%);
}
@keyframes scroll {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="scroll-container">
<div class="center-box">Some text</div>
<div class="scroll-column">
<div class="scroll-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ex nec nisi congue, eu commodo eros finibus. Sed consectetur, ipsum nec posuere sagittis, dolor risus venenatis ipsum, et feugiat massa nibh eu erat. Maecenas pharetra ullamcorper
massa, dapibus lobortis justo congue vel. Etiam sagittis egestas ex vel finibus. Mauris bibendum tellus risus, at fermentum nisi feugiat sed. Suspendisse at nunc quis magna pulvinar sollicitudin. Fusce vestibulum venenatis felis, in imperdiet diam
porttitor ac. Vestibulum eu enim neque. Suspendisse potenti. Mauris maximus scelerisque tellus sed placerat. Maecenas fringilla nisi a metus eleifend, ac lobortis quam sollicitudin. Nulla molestie fringilla metus quis tristique. In fringilla fringilla
ante quis porta. Nunc sed elit accumsan, blandit massa vel, fringilla mi. Mauris venenatis mauris tristique diam pharetra, a efficitur nulla mattis. Aenean ut ornare est, eu congue turpis. Quisque sit amet sapien at urna pretium imperdiet. Nam dignissim
eros sit amet nulla semper, non scelerisque elit dapibus. Praesent consequat nibh a laoreet lobortis. Donec diam orci, volutpat non urna vitae, eleifend blandit leo. Aliquam interdum nec turpis vitae fringilla. In hac habitasse platea dictumst.
Donec faucibus tincidunt tellus, vitae egestas sapien interdum eget. Pellentesque semper sagittis pharetra. Duis ornare sollicitudin ligula dictum sagittis. Praesent luctus iaculis est, eu bibendum sem egestas porttitor. Morbi non pretium tellus.
Cras in libero vel lectus tempus tincidunt eu sed lorem. Pellentesque consequat ullamcorper arcu, efficitur commodo erat ultricies eu. Nunc viverra pharetra augue, et pellentesque lacus accumsan sed.
</div>
<div class="scroll-text scroll-text-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ex nec nisi congue, eu commodo eros finibus. Sed consectetur, ipsum nec posuere sagittis, dolor risus venenatis ipsum, et feugiat massa nibh eu erat. Maecenas pharetra ullamcorper
massa, dapibus lobortis justo congue vel. Etiam sagittis egestas ex vel finibus. Mauris bibendum tellus risus, at fermentum nisi feugiat sed. Suspendisse at nunc quis magna pulvinar sollicitudin. Fusce vestibulum venenatis felis, in imperdiet diam
porttitor ac. Vestibulum eu enim neque. Suspendisse potenti. Mauris maximus scelerisque tellus sed placerat. Maecenas fringilla nisi a metus eleifend, ac lobortis quam sollicitudin. Nulla molestie fringilla metus quis tristique. In fringilla fringilla
ante quis porta. Nunc sed elit accumsan, blandit massa vel, fringilla mi. Mauris venenatis mauris tristique diam pharetra, a efficitur nulla mattis. Aenean ut ornare est, eu congue turpis. Quisque sit amet sapien at urna pretium imperdiet. Nam dignissim
eros sit amet nulla semper, non scelerisque elit dapibus. Praesent consequat nibh a laoreet lobortis. Donec diam orci, volutpat non urna vitae, eleifend blandit leo. Aliquam interdum nec turpis vitae fringilla. In hac habitasse platea dictumst.
Donec faucibus tincidunt tellus, vitae egestas sapien interdum eget. Pellentesque semper sagittis pharetra. Duis ornare sollicitudin ligula dictum sagittis. Praesent luctus iaculis est, eu bibendum sem egestas porttitor. Morbi non pretium tellus.
Cras in libero vel lectus tempus tincidunt eu sed lorem. Pellentesque consequat ullamcorper arcu, efficitur commodo erat ultricies eu. Nunc viverra pharetra augue, et pellentesque lacus accumsan sed.
</div>
</div>
<div class="scroll-column">
<div class="scroll-text">
Fusce a egestas sapien. Vivamus in blandit mi, a facilisis nisl. Integer convallis nec risus eu posuere. Vivamus eros lacus, eleifend vitae nunc eget, rhoncus ultricies ex. In tristique ut arcu quis sollicitudin. Mauris lacinia in nisi cursus molestie.
Donec mollis a ex ac dictum. Mauris malesuada mi nec justo auctor, quis pretium mi auctor. Maecenas nunc odio, commodo nec lobortis non, consectetur sit amet elit.Quisque condimentum lacinia nunc id elementum. Cras at sem arcu. Pellentesque posuere
non dolor ac gravida. Duis tincidunt turpis nisl, vel consequat felis tempor sagittis. Aliquam justo massa, lacinia eu mi eget, convallis porttitor ipsum. Duis id orci rhoncus, elementum felis at, rutrum quam. Suspendisse at nisl massa. Nulla nisi
tortor, porttitor non aliquam non, iaculis ut arcu. Integer purus lacus, tincidunt sit amet congue id, consequat sed odio. Nullam interdum auctor est sit amet laoreet. Suspendisse nec fermentum dolor, ut bibendum magna. Mauris pretium rutrum velit,
vel blandit quam euismod et.
</div>
<div class="scroll-text scroll-text-2">
Fusce a egestas sapien. Vivamus in blandit mi, a facilisis nisl. Integer convallis nec risus eu posuere. Vivamus eros lacus, eleifend vitae nunc eget, rhoncus ultricies ex. In tristique ut arcu quis sollicitudin. Mauris lacinia in nisi cursus molestie.
Donec mollis a ex ac dictum. Mauris malesuada mi nec justo auctor, quis pretium mi auctor. Maecenas nunc odio, commodo nec lobortis non, consectetur sit amet elit. Quisque condimentum lacinia nunc id elementum. Cras at sem arcu. Pellentesque posuere
non dolor ac gravida. Duis tincidunt turpis nisl, vel consequat felis tempor sagittis. Aliquam justo massa, lacinia eu mi eget, convallis porttitor ipsum. Duis id orci rhoncus, elementum felis at, rutrum quam. Suspendisse at nisl massa. Nulla nisi
tortor, porttitor non aliquam non, iaculis ut arcu. Integer purus lacus, tincidunt sit amet congue id, consequat sed odio. Nullam interdum auctor est sit amet laoreet. Suspendisse nec fermentum dolor, ut bibendum magna. Mauris pretium rutrum velit,
vel blandit quam euismod et.
</div>
</div>
<div class="scroll-column">
<div class="scroll-text">
Aenean mollis lectus eu magna elementum efficitur. Phasellus ut nunc nec dui mollis dictum non in sapien. Nulla a euismod velit. Pellentesque placerat nisl lectus, eget pretium risus vestibulum venenatis. Donec ipsum ipsum, dignissim id justo nec, aliquam
sagittis turpis. Cras vehicula sed arcu non ultricies. Donec ante felis, scelerisque finibus lectus vitae, porttitor scelerisque justo. Sed volutpat viverra lacus, quis scelerisque eros vehicula at. Nam posuere elit non dui placerat, ac tempus nunc
imperdiet. Aenean et commodo enim, et gravida orci. Aenean quis eros vel nibh efficitur iaculis. Quisque iaculis bibendum efficitur. Donec sed odio quis lectus dignissim faucibus. Integer consequat aliquam aliquet. Suspendisse a enim ullamcorper,
convallis odio vel, feugiat enim. Mauris lectus mi, elementum ac fringilla vulputate, consectetur ut ante. Vestibulum a pharetra augue. Sed dignissim, enim ac euismod rutrum, leo lectus dapibus orci, non ultrices leo lorem et lectus. Duis eu massa
vitae ex vehicula consectetur. Curabitur nisi dui, ultrices id viverra id, pretium ac augue. Maecenas ac velit pellentesque, condimentum felis lobortis, venenatis velit. Phasellus facilisis felis enim, eget interdum dui tincidunt quis.
</div>
<div class="scroll-text scroll-text-2">
Aenean mollis lectus eu magna elementum efficitur. Phasellus ut nunc nec dui mollis dictum non in sapien. Nulla a euismod velit. Pellentesque placerat nisl lectus, eget pretium risus vestibulum venenatis. Donec ipsum ipsum, dignissim id justo nec, aliquam
sagittis turpis. Cras vehicula sed arcu non ultricies. Donec ante felis, scelerisque finibus lectus vitae, porttitor scelerisque justo. Sed volutpat viverra lacus, quis scelerisque eros vehicula at. Nam posuere elit non dui placerat, ac tempus nunc
imperdiet. Aenean et commodo enim, et gravida orci. Aenean quis eros vel nibh efficitur iaculis. Quisque iaculis bibendum efficitur. Donec sed odio quis lectus dignissim faucibus. Integer consequat aliquam aliquet. Suspendisse a enim ullamcorper,
convallis odio vel, feugiat enim. Mauris lectus mi, elementum ac fringilla vulputate, consectetur ut ante. Vestibulum a pharetra augue. Sed dignissim, enim ac euismod rutrum, leo lectus dapibus orci, non ultrices leo lorem et lectus. Duis eu massa
vitae ex vehicula consectetur. Curabitur nisi dui, ultrices id viverra id, pretium ac augue. Maecenas ac velit pellentesque, condimentum felis lobortis, venenatis velit. Phasellus facilisis felis enim, eget interdum dui tincidunt quis.
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>