DOMANDA Javascript - Esecuzione funzioni al trigger

Pubblicità
D

doppiaMM

Nuovo Utente
Messaggi
3
Reazioni
0
Punteggio
2
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

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:
il codice sorgente va messo in spoiler altrimenti non si capisce nulla
 
scusate

di seguito metto link code pen se può essere piu utile


è un pò sminchiata la formattazione ma fa nulla l'importante per me è la questione del mouseenter che attiva addclassin al primo trigger che incontra se passo su un altro trigger attiva addclassin al nuovo e a quello precedente assegna addclassout.

se vedete le maschere tramite l'ispeziona che sono gli elementi con id ch2, sr2, ecc... noterete che entrando su un trigger parte addclassin se passate su un altro trigger non aggiunge addclassout su quello precedente ma sullo stesso trigger su cui entrerete attiva sia addclassout che addclassin.

spero si capisca e che possiate aiutarmi grazie a tutti
 
Ultima modifica:
ciao,
essendo da un po' che programmo in react probabilmente ho perso la mano con i siti animati, ma perchè riempire di script quando si può gestire tutto col css coi keyframe, :hover, ecc?

un esempio per un'animazione di entrata e uscita sull'hover sfruttando le transition

HTML: 
<div class="container">
        <div>
            <li class="a">ciao</li>
            <span class="aa">a</span>
        </div>
        <div>
            <li class="b">ciccio</li>
            <span class="bb">b</span>
        </div>
        <div>
            <li class="c">gino</li>
            <span class="cc">c</span>
        </div>
        <div>
            <li class="d">pino</li>
            <span class="dd">d</span>
        </div>
    </div>
CSS: 
li {
    color: red;
    cursor: pointer;
    list-style-type: none;
    margin-right: 30px;
}
span {
    color: white;
    padding: 5px;
    position: relative;
    top: -50px;
    left: -15px;
    background-color: grey;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.a:hover + .aa {
    top: 50px;
}
.b:hover + .bb {
    top: 50px;
}
.c:hover + .cc {
    top: 50px;
}
.d:hover + .dd {
    top: 50px;
}
.container {
    display: flex;
    flex-direction: row;
    width: 50%;
    margin: 0 auto;
    justify-content: center;
}
 
Ultima modifica da un moderatore:
perchè non è solo all'hover di un elemento ad esempio se passo con l'hover sul trigger mi esegue l'animazione, poi se vado sulla maschera mi riesegue l'animazione. Inoltre all'uscita del mouse ha un animazione diversa da quella di entrata
 
Pubblicità
Pubblicità
Indietro
Top