Awesome GitHub RepositoriesIntersection Observer Implementations

AOS is a scroll-triggered animation library that controls the execution, timing, and mapping of CSS transitions based on element visibility and browser viewport intersections. It functions as a DOM element animation controller and a viewport intersection trigger to initiate visual transitions as elements enter the screen. The library utilizes a custom CSS transition bridge to map scroll-based triggers to CSS class changes, enabling integration with external styling frameworks. It supports anchor-based animation triggers, allowing the visibility of one page element to act as the trigger point

ScrollReveal is a client-side JavaScript library used to trigger CSS animations and transitions for page elements as they enter the browser viewport. It functions as a DOM element animation trigger and a simplified wrapper for the Intersection Observer API to coordinate visual entrance effects and staggered animations based on the user's scroll position. The library focuses on scroll-driven motion and reveal effects, enabling the execution of visual changes and animations automatically as a user navigates a website. It manages the reveal of page content to create movement and progression with

vue-lazyload is a Vue.js image lazy loading plugin and frontend asset optimizer. It serves as a viewport visibility observer that defers the loading of images and components until they enter the browser viewport to reduce initial page load times. The project functions as a progressive image loader by managing image placeholders and implementing dynamic source switching. It uses a browser API to monitor when elements enter the viewport, avoiding expensive scroll event listeners to maintain performance. The plugin provides capabilities for image loading state tracking, including custom placeho

Ce projet est une bibliothèque JavaScript native et un optimiseur de performance web conçu pour différer le chargement des images, vidéos et iframes jusqu'à ce qu'ils entrent dans la fenêtre d'affichage (viewport) du navigateur. Il agit comme un wrapper d'Intersection Observer et un chargeur de média adaptatif pour réduire les temps de chargement initial des pages et économiser la bande passante. La bibliothèque se distingue par la prise en charge des images réactives via srcset et les balises picture, ainsi que des images d'arrière-plan CSS et des SVG animés. Elle s'intègre aux attributs de chargement natifs du navigateur lorsqu'ils sont disponibles tout en fournissant des solutions de repli personnalisées pour les environnements non pris en charge. Elle peut également déclencher l'exécution de fonctions JavaScript spécifiques basées sur la visibilité des éléments. Les capacités étendues incluent la gestion des assets frontend avec prise en charge du ciblage de conteneurs de défilement personnalisés et l'observation de contenu dynamique pour les éléments injectés de manière asynchrone. L'utilitaire gère également la fiabilité du réseau via la gestion des erreurs de chargement des assets et annule les téléchargements actifs pour les éléments qui quittent la fenêtre d'affichage avant la fin.

usehooks-ts is a comprehensive collection of reusable TypeScript-based hooks designed for managing state, DOM events, and browser API interactions within React applications. It provides a typed library of functions to handle common frontend patterns and side effects. The project distinguishes itself by offering specialized hooks for browser integration, including tools for interacting with the system clipboard, managing local and session storage persistence, and loading external scripts. It also includes utilities for responsive UI development, such as tracking media queries, window dimension

Ce projet est un composant de lazy loading React conçu pour améliorer la performance frontend en différant le rendu des éléments enfants jusqu'à ce qu'ils entrent dans la fenêtre d'affichage du navigateur. Il fonctionne comme un gestionnaire de cycle de vie des ressources et un déclencheur de visibilité, empêchant les montages inutiles de composants hors écran pour réduire les temps de chargement initial de la page et l'utilisation de la mémoire. La bibliothèque fournit une configuration pour les déclencheurs de visibilité, permettant l'utilisation de décalages personnalisés et de conteneurs de défilement spécifiques pour déterminer quand un composant se charge. Elle inclut des mécanismes pour gérer les cycles de vie des composants, permettant de choisir si un composant reste chargé après son apparition ou s'il est démonté en quittant la fenêtre d'affichage. Des capacités supplémentaires couvrent le rendu différé via l'utilisation de placeholders et l'optimisation de la gestion des événements pour les écouteurs de défilement et de redimensionnement. Le système prend également en charge la validation manuelle de la visibilité pour forcer les vérifications de fenêtre d'affichage ou exiger qu'un composant s'affiche.

