{"id":21441808,"url":"https://github.com/stefan-kanazir/intersection-observer","last_synced_at":"2026-02-14T06:31:05.568Z","repository":{"id":262227883,"uuid":"886383003","full_name":"stefan-kanazir/intersection-observer","owner":"stefan-kanazir","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-30T16:29:27.000Z","size":24,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-21T00:26:17.696Z","etag":null,"topics":["intersection-observer","javascript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stefan-kanazir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-10T21:11:12.000Z","updated_at":"2024-11-30T16:29:30.000Z","dependencies_parsed_at":"2024-11-30T17:28:18.025Z","dependency_job_id":"f92e3290-575f-4fc9-8673-cb285591dcaa","html_url":"https://github.com/stefan-kanazir/intersection-observer","commit_stats":null,"previous_names":["stefan-kanazir/intersection-observer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stefan-kanazir/intersection-observer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefan-kanazir%2Fintersection-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefan-kanazir%2Fintersection-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefan-kanazir%2Fintersection-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefan-kanazir%2Fintersection-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stefan-kanazir","download_url":"https://codeload.github.com/stefan-kanazir/intersection-observer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefan-kanazir%2Fintersection-observer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29438757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T05:24:35.651Z","status":"ssl_error","status_checked_at":"2026-02-14T05:24:34.830Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["intersection-observer","javascript"],"created_at":"2024-11-23T01:42:41.661Z","updated_at":"2026-02-14T06:31:05.553Z","avatar_url":"https://github.com/stefan-kanazir.png","language":"HTML","readme":"# Intersection Observer API Examples\n\nThis repository contains practical examples demonstrating various use cases of the Intersection Observer API. Each example is self-contained and can be run directly in the browser without any build steps.\n\n[MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)\n\n## 🎯 Purpose\n\nThe goal of this repository is to provide clear, practical examples of how to use the Intersection Observer API in real-world scenarios. Each example is designed to demonstrate different aspects of the API while solving common web development challenges.\n\n## 📚 Examples\n\n### 01-simple-visibility\n\n- #### [Code](./01-simple-visibility)\n- #### [Demo](https://stefan-kanazir.github.io/intersection-observer/01-simple-visibility)\n\nA basic implementation showing how to detect when elements enter and exit the viewport. This example helps understand the fundamental concepts of the Intersection Observer API.\n\n**Key concepts covered:**\n\n- Basic Intersection Observer setup\n- Handling intersection entries\n\n### 02-lazy-loading-images\n\n- #### [Code](./02-lazy-loading-images)\n- #### [Demo](https://stefan-kanazir.github.io/intersection-observer/02-lazy-loading-images)\n\nAn implementation of lazy loading images using the Intersection Observer API. Images are loaded only when they're about to enter the viewport, improving initial page load performance.\n\n**Key concepts covered:**\n\n- Creating an efficient lazy loading system for images\n- Handling image loading states\n- Performance optimization techniques\n\n### 03-infinite-scroll\n\n- #### [Code](./03-infinite-scroll)\n- #### [Demo](https://stefan-kanazir.github.io/intersection-observer/03-infinite-scroll)\n\nThis example demonstrates how to implement infinite scroll functionality using the Intersection Observer API. Content is dynamically loaded as the user scrolls down the page, providing a seamless user experience, making it great choice for e-commerce stores, social media apps, job portals, real estate platforms etc.\n\n**Key concepts covered:**\n\n- Dynamically load content when the user reaches the bottom of the page\n- Responsive design: loading a different number of cards based on the screen size\n- Performance optimization: Using the rootMargin property to preload content slightly before it's visible in the viewport.\n\n### 04-scroll-animations\n\n- #### [Code](./04-scroll-animations)\n- #### [Demo](https://stefan-kanazir.github.io/intersection-observer/04-scroll-animations)\n\nThis example demonstrates how to use the Intersection Observer API to trigger scroll-based animations with a single-use mechanism.\n\n**Key concepts covered:**\n\n- Creating scroll-triggered animations\n- Implementing a one-time animation trigger\n- Adding subtle entrance animations\n\n## 🚀 Getting Started\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/yourusername/intersection-observer-examples.git\n```\n\n2. Navigate to any example directory:\n\n```bash\ncd intersection-observer-examples/01-simple-visibility\n```\n\n3. Open the `index.html` file in your browser\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefan-kanazir%2Fintersection-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstefan-kanazir%2Fintersection-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefan-kanazir%2Fintersection-observer/lists"}