
/**
 *
 * Initialise un observateur d'intersection pour ajouter la classe "loaded" aux éléments 
 * lorsqu'ils deviennent visibles dans la fenêtre.
 * L'observateur de l'intersection est mis en place pour observer des éléments avec 
 * la classe "animated__item" c'est a dire les 3 colonnes.
 * 
 */
document.addEventListener( 'DOMContentLoaded', () => {
	
	const els = document.querySelectorAll( '.animated__item' );

	const observerOptions = {
		root: null,
		rootMargin: '0px',
		threshold: 0.33,
	};

	/**
	 * Fonction de rappel pour l'observateur d'intersection.
	 * Ajoute la classe "loaded" à l'élément cible s'il se croise.
	 *
	 * @param {IntersectionObserverEntry[]} entries - Un tableau d'objets IntersectionObserverEntry.
	 */
	function observerCallback( entries ) {
		entries.forEach( ( entry ) => {
			if ( entry.isIntersecting ) {
				entry.target.classList.add( 'loaded' );
			}
		} );
	}

	const observer = new IntersectionObserver(
		observerCallback,
		observerOptions
	);

	els.forEach( ( el ) => observer.observe( el ) );
} );