Reputation: 107
I am currently creating a logo wall for a website. I managed with a map to display them randomly but now I would like to be able to make them appear one by one and randomly ( for example : image 1, image 6, image 3,...) and also leave them visible once they have appeared.
I guess I have to set their opacity to 0 and then make their opacity to 1 but I don't see how to do this in a random way.
Thanks for your help.
EDIT:
Here is my code:
import React from "react"
const logoImages = [
{
image: "/assets/img/companies/altiplan.png",
src: "Michelin",
},
{
image: "/assets/img/companies/ametis.png",
src: "Michelin",
},
{
image: "/assets/img/companies/amplitrain.png",
src: "Michelin",
},
{
image: "/assets/img/companies/ar.png",
src: "Michelin",
},
{
image: "/assets/img/companies/artau.png",
src: "Michelin",
},
{
image: "/assets/img/companies/assaabloy.png",
src: "Michelin",
},
{
image: "/assets/img/companies/bag.png",
src: "Michelin",
},
{
image: "/assets/img/companies/bea.png",
src: "Michelin",
},
{
image: "/assets/img/companies/besix.png",
src: "Michelin",
},
{
image: "/assets/img/companies/bombardier.png",
src: "Michelin",
},
{
image: "/assets/img/companies/bouygues.png",
src: "Michelin",
},
{
image: "/assets/img/companies/ca.png",
src: "Michelin",
},
{
image: "/assets/img/companies/cartel.png",
src: "Michelin",
},
{
image: "/assets/img/companies/citymall.png",
src: "Michelin",
},
{
image: "/assets/img/companies/coyote.png",
src: "Michelin",
},
];
function shuffleMap(array) {
let currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array
/*array.sort(() => Math.random() - 0.5)
return array*/
}
const Image = ({image, src}) => {
return (
<div className='box'>
<div className='content'>
<img src={image} alt={src}/>
</div>
{/*language=CSS*/}
<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
}
{/*language=CSS*/}
<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
Upvotes: 3
Views: 303
Reputation: 13703
Why don't you execute a interval after displaying your images
Code:
logoImages.forEach((x, i) => {
setTimeout(() => {
x.style.opacity = 1
}, i * 1000)
})
Upvotes: 1