document.addEventListener('DOMContentLoaded', function() { // Valitse kaikki strong-tagit, joihin haluamme soveltaa animaatiota. // Voit muuttaa 'strong' mihin tahansa valitsimeen, jota käytät boldatulle tekstille (esim. '.my-bold-text-class'). const boldElements = document.querySelectorAll('strong'); // Määritä Intersection Observerin asetukset. // root: null tarkoittaa, että tarkkailemme elementin näkyvyyttä viewportissa. // threshold: 0.1 tarkoittaa, että animaatio käynnistyy, kun 10% elementistä on näkyvissä. const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 }; // Luo uusi Intersection Observer. const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { // Jos elementti on näkyvissä viewportissa if (entry.isIntersecting) { // Lisää 'reveal-text' luokka elementtiin, mikä käynnistää CSS-animaation. entry.target.classList.add('reveal-text'); // Lopeta tämän elementin tarkkailu, koska animaatio on jo käynnistetty. observer.unobserve(entry.target); } }); }, observerOptions); // Käynnistä tarkkailu jokaiselle valitulle boldatulle elementille. boldElements.forEach(element => { observer.observe(element); }); });