<main>
<section>
<div class="container">
<div class="container-inner"></div>
<div class="viewport">
<div class="horizontal-object">
<div class="horizontal-card"></div>
<div class="horizontal-card"></div>
<div class="horizontal-card"></div>
<div class="horizontal-card"></div>
<div class="horizontal-card"></div>
</div>
</div>
</div>
</section>
</main>
@keyframes scrolldown {
from {
transform: translateY(0px);
}
to {
transform: translateY(-300px);
}
}
@keyframes horizontalTransform {
from {
transform: translateX(0px);
}
to {
transform: translateX(-300px);
}
}
body {
overflow: hidden;
}
main {
height: 100vh;
overflow: hidden;
}
section {
overflow-x: hidden;
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: 100%;
}
.container {
position: relative;
width: 300px;
height: 500px;
margin-top: 176px;
/* border: 1px solid green; */
}
.viewport {
position: absolute;
top: 0;
width: 100%;
height: 200px;
border: 1px solid blue;
transition: top 0.5s;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
.container-inner {
position: absolute;
border: 1px solid green;
width: 100%;
height: 500px;
animation: scrolldown 2s ease-in-out;
animation-direction: alternate;
animation-iteration-count: infinite;
}
.horizontal-object {
position: relative;
width: 200%;
height: 100px;
border: 1px solid red;
animation: horizontalTransform 2s ease-in-out;
animation-direction: alternate;
animation-iteration-count: infinite;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.horizontal-card {
height: 80%;
width: 125px;
background: red;
margin: 0 16px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.