I’m having trouble with
Repeater layering custom order (Wix has no z-index)
Working in
Wix Editor, Dev Mode
What I’m trying to do
Simple 3D gallery in Velo using repeater (without custom code)
What I’ve tried so far
I used the code below and can get a 3D gallery-ish effect. Problem is the layering of the containers. The layering is per repeater _Id order 1-5. How can I customize the layer to perfect the effect?
The container being selected is OK. It is the ones further away that has a layering issue.
For example: When selecting Container 1, Container 2 should be higher than Container 3
function coverFlow() {
$w('#coverFlow').data = [
{
"_id": "1",
"text": "text1"
},
{
"_id": "2",
"text": "text2"
},
{
"_id": "3",
"text": "text3"
},
{
"_id": "4",
"text": "text4"
},
{
"_id": "5",
"text": "text5"
}
]
const defaultIndex = 2;
let repeaterItems = [];
$w('#coverFlow').onItemReady(($item, itemData, index) => {
$item("#flowText").text = itemData.text;
const container = $item("#flowContainer");
repeaterItems[index] = container;
// Initial scaling setup
applyCoverflowScaling(defaultIndex);
container.onMouseIn(() => {
applyCoverflowScaling(index);
});
container.onMouseOut(() => {
applyCoverflowScaling(defaultIndex);
});
});
function applyCoverflowScaling(paramIndex) {
const scaleCenter = 1.4;
const scaleAdjacent = 1.3;
const scaleOuter = 1.0;
const playTime = 10; // milliseconds
repeaterItems.forEach((item, i) => {
let scale = scaleOuter;
if (i === paramIndex) {
scale = scaleCenter;
} else if (Math.abs(i - paramIndex) === 1) {
scale = scaleAdjacent;
}
timeline().add(item, { scale, duration: playTime, easing: "easeOutBack" }).play();
});
}
}
