Mirrors_Framework/awesome-python
1
0
Fork 0
mirror of https://github.com/vinta/awesome-python.git synced 2026-03-23 13:56:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(hero): pause animations when hero scrolls out of view

Browse Source 
Uses IntersectionObserver to toggle an .offscreen class on the hero
element, which sets animation-play-state: paused on the sheen, noise,
and scroll-cue animations. Avoids unnecessary GPU work while the hero
is not visible.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-03-22 16:13:08 +08:00
parent e960d47b3f
commit 80a5596b11
2 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
website/static/main.js
View File

@@ -41,6 +41,16 @@ function initRevealSections() {
initRevealSections();
// Pause hero animations when scrolled out of view
(function () {
var hero = document.querySelector('.hero');
if (!hero || !('IntersectionObserver' in window)) return;
var observer = new IntersectionObserver(function (entries) {
hero.classList.toggle('offscreen', !entries[0].isIntersecting);
});
observer.observe(hero);
})();
// Relative time formatting
function relativeTime(isoStr) {
var date = new Date(isoStr);

6
website/static/style.css
View File

@@ -152,6 +152,12 @@ kbd {
animation: sheen-drift 18s linear infinite;
}
.hero.offscreen .hero-sheen,
.hero.offscreen .hero-noise,
.hero.offscreen .hero-scrollcue::after {
animation-play-state: paused;
}
.hero-noise {
opacity: 0.1;
background-image: