Reputation: 1090
I want to create a gallery which the images get bigger in the middle.
The ammont of images are random.
With this code
, I could find the middle, but I dont know how to change the size
of the Images
ascendens and/or descendant.
var boxes = document.querySelectorAll(".box");
var middle = boxes[Math.round((boxes.length - 1) / 2)];
middle.style.width = "70px"
middle.style.height= "70px"
.container{
display:flex;
justify-content:center;
align-items:center;
}
.box{
width:50px;
height:50px;
background-color:black;
margin:10px;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Upvotes: 0
Views: 91
Reputation: 466
Same as the other answer except the size calculation is moved to CSS
const boxes = document.querySelectorAll(".box");
let middle = Math.floor((boxes.length - 1) / 2);
const reductionModifier = 4; //Reduces size diff, higher means less diff.
const marginModifier = -1; //-1 means margin will be -10px
boxes.forEach((e, i) => {
e.style.setProperty('--s', 1 - ((Math.abs(i - middle) / boxes.length) / reductionModifier));
e.style.setProperty('--m', i == middle ? 1 : marginModifier);
e.style.setProperty('--z', 1 - Math.abs(i - middle));
});
.container{
display:flex;
justify-content:center;
align-items:center;
}
.box {
border: 1px solid red;
width: calc(70px * var(--s));
height: calc(70px * var(--s));
background-color:black;
margin: calc(10px * var(--m));
z-index: calc(10 * var(--z));
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Upvotes: 1
Reputation: 201
something like this.. you can play with the number, depending on how much bigger or smaller you want them..
var boxes = document.querySelectorAll(".box");
var middle_index = Math.round((boxes.length - 1) / 2);
for ( var i=0; i<boxes.length; i++) {
boxes[i].style.width = `${70-Math.abs(boxes.length-i*2-1)*5}px`;
boxes[i].style.height = `${70-Math.abs(boxes.length-i*2-1)*5}px`;
}
.container{
display:flex;
justify-content:center;
align-items:center;
}
.box{
width:50px;
height:50px;
background-color:black;
margin:10px;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Upvotes: 2