I'm wanting to create a hover effect, with two columns that is responsive to a webpage being resized. I've found a previous forum, with an answer detailing the following code, but the code is too complex for my knowledge and I'm wondering if someone could assist / simplify it please.
export function column1_mouseIn(event, $w) {
$w("#column1").background.src = "https://static.wixstatic.com/media/139b4f_7ebaaadd28b44070a8466691b3d5cfcd~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_7ebaaadd28b44070a8466691b3d5cfcd~mv2.png";
$w("#box1").hide();
$w("#box2").show();
}
let flipOptions = {
"duration": 600,
"direction": "right"
};
export function column1_mouseOut(event, $w) {
$w("#column1").background.src = "https://static.wixstatic.com/media/139b4f_2f3f005dc86a427dabb7ac367172fb14~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_2f3f005dc86a427dabb7ac367172fb14~mv2.png";
$w("#box1").show("flip", flipOptions);
$w("#box2").hide();
}
export function column2_mouseIn(event, $w) {
$w("#column2").background.src = "https://static.wixstatic.com/media/139b4f_ca6b89996ef348dcb007cd40c64f9160~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_ca6b89996ef348dcb007cd40c64f9160~mv2.png";
$w("#box4").hide();
$w("#box3").show();
}
export function column2_mouseOut(event, $w) {
$w("#column2").background.src = "https://static.wixstatic.com/media/139b4f_0f3fb7fba22a494b8af401cdba706750~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_0f3fb7fba22a494b8af401cdba706750~mv2.png";
$w("#box4").show("flip", flipOptions);
$w("#box3").hide();
}
export function column3_mouseIn(event, $w) {
$w("#column3").background.src = "https://static.wixstatic.com/media/139b4f_11ed4d9ee4364c09b63606c54132fad7~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_11ed4d9ee4364c09b63606c54132fad7~mv2.png";
$w("#box6").hide();
$w("#box5").show();
}
export function column3_mouseOut(event, $w) {
$w("#column3").background.src = "https://static.wixstatic.com/media/139b4f_b6ea78eb09704f4c8eacabd07176ad1c~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_b6ea78eb09704f4c8eacabd07176ad1c~mv2.png";
$w("#box6").show("flip", flipOptions);
$w("#box5").hide();
}
Hey @harley.weber Let me break down the code. In a page, there is three stripe element ( column1, column2, column3 ) And each column as two box elements inside. but only one box will show depends if the mouse is inside the column or outside of the column So on mouse In: - box 1 will hide and box 2 will show and mouse Out: - box 1 will show and box 2 will hide. and During the mouse in and out the background of the columns will also change. This happens for 3 columns Each column has one Mouse In and one Mouse out so, total 6 functions there is an Flip Animation
let flipOptions = {
"duration": 600,
"direction": "right"
};
This will animate the box on show or hide You can see all the available animation here. https://www.wix.com/velo/reference/$w/box/show