Ciao Sirelancillotto,
Il metodo più semplice per fare quello che vuoi è usare il nuovo
intersectionObserver.
Questo oggetto è in grado di osservare un elemento HTML e far partire del codice ogni volta che si interseca con la parte visibile della pagina.
Funziona in questo modo:
// Prepariamo le impostazioni per l'observer
let options = {
root: null,
rootMargin: '0px',
threshold: 1
}
// Prepariamo la funzione che andrà eseguita quando l'elemento entra nella viewport
let callback = function (entries, observer) {
objData = entries[0]; // Noi abbiamo un solo elemento da controllare, quindi sarà il primo della lista
if (objData.isIntersecting) {
// L'oggetto è entrato nella viewport
move();
// Smettiamo di osservare l'oggetto (animazione solo la prima volta che viene visualizzato)
observer.unobserve(objData.target);
}
}
// Creiamo l'Observer vero e proprio
let observer = new IntersectionObserver(callback, options);
// Seleziona l'elemento che vuoi osservare
let element = document.getElementById(...);
observer.observe(element);
L'oggetto che contiene le opzioni da passare all'observer va impostato con questi dati:
- root - L'elemento contro il quale si vuole effettuare il controllo. Se vogliamo che sia la viewport, allora impostiamolo a null.
- rootMargin - Si può indicare un margine (per esempio, se si vuole che la funzione venga eseguita poco prima che l'elemento venga visualizzato nella viewport)
- threshold - Quanto dell'elemento dovrà intersecare la viewport per far partire la funzione? Lo si imposta qui con un valore da 0 a 1. 0 significa che la funzione partirà appena una porzione, anche piccolissima, viene visualizzata; 1 invece indica che l'elemento deve essere interamente visibile.
Come ho già detto in altre occasioni non si può (e non penso nemmeno che si dovrebbe) dare un codice al 100% funzionante, dato che le circostanze sono sempre diverse e che non aiuterebbe l'apprendimento. Cerca sempre di capire cosa fa il codice prima di usarlo.
Ti avverto di un paio di cose per quanto riguarda questo codice:
1 - Questo codice va eseguito o alla fine della pagina HTML o dentro all'evento "load" del documento.
2 - L'IntersectionObserver non è disponibile in tutti i browser (Unico vero problema è IE). Però è disponibile un
polyfill
Le spiegazioni che ho dato qui sono molto specifiche per il tuo problema, in verità l'IntersectionObserver è molto potente e può controllare quando due elementi qualsiasi del DOM si intersecano. Suggerisco di guardare la documentazione linkata all'inizio del post per più informazioni.
Spero di essere stato utile, ciao