// Callback function to execute when intersections are detected
const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Element is in view');
// Perform actions like loading images, animations, etc.
} else {
console.log('Element is out of view');
}
});
};
// Options object
const options = {
root: null, // relative to the viewport
rootMargin: '0px', // margin around the root
//threshold: 0.1 // trigger callback when 10% of the element is visible
treshold: 0, //means out of the viewport
};
// Create an instance of IntersectionObserver with the callback and options
const observer = new IntersectionObserver(callback, options);
// Target element to be observed
const target = document.querySelector('.target-element');
// Start observing the target element
observer.observe(target);