Category : intersection-observer

I was trying to animate the images in carousel made with scroll-snap and IntersectionObserver. Even thought the intersection observer is observing the parent element which is not scaled, it doesn’t work as expected. Scaling animation on the images does work (kind of), but jumps sporadicly or even skips the slides all together 🤔 const images ..

Read more

I have tried to work with Intersection Observer. This is the result so far: const mediaInViewport = Array.from(document.querySelectorAll(‘.media’)); const sections = Array.from(document.querySelector(‘#right’).children); const links = Array.from(document.querySelectorAll(‘.link’)); let actLink = links[0]; let actSection = null; let targetLink = null; let targetSection = null; document.body.addEventListener(‘click’, (event) => { if (event.target.tagName === ‘A’) { event.preventDefault(); targetLink = event.target; ..

Read more

cannot fully understand the IntersectionObserver in the example below, everything works fine, but I’m trying to write only one single observer for multiple entries and I’m getting various error messages. Pls, help let io = new IntersectionObserver((entries)=>{ entries.forEach(entry=>{ if(entry.isIntersecting){navt.classList.remove(‘navt1’);} else{navt.classList.add(‘navt1’);} }) }) let io2 = new IntersectionObserver((entries)=>{ entries.forEach(entry=>{ if(entry.isIntersecting){gotopw.style.display = ‘block’;} else{gotopw.style.display = ‘none’;} }) ..

Read more

I’m trying to create events each time that the user observes certain elements of the HTML code: <div class="myunit no1">…</div> <div class="myunit no2">…</div> <div class="myunit no3">…</div> I created the following JavaScript code: const myElements = document.querySelectorAll(‘div.myunit’); const config = {rootMargin: ‘0px 0px 500px 0px’}; let observer = new IntersectionObserver(function (events, self) { events.forEach(event => { ..

Read more

I’m having issues with my InsersectionObserver code: The content of the .timeline-graphs class should be appearing from bellow (@keyframes animation in CSS), but only when the the viewport intersects with it, thanks to InsersectionObserver (JS). Simple enough, but I can’t manage it to work. This is the code: HTML: <section class="timeline-graph-section"> <article class="timeline-graphs"> <h1>This is ..

Read more

This is my code so far: const mediaInViewport = document.querySelectorAll(‘.media’); const links = Array.from(document.querySelectorAll(‘.link’)); let actLink = links[0]; document.body.addEventListener(‘click’, (event) => { if (event.target.tagName === ‘a’) { actLink.classList.remove(‘active’); actLink = links.find(link => event.target.href === link.href) actLink.classList.add(‘active’); } }, false) observer = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { if (entry.target && entry.isIntersecting) { const ..

Read more

This is my code so far: // Click Function $(‘body’).on(‘click’, ‘a’, function() { $(‘a.active’).removeClass(‘active’); $(this).addClass(‘active’); }); // Scroll Function const mediaInViewport = document.querySelectorAll(‘.media’); observer = new IntersectionObserver((entries, observer) => { console.log(‘Next Media in Viewport’); entries.forEach((entry) => { if (entry.target && entry.isIntersecting) { entry.target.classList.add(‘active’); const closestParent = entry.target.closest(‘section’); if (closestParent) { const selector = closestParent.id; const ..

Read more