jayeclark.github.io/index.html at main · jayeclark/jayeclark.github.io · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="https://jayeclark.github.io/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jay Clark - Full Stack Developer</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script>
      function isElementInViewport(el) {
        const rect = el.getBoundingClientRect();
        const height = window.innerHeight || document.documentElement.clientHeight;
        return (rect.top < height / 2 && rect.bottom > height / 2)
      }

      function changeSize(el) {
        let isGrown = el.classList.contains("grown");
        if (isGrown === true && isElementInViewport(el) === false) {
            el.classList.remove("grown");
            el.classList.add("shrunk");
            el.style.transform = "scale(1.0)";
        }
        else if (isGrown === false && isElementInViewport(el) === true) {
            el.classList.add("grown");
            el.classList.remove("shrunk");
            el.style.transform = "scale(1.10)";
        };
      }


      window.addEventListener("scroll", () => {
          const imgsToGrow = Array.from(document.getElementsByClassName("expanding-image"));
          if (imgsToGrow.length > 0)
          imgsToGrow.forEach(x=>changeSize(x));
      });

    </script>
  </body>
</html>