react-lazyload est un composant React et un wrapper de visibilité de fenêtre d'affichage conçu pour minimiser la consommation de ressources en différant l'affichage des éléments UI hors écran. Il fonctionne comme un optimiseur de performance frontend qui retarde le rendu des images ou des composants jusqu'à ce qu'ils entrent dans la fenêtre d'affichage du navigateur. La bibliothèque prévient les décalages de mise en page en permettant la définition des dimensions des placeholders, maintenant la stabilité de la page pendant que le contenu se charge de manière paresseuse. Elle gère la transition de ces placeholders vers le contenu réel en utilisant l'état interne et des animations optionnelles. Le système fournit des mécanismes pour la détection de visibilité dans la fenêtre d'affichage, des remplacements d'affichage manuels pour forcer le montage immédiat, et des déclencheurs de visibilité manuels pour les cas où les événements standards de défilement ou de redimensionnement sont insuffisants.

react-intersection-observer est une implémentation React de l'API Intersection Observer conçue pour suivre quand les éléments DOM entrent ou sortent de la fenêtre d'affichage du navigateur. Il fournit un wrapper et un ensemble de hooks pour surveiller la visibilité des éléments et déclencher des callbacks lorsque le contenu devient visible pour l'utilisateur. La bibliothèque inclut un mécanisme de détection d'occlusion DOM pour déterminer si un élément est couvert par d'autres composants ou masqué par des filtres CSS. Elle dispose également d'un wrapper polyfill qui fournit des solutions de secours de visibilité pour les navigateurs qui ne prennent pas nativement en charge les capacités d'intersection observer. Le projet couvre diverses capacités de suivi de visibilité, incluant des mises à jour synchronisées avec l'état pour les re-rendus de composants et une surveillance sans rendu pour exécuter des callbacks sans mettre à jour l'état. Ces outils supportent l'implémentation du défilement infini, du lazy loading d'assets et des animations basées sur le défilement.

layzr.js est une bibliothèque JavaScript de lazy loading d'images conçue pour améliorer la vitesse de chargement initiale des pages en retardant le téléchargement des images jusqu'à ce qu'elles entrent dans la fenêtre d'affichage (viewport) du navigateur. Elle fonctionne comme un sélecteur d'images responsive qui identifie la source d'image la plus appropriée en fonction de la prise en charge du navigateur et du ratio de pixels de l'appareil. La bibliothèque utilise un système de livraison d'images responsive qui évalue les attributs de données pour sélectionner les sources optimales. Elle inclut un mécanisme de suivi de contenu dynamique, qui surveille le document pour les images nouvellement ajoutées afin de s'assurer qu'elles sont automatiquement ajoutées à la file d'attente de chargement. Le projet fournit un suivi de visibilité via l'API Intersection Observer et inclut un utilitaire pour forcer des rafraîchissements manuels de la fenêtre d'affichage. Il dispose également d'un émetteur d'événements qui permet à une logique personnalisée de s'exécuter via des hooks de cycle de vie avant et après la mise à jour des sources d'images.

Splide est une bibliothèque TypeScript agnostique aux frameworks pour créer des carrousels de contenu et des galeries d'images accessibles et tactiles. Elle fournit une implémentation sans dépendance de sliders qui supportent les interactions de glisser, balayer et flick sur navigateurs mobiles et desktop. La bibliothèque se distingue par une couche d'accessibilité complète utilisant les rôles ARIA et le support des lecteurs d'écran. Elle propose un système de points de rupture (breakpoints) responsive qui adapte les dimensions et le comportement des slides selon la largeur de l'écran, ainsi qu'un système de plugins pour étendre les fonctionnalités de base avec des composants personnalisés et des effets de transition. Le projet couvre un large éventail de capacités de mise en page et d'interaction, incluant des arrangements en grille, des dimensions de slides variables et des workflows de sliders synchronisés. Il inclut des optimisations de performance comme le chargement différé (lazy loading) des médias et le monitoring d'intersection avec la fenêtre d'affichage, ainsi qu'une navigation multi-modale via clavier, molette de souris ou vignettes. Des packages wrappers dédiés sont disponibles pour l'intégration dans diverses architectures de frameworks frontend.

Precedent est un starter d'application Next.js et une bibliothèque de composants fournissant un ensemble fondamental d'outils et de primitives préconfigurés pour construire des interfaces web prêtes pour la production. Il sert de boîte à outils pour amorcer des applications avec une authentification intégrée, des analyses et une collection de composants UI opinionnés. Le projet se distingue par un kit UI Tailwind CSS qui combine des primitives d'accessibilité et des bibliothèques de mouvement pour créer des interfaces soignées. Il inclut un générateur d'images côté serveur pour créer par programmation des images de partage social dynamiques et des visuels de prévisualisation à la périphérie du réseau (edge). La bibliothèque couvre un large éventail de capacités, incluant l'intégration d'identités tierces pour l'authentification et la gestion de session, des analyses de site web axées sur la confidentialité pour suivre les métriques des visiteurs, et une collection de hooks React personnalisés pour gérer l'état côté client, le stockage local et la visibilité des éléments. Elle fournit également des utilitaires pour le formatage de texte et de nombres.

Autotrack est une bibliothèque JavaScript pour Google Analytics qui capture automatiquement les interactions des utilisateurs et l'engagement sur les pages. Elle fournit un système pour une implémentation analytique déclarative, permettant aux événements web d'être suivis via des attributs HTML pour éviter d'écrire du JavaScript personnalisé pour chaque interaction. Le projet inclut un générateur de bundle analytique pour créer des fichiers JavaScript minimisés contenant uniquement les plugins de suivi spécifiques requis pour un projet. Il fonctionne également comme un tracker d'application monopage (SPA) qui surveille les changements dans l'historique du navigateur pour enregistrer les vues de page virtuelles. La bibliothèque couvre un large éventail de capacités de mesure de l'engagement, y compris le suivi de la profondeur de défilement, la visibilité des éléments et les états des media queries. Elle fournit également des outils pour la normalisation des données d'analyse web, tels que le filtrage des paramètres d'URL et la standardisation des chemins pour éviter les entrées en double.

react-waypoint est un composant React et un outil de suivi de viewport qui exécute des fonctions basées sur la visibilité d'un nœud DOM dans une zone défilable. Il surveille quand les éléments entrent ou quittent le viewport du navigateur ou un conteneur de défilement spécifié pour déclencher des rappels. Le projet permet la mise en œuvre du défilement infini, du chargement différé d'actifs et des animations déclenchées par le défilement. Il permet des définitions de conteneur de défilement personnalisées et des configurations de limites de viewport utilisant des décalages pour déterminer exactement quand les événements se déclenchent. L'outil fournit un suivi de la position des éléments et une surveillance de la visibilité pour le défilement vertical et horizontal. Il inclut un contrôle de la sensibilité de déclenchement et une limitation (throttling) des événements pour gérer l'exécution des rappels lors d'un défilement rapide.

Fluid Player is a web-based media playback library designed to embed lightweight, responsive video players into websites. It supports standard video formats and adaptive streaming across modern browsers, providing a foundation for consistent media delivery and custom interface branding. The library distinguishes itself through integrated support for industry-standard advertising protocols, allowing for the injection and orchestration of linear and non-linear video advertisements. It includes built-in tracking for viewer engagement and performance metrics, ensuring that ad delivery is synchron