forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1<div class="gradient-mask">
2 <slot />
3</div>
4
5<script>
6 function updateMask() {
7 const mask = document.querySelector('.gradient-mask') as HTMLElement
8 const threshold = 64
9 const scrollY = window.scrollY
10
11 if (scrollY >= threshold) {
12 mask.style.opacity = '1'
13 } else {
14 mask.style.opacity = '0'
15 }
16 }
17
18 document.addEventListener('DOMContentLoaded', () => {
19 updateMask()
20 window.addEventListener('scroll', updateMask)
21 })
22</script>
23
24<style>
25 .gradient-mask {
26 position: fixed;
27 top: 0;
28 left: 0;
29 width: 100%;
30 height: 6rem;
31 z-index: 99;
32 pointer-events: none;
33 background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
34 mask-image: linear-gradient(
35 to bottom,
36 black 0%,
37 rgba(0, 0, 0, 0.8) 20%,
38 rgba(0, 0, 0, 0.6) 40%,
39 rgba(0, 0, 0, 0.4) 60%,
40 rgba(0, 0, 0, 0.2) 80%,
41 transparent 100%
42 );
43 -webkit-mask-image: linear-gradient(
44 to bottom,
45 black 0%,
46 rgba(0, 0, 0, 0.8) 20%,
47 rgba(0, 0, 0, 0.6) 40%,
48 rgba(0, 0, 0, 0.4) 60%,
49 rgba(0, 0, 0, 0.2) 80%,
50 transparent 100%
51 );
52 opacity: 0;
53 transition: opacity 0.3s ease;
54 }
55</style>