
Hover navigation
Hover, Menu, All interactions
import wixAnimations from 'wix-animations';
$w.onReady(function () {
hoverEffect();
});
function hoverEffect() {
const obj = {
proj1: {
image: '#diseaseImage',
button: '#diseaseBtnBox',
buttonColor: '#diseaseColorBtn'
},
proj2: {
image: '#hungerImage',
button: '#hungerBtnBox',
buttonColor: '#hungerColorBtn'
},
proj3: {
image: '#higeRentsImage',
button: '#higeRentsBtnBox',
buttonColor: '#higeRentsColorBtn'
},
proj4: {
image: '#climateChangeImage',
button: '#climateChangeBtnBox',
buttonColor: '#climateChangeColorBtn'
},
proj5: {
image: '#boredomImage',
button: '#boredomBtnBox',
buttonColor: '#boredomColorBtn'
},
}
var timer;
for (let item in obj) {
$w(obj[item].button).onMouseIn(() => {
clearTimeout(timer);
wixAnimations.timeline()
.add($w('#mainImage'), { opacity: 0, duration: 150, easing: "easeInOutQuad" })
.play();
wixAnimations.timeline()
.add($w(obj[item].image), { opacity: 1, duration: 150, easing: "easeInOutQuad" })
.play();
wixAnimations.timeline()
.add($w(obj[item].buttonColor), { opacity: 1, duration: 150, easing: "easeInOutQuad" })
.play();
});
$w(obj[item].button).onMouseOut(() => {
wixAnimations.timeline()
.add($w(obj[item].image), { y: 0, opacity: 0, duration: 150, easing: "easeInOutQuad" })
.play();
wixAnimations.timeline()
.add($w(obj[item].buttonColor), { opacity: 0, duration: 150, easing: "easeInOutQuad" })
.play();
timer = setTimeout(function(){ wixAnimations.timeline()
.add($w('#mainImage'), { opacity: 1, duration: 150, easing: "easeInOutQuad" })
.play(); }, );
});
}
}
Explore more Hover interactions

Appearing Hot Dog
Jonathan Tsodikovitch

Appearing Hot Dog
Jonathan Tsodikovitch
