https://github.com/tasxatzial/intersection-observer-demo
https://github.com/tasxatzial/intersection-observer-demo
intersection-observer
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/tasxatzial/intersection-observer-demo
- Owner: tasxatzial
- License: other
- Created: 2022-04-16T12:02:18.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-02-28T12:57:19.000Z (8 months ago)
- Last Synced: 2025-02-28T19:09:16.643Z (8 months ago)
- Topics: intersection-observer
- Language: JavaScript
- Homepage: https://tasxatzial.github.io/intersection-observer-demo/
- Size: 1.99 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Intersection observer demo
A simple website that illustrates the application of Intersection and Resize observers.
[Live version](https://tasxatzial.github.io/intersection-observer-demo/src/index.html)
## Implementation
* Responsive.
* Accessible + screen reader friendly.
* Mobile first approach.
* Animations are reduced for users who have turned them off.
* Observers:
* Lazy loading of images.
* Text slides in when user scrolls to the last section.
* Automatic underlining of the navigation link that corresponds to the current visible section.
* Change of the background color of the navigation bar based on the visible section of the page.
## Dependencies
The project is written in HTML, CSS, JavaScript.
The following dependencies require an online connection:
* [:focus-visible](https://github.com/WICG/focus-visible) polyfill.
## Run locally
Download the 'src' folder and open 'index.html' in the browser.
## Screenshots
See [screenshots](screenshots/).