<div class="container">
<div>
<div class="game">
<div class="mario"></div>
<div class="coin"></div>
</div>
</div>
</div>
.container {
max-width: 400px;
height: 250px;
margin: auto;
border: 5px solid;
overflow: auto;
scrollbar-width: none;
}
.container > div {
width: 200%;
height: 200%;
}
.game {
max-width: 300px;
height: 200px;
position: sticky;
top: 10px;
left: 40px;
border: 5px solid;
background: #6185f8;
}
.mario {
width: 60px;
aspect-ratio: 1;
position: relative;
top: 0%;
left: 0%;
z-index: 1;
background: url(https://assets.codepen.io/1480814/mm.png) center/cover;
animation: x linear,y linear;
animation-timeline: scroll(nearest inline),scroll(nearest block);
}
@keyframes x{to {left: calc(100% - 60px)}}
@keyframes y{to {top: calc(100% - 60px)}}
.coin {
position: absolute;
inset: 0;
animation: c-x linear,c-y linear;
animation-timeline: scroll(nearest inline),scroll(nearest block);
container-name: c;
}
@keyframes c-x {
0% ,44% {--c-x: 0}
45%,55% {--c-x: 1}
56%,100% {--c-x: 0}
}
@keyframes c-y {
0% ,44% {--c-y: 0}
45%,55% {--c-y: 1}
56%,100% {--c-y: 0}
}
.coin:before {
content: "";
position: absolute;
width: 50px;
left: calc(50% - 25px);
top: calc(50% - 25px);
aspect-ratio: 1;
background: url(https://assets.codepen.io/1480814/ccc.png) 0 50%/600% auto no-repeat;
}
@container c style(--c-x: 1) and style(--c-y: 1) {
.coin:before {
background-color: red;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.