I get told to shut up a lot by my friend. This is the microsite that documents this in detail.
shutup.jp
postcards
microsite
Backgrounf parallax is breaking mobile
+4
-9
-8
index.html.tmpl
-8
index.html.tmpl
···
40
40
{{ end }}
41
41
42
42
<section class="explain">Shut up Claire.</section>
43
-
44
-
<script>
45
-
const storeScroll = () => {
46
-
document.documentElement.style.setProperty('--scroll', window.scrollY);
47
-
}
48
-
document.addEventListener('scroll', storeScroll, { passive: true });
49
-
storeScroll();
50
-
</script>
51
43
</body>
52
44
</html>
+4
-1
static/shutup.css
+4
-1
static/shutup.css
···
31
31
font-family: Verdana, Geneva, Tahoma, sans-serif;
32
32
scroll-snap-type: y mandatory;
33
33
scroll-padding: 0;
34
+
overflow-x: hidden;
35
+
-webkit-overflow-scrolling: touch;
36
+
width: 100vw;
34
37
}
35
38
36
39
body {
···
39
42
background-image: var(--bg);
40
43
background-repeat: repeat;
41
44
background-attachment: fixed;
42
-
background-position-y: calc(-0.17px * var(--scroll));
43
45
}
44
46
45
47
h1 {
···
156
158
width: 0;
157
159
height: 0;
158
160
overflow:hidden;
161
+
visibility: hidden;
159
162
}
160
163
161
164
input:checked ~ label .postcard {