Buongiorno a tutti, avrei bisogno di un aiuto per uno script.
In questo caso, che metto qua sotto, avrei bisogno che quando il mouse entra in un trigger esegue la funzione add addclassin, se in seguito con il mouse entro su un altro trigger mi viene aggiunto addclassin sul nuovo trigger in qui sono entrato e addclassout al trigger precedente.
addclassin mi aggiunge un effetto di entrata e mi permette di visualizzare degli elementi precedentemente nascosti tramite aggiunta di classi CSS.
assclassout toglie delle classi CSS precedentemente aggiunte e in seguito aggiunge un animazione di uscita per poi rimuoverla con un timer e rinascondere l'elemento.
Non voglio usare mouseleave perchè se non entro in un altro trigger non voglio che venga aggiunto addclassout
In questo caso, che metto qua sotto, avrei bisogno che quando il mouse entra in un trigger esegue la funzione add addclassin, se in seguito con il mouse entro su un altro trigger mi viene aggiunto addclassin sul nuovo trigger in qui sono entrato e addclassout al trigger precedente.
addclassin mi aggiunge un effetto di entrata e mi permette di visualizzare degli elementi precedentemente nascosti tramite aggiunta di classi CSS.
assclassout toglie delle classi CSS precedentemente aggiunte e in seguito aggiunge un animazione di uscita per poi rimuoverla con un timer e rinascondere l'elemento.
Non voglio usare mouseleave perchè se non entro in un altro trigger non voglio che venga aggiunto addclassout
JavaScript:
var threshold = 60; // La soglia di scroll
var delay = 2000; // Ritardo in millisecondi
var scrollTimeout; // Dichiarazione globale per gestire il timeout dello scroll
var maskmain = document.getElementById("mainmask");
var sonotriggerato = false;
function addHoverListenersWithDelay(triggerId, maskId, lineId) {
var trigger = document.getElementById(triggerId);
var mask = document.getElementById(maskId);
var line = document.getElementById(lineId);
var prevTrigger;
function addclassin() {
mask.classList.add("fadein");
maskmain.classList.add("hovered");
line.classList.add("hovered");
} //mi aggiunge un entrata alle maschere
function addclassout() {
mask.classList.add("fadeout");
mask.classList.remove("fadein");
maskmain.classList.remove("hovered");
line.classList.remove("hovered");
setTimeout(function () {
mask.classList.remove("fadeout");
}, 400);
} //mi aggiunge un uscita alle maschere e poi si rimuove da solo
trigger.addEventListener("mouseenter", function () {
var scrollPosition = window.scrollY || window.pageYOffset;
if (prevTrigger != trigger) {
// Se c'� un trigger precedente, applica addclassout
addclassout(prevTrigger);
}
if (scrollPosition < threshold && sonotriggerato === false) {
//questo mi serve per aggiungere un delay sora una soglia di scroll
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function () {
addclassin();
sonotriggerato = true;
}, delay);
} else {
addclassin();
}
prevTrigger = triggerId;
});
}
//queste sono le chiamate del trigger, maschera, linea
addHoverListenersWithDelay("ch1", "ch2", "ch3");
addHoverListenersWithDelay("sr1", "sr2", "sr3");
addHoverListenersWithDelay("pr1", "pr2", "pr3");
addHoverListenersWithDelay("me1", "me2", "me3");
addHoverListenersWithDelay("ca1", "ca2", "ca3");
addHoverListenersWithDelay("in1", "in2", "in3");
addHoverListenersWithDelay("con1", "con2", "con3");
addHoverListenersWithDelay("cor1", "cor2", "cor3");
Ultima modifica da un moderatore: