Voici la bible !

Un mémoire pour retrouver toutes les librairies utiles dans une démarche projet.

Ma bible 100% gratuite.

Assieds-toi, et découvre toute les librairies et outils sympa que j'ai pu utiliser dans mes différents projets.

Trigger un élément de mon site quand j'arrive dessus au scroll

                

function isScrolledIntoView(el) {
    var elemTop = el.getBoundingClientRect().top;
    var elemBottom = el.getBoundingClientRect().bottom;

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    return isVisible;
}

$(window).on('scroll', function () {
    if (isScrolledIntoView(document.getElementById('id'))) {
        
        //MONCODE
        
        // Unbind scroll event
        $(window).off('scroll');
    }
});

 
            

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis finibus arcu. Nam consectetur odio sodales mauris posuere, in mollis sem tincidunt. Suspendisse potenti. Curabitur nec faucibus leo, congue hendrerit dolor. Integer nec pulvinar erat. Nulla tempus orci vel convallis finibus. Aenean sodales vel justo vitae aliquet. Fusce molestie urna nec dui commodo portas.

                
                    let distance_AOS_mobile = "100";
                    const mq = window.matchMedia("(max-width: 768px)");
                    if (mq.matches) {
                        distance_AOS_mobile = "120";
                    } else {
                        distance_AOS_mobile = "100";
                    }
                    
                    AOS.init({
                        once: false, // whether animation should happen only once - while scrolling down
                        offset: distance_AOS_mobile, // offset (in px) from the original trigger point
                        duration: 400, // values from 0 to 3000, with step 50ms
                    });      
                 
            

Pour utiliser un package npm à partir d'un fichier d'une application, il faut importer le nom du package: On peut également importer des fonctions spécifiques d'un package à l'aide de la syntaxe de déstructuration:

                
                    import '.../.../*.js';
                    import '.../.../*.css';

                    or

                    import namePackage from "namePackage";
     
            

Vous voulez en savoir plus sur mon travail ?

Contactez-moi.