Collage of elements rising up (how do I do it) - vue.js

Question

Does anyone know how I can do this on my own site? (vuejs)
https://cdn.larkx.xyz/kv2bos6i.gif or https://sparkedhost.com

Answer 1

I am going to put Vuejs aside because this effect can be achieved with CSS only.
You can give a look at the source code of sparkedhost.com for a better understanding of how they implemented this effect, and here is an example of such effect without any embellishment:
.container {
width: 200px;
height: 200px;
background: lightgrey;
overflow: hidden;
}
.content {
width: 150px;
height: 80px;
background: red;
margin: 20px auto;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.scrolling {
position: relative;
animation-duration: 8s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slidein {
from {
top: 0;
}
to {
top: -500px;
}
}
<div class="container">
<div class="scrolling">
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
<!-- The same block of divs is repeated -->
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
</div>
</div>