I am in the process of creating a logo wall for a website. I successfully managed to display them randomly using a map, but now I want to make them appear one by one in a random order (for example: image 1, image 6, image 3, ...) and keep them visible once they have appeared.
My current approach involves setting their opacity to 0 and then changing it to 1, but I'm struggling to implement this in a random manner.
Any suggestions or help would be greatly appreciated.
EDIT:
Below is the code snippet I am working with:
import React from "react"
const logoImages = [
// List of logo images
];
function shuffleMap(array) {
// Shuffle array elements
}
const Image = ({ image, src }) => {
return (
<div className='box'>
<div className='content'>
<img src={image} alt={src}/>
</div>
{/* CSS Styles */}
<style jsx>{`
.box {
min-width: 150px;
height: 200px;
overflow: hidden;
display: flex;
align-items: center;
background: #000;
}
img {
width: 120px;
filter: grayscale(1) invert(100%);
}
`}</style>
</div>
)
}
const allImages = shuffleMap(logoImages.map((companies, index) => {
return <Image key={companies.src + index} {...companies}/>
}));
const LogoWall = () => {
return (
<div className='container'>
{
allImages
}
{/* CSS Styles */}
<style>{`
.container {
width: 100vw;
height: auto;
display: flex;
justify-content: space-evenly;
align-content: space-around;
flex-flow: row wrap;
}
`}</style>
</div>
)
};
export default LogoWall