ski-bc/index.html at master · philsarisk/ski-bc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>❄️</text></svg>" />
  </head>
  <body class="antialiased">
    <a href="https://snow-forecast.com" target="_blank" rel="noopener noreferrer" class="corner-image left-image">
      <img src="/snow-forecast.jpg" alt="Snow Forecast" />
    </a>
    <div class="attribution">data embed by snow-forecast.com</div>
    <a href="https://github.com/TheExploration/skibc" target="_blank" rel="noopener noreferrer" class="corner-image right-image">
      <img src="https://opengraph.githubassets.com/1/github-mark" alt="GitHub Repository" />
    </a>
    <script>
      let lastScrollY = window.scrollY;
      let ticking = false;

      function updateVisibility() {
        const cornerImages = document.querySelectorAll('.corner-image');
        const attribution = document.querySelector('.attribution');

        // Calculate opacity based on scroll position
        // Start fading at 50px and complete fade by 150px
        const fadeStart = 50;
        const fadeEnd = 150;
        const scrollPos = window.scrollY;

        let opacity = 1;
        if (scrollPos > fadeStart) {
          opacity = Math.max(0, 1 - (scrollPos - fadeStart) / (fadeEnd - fadeStart));
        }

        // Apply opacity to elements
        cornerImages.forEach(image => {
          image.style.opacity = opacity;
          image.style.pointerEvents = opacity === 0 ? 'none' : 'auto';
        });

        attribution.style.opacity = opacity;

        ticking = false;
      }

      window.addEventListener('scroll', () => {
        lastScrollY = window.scrollY;
        if (!ticking) {
          window.requestAnimationFrame(() => {
            updateVisibility();
            ticking = false;
          });
          ticking = true;
        }
      });

      // Initial visibility check
      updateVisibility();
    </script>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>