alvin/RTA-test
1
0
Fork 0
mirror of https://github.com/pabloquablo/RTA-test.git synced 2026-03-06 11:17:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor fade-in effect in script.js for smoother opacity transition

Browse Source
This commit is contained in:
vista-man
2025-01-25 21:46:33 +01:00
parent 0705b143c6
commit fd90e1e862
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
script.js
View File

@@ -2,25 +2,26 @@ window.onload = function() {
// Select all paragraphs that immediately follow an h2 element // Select all paragraphs that immediately follow an h2 element
const articles = document.querySelectorAll('h2 + p'); const articles = document.querySelectorAll('h2 + p');
articles.forEach(article => { articles.forEach((article, index) => {
// Set initial opacity of each article to 0 (hidden) // Set initial opacity of each article to 0 (hidden)
article.style.opacity = '0'; article.style.opacity = '0';
// Function to gradually increase the opacity of the article // Function to gradually increase the opacity of the article
const fadeIn = () => { const fadeIn = () => {
let opacity = 0; let opacity = 0;
const interval = setInterval(() => { const increaseOpacity = () => {
opacity += 0.05; opacity += 0.05;
article.style.opacity = opacity; article.style.opacity = opacity;
// Stop the interval when opacity reaches 1 (fully visible) // Continue the animation until opacity reaches 1 (fully visible)
if (opacity >= 1) { if (opacity < 1) {
clearInterval(interval); requestAnimationFrame(increaseOpacity);
} }
}, 30); };
requestAnimationFrame(increaseOpacity);
}; };
// Delay the fade-in effect based on the article's index // Delay the fade-in effect based on the article's index
setTimeout(fadeIn, 500 * articles.indexOf(article)); setTimeout(fadeIn, 500 * index);
}); });
}; };