API browser - svennijhuis/Blok-tech GitHub Wiki

Intersection Observer API

Ik heb gebruik gemaakt van Intersection Observer API. Dit heb ik gedaan om een fade in te krijgen als je scrolt over de pagina(Bekijk gif hierboven). Als er een oppas in de window komt dan wordt er een klas toegevoegd die een animatie laat plaatsvinden.

1. JavaScript

    const OppasSection = document.querySelectorAll(".background-person");
   
    const observer = new IntersectionObserver( (entries, observer) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) {
          return;
        }
        entry.target.classList.add("sectionfadein");
      }, options);
    });
   
    OppasSection.forEach((section) => {
      observer.observe(section)
    });
   

2. Animatie CSS

    .sectionfadein {
      animation-name: fadeIn;
      animation-duration: 1.5s;
      animation-fill-mode: both;
    }
   
    @keyframes fadeIn {
      0% {
         transform: translateY(20%);
         opacity: 0;
    }
     100%{
         transform: translateY(0);
         opacity: 1;
     }
   }
   

API Lazy load

Voor api koppelingen voor de webpage heb ik gebruik gemaakt API Lazy loading. Ik wil hiermee ervoor zorgen dat de website sneller is en beter reageert, zodat het gebruikersgemak omhoog gaat.

Ik wil dit toepassen op twee manieren via lettertype en afbeeldingen.

Lettertype

Dit is eigenlijk meer een preload. de fonts worden van te voren ingeladen. Je kan dit instellen om <link rel="preload"> in de font family zetten in de head.

afbeeldingen

Bij lazyload met afbeeldingen is het heel simpel. Afbeeldingen die niet in beeld zijn worden nog niet geladen. Pas als de gebruiker gaat scrollen en ze komen in de buurt van de afbeelding, dan pas wordt het geladen. Om dit te bewerkstelligen voeg je in de HTML bij de img loading="lazy" toe.

Wel moet ik zeggen dat dit idee niet gaat helpen bij mijn keuze van coderen. Dat komt, omdat ik de img inlaadt als background-image. Dit doe ik omdat ik wil dat de afbeeldingen even groot zijn en niet uit de verhouding.

Voor meer informatie bekijk de website: Developer Mozilla