How to responsively position images diagonally (react) - css

Question

I originally created a diagonal slider using the viewport width and height to determine where each box/image needed to be both on the x and y axis. However, when I started implementing animations the performance started to suffer. This is due to the window size being a dependency of a useEffect.
I am curious to know if there may be a better approach to spacing out the items diagonally that doesn't cause a re-render when the browser window resizes. Would grid or possibly flexbox be a better route or possibly something else. I've linked my sandbox below.
Sandbox: https://codesandbox.io/s/relaxed-butterfly-zot2xe?file=/components/Images.js
Animated Sandbox: https://codesandbox.io/s/mystifying-spence-m52t2p?file=/components/Images.js

Answer 1

This is a matter of slope. Slope is the incline of a line, which is being conducted by 2 points (a line segment, rather).
Now, the first thing that I see in your question is:
responsively
Usually when we are dealing with responsive stuff we use percentages, because they automatically adjust on resizes etc. So we know that m = rise/run, m being slope. Let's say you wanted your slope to be -2, for example.
Your coordinates would be (starting at [0, 0]):
[0, 0]
[2, 1]
[4, 2]
[6, 3]
[8, 4]
NOTE: I DID NOT USE NEGATIVES BECAUSE [0, 0] IS ON THE TOP LEFT, THERE ARE NO NEGATIVES.

Answer 2

You can get CSS to do much of the work for you by placing the items in a grid and rotating that diagonally.
A continuous flow of items can be obtained by having two copies and transforming the slider just 50% of its length rather than the full 100%.
A bit of JavaScript is needed initially to work out what angle the slider should be at - this depends on the height and width of the viewport.
This snippet recalculates the angle on a reload or a resize. After that JS is not involved and the system should be able to optimise the use of processor power, for example by leaving the transformation to a GPU.
function init() {
const container = document.querySelector('.container');
const items = document.querySelectorAll('.item');
const w = window.getComputedStyle(container).width.replace('px', '') / 2;
const h = window.getComputedStyle(container).height.replace('px', '');
const rad = Math.atan(h / w);
container.style.setProperty('--rad', -rad + 'rad');
container.style.setProperty('--cols', items.length);
}
window.onload = init;
window.onresize = init;
* {
margin: 0;
overflow: hidden;
}
.container {
transform-origin: center center;
transform: translateY(calc(50vh)) rotate(var(--rad));
transform-origin: 0 50%;
overflow: hidden;
width: 200vmax;
height: 100vh;
position: relative;
display: flex;
align-items: center;
}
.slider {
grid-template-columns: repeat(var(--cols), 1fr);
display: grid;
animation: move 20s linear infinite;
width: 100%;
overflow: hidden;
position: relative;
}
#keyframes move {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0);
}
}
.item {
width: 100%;
aspect-ratio: 1 / 1;
background-size: 50% auto;
background-repeat: no-repeat;
background-position: center center;
transform: rotate(calc(-1 * var(--rad)));
}
<div class="container">
<div class="slider">
<div class="item" style="background-image: url(https://picsum.photos/id/1015/300/300);">
</div>
<div class="item" style="background-image: url(https://picsum.photos/id/1016/300/300);">
</div>
<div class="item" style="background-image: url(https://picsum.photos/id/1018/300/300);">
</div>
<!-- second copy of the items -->
<div class="item" style="background-image: url(https://picsum.photos/id/1015/300/300);">
</div>
<div class="item" style="background-image: url(https://picsum.photos/id/1016/300/300);">
</div>
<div class="item" style="background-image: url(https://picsum.photos/id/1018/300/300);">
</div>
</div>
</div>