Skip to main content

Part 3 / Special elements / <svelte:window> bindings

We can also bind to certain properties of window, such as scrollY. Update line 7:

App.svelte
<svelte:window bind:scrollY={y}/>

The list of properties you can bind to is as follows:

  • innerWidth
  • innerHeight
  • outerWidth
  • outerHeight
  • scrollX
  • scrollY
  • online — an alias for window.navigator.onLine

All except scrollX and scrollY are readonly.

Next: <svelte:document>

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
<script>
	const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 
	let y;
</script>
 
<svelte:window />
 
<a
	class="parallax-container"
	href="https://www.firewatchgame.com"
>
	{#each layers as layer}
		<img
			style="transform: translate(0,{(-y *
				layer) /
				(layers.length - 1)}px)"
			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
			alt="parallax layer {layer}"
		/>
	{/each}
</a>
 
<div class="text">
	<span
		style="opacity: {1 - Math.max(0, y / 40)}"
	>
		scroll down
	</span>
 
	<div class="foreground">
		You have scrolled {y} pixels
	</div>
</div>
 
<style>
	.parallax-container {
		position: fixed;
		width: 2400px;
		height: 712px;
		left: 50%;
		transform: translate(-50%, 0);
	}
 
	.parallax-container img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		will-change: transform;
	}
 
	.parallax-container img:last-child::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgb(45, 10, 13);
	}
 
	.text {
		position: relative;
		width: 100%;
		height: 300vh;
		color: rgb(220, 113, 43);
		text-align: center;
		padding: 4em 0.5em 0.5em 0.5em;
		box-sizing: border-box;
		pointer-events: none;
	}
 
	span {
		display: block;
		font-size: 1em;
		text-transform: uppercase;
		will-change: transform, opacity;
	}
 
	.foreground {
		position: absolute;
		top: 711px;
		left: 0;
		width: 100%;
		height: calc(100% - 712px);
		background-color: rgb(32, 0, 1);
		color: white;
		padding: 50vh 0 0 0;
	}
 
	:global(body) {
		margin: 0;
		padding: 0;
		background-color: rgb(253, 174, 51);
	}
</style>
initialising