fall2025/title.html at main · wellesleyhack/fall2025 · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>stretching</title>
  <style>
    #container {
      position: relative;
      border: 1px transparent black;
      perspective: 800px;
      display: inline-block;
    }
    .img-layer {
      position: absolute;
      top: 17.7%;
      left: 17.7%;
      width: 100vh;
      height: auto;
      transform-origin: center;
      transition: transform 0.15s ease-out;
      will-change: transform;
    }
    #shadowImg {
      z-index: 0;
    }
    #mainImg {
      z-index: 1;
      position: relative;
    }
  </style>
</head>
<body style="margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: transparent;">
  <div id="container">
    <!-- Shadow image -->
    <img id="shadowImg" class="img-layer" src="../images/shadow.png" alt="阴影">
    <!-- Main image -->
    <img id="mainImg" class="img-layer" src="../images/title.png" alt="主图">
  </div>

  <script>
    (function () {
      const container = document.getElementById('container');
      const mainImg = document.getElementById('mainImg');
      const shadowImg = document.getElementById('shadowImg');

      const maxRotation = 15;
      const maxScale = 1.1;
      const shadowOffset = 10;

      let box = null;
      let ticking = false;
      let lastEvent = null;

      function updateBox() {
        box = container.getBoundingClientRect();
      }

      function applyTransform(e) {
        const centerX = box.left + box.width / 2;
        const centerY = box.top + box.height / 2;
        const dx = e.clientX - centerX;
        const dy = e.clientY - centerY;

        const percentX = dx / (box.width / 2);
        const percentY = dy / (box.height / 2);

        const rotateX = (-percentY * maxRotation).toFixed(2);
        const rotateY = (percentX * maxRotation).toFixed(2);
        const scale = (1 + ((Math.abs(percentX) + Math.abs(percentY)) / 2) * (maxScale - 1)).toFixed(3);

        // Main image transform
        mainImg.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;

        // Shadow image transform
        const shadowScale = (scale * 1.05).toFixed(3);
        const offsetX = (percentX * shadowOffset).toFixed(1);
        const offsetY = (percentY * shadowOffset).toFixed(1);
        shadowImg.style.transform = `translate(${offsetX}px, ${offsetY}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${shadowScale})`;

        ticking = false;
      }

      function onPointerMove(e) {
        lastEvent = e;
        if (!ticking) {
          ticking = true;
          requestAnimationFrame(() => applyTransform(lastEvent));
        }
      }

      function resetTransform() {
        mainImg.style.transform = '';
        shadowImg.style.transform = '';
        ticking = false;
      }

      function syncContainerToImage() {
        // Set the container's width and height to match the loaded image
        const rect = mainImg.getBoundingClientRect();
        container.style.width = `${mainImg.offsetWidth*1.5}px`;
        container.style.height = `${mainImg.offsetHeight*1.5}px`;
        updateBox();
      }

      mainImg.addEventListener('load', syncContainerToImage);
      window.addEventListener('resize', updateBox);
      container.addEventListener('pointermove', onPointerMove);
      container.addEventListener('pointerleave', resetTransform);
      container.addEventListener('pointercancel', resetTransform);
      container.addEventListener('pointerout', resetTransform);
    })();
  </script>
</body>
</html>