We can also bind to certain properties of window
, such as scrollY
. Update line 7:
<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 forwindow.navigator.onLine
All except scrollX
and scrollY
are readonly.
App.svelte
xxxxxxxxxx
89
1
<script>
2
const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
3
4
let y;
5
</script>
6
7
<svelte:window/>
8
9
<a class="parallax-container" href="https://www.firewatchgame.com">
10
{#each layers as layer}
11
<img
12
style="transform: translate(0,{-y * layer / (layers.length - 1)}px)"
13
src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
14
alt="parallax layer {layer}"
15
>
16
{/each}
17
</a>
18
19
<div class="text">
20
<span style="opacity: {1 - Math.max(0, y / 40)}">
Console
xxxxxxxxxx
151
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
append,
5
attr,
6
destroy_each,
7
detach,
8
element,
9
init,
10
insert,
11
noop,
12
safe_not_equal,
13
set_style,
14
space,
15
text
16
} from "svelte/internal";
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
.parallax-container.svelte-yxxxgz.svelte-yxxxgz{position:fixed;width:2400px;height:712px;left:50%;transform:translate(-50%,0)}.parallax-container.svelte-yxxxgz img.svelte-yxxxgz{position:absolute;top:0;left:0;width:100%;will-change:transform}.parallax-container.svelte-yxxxgz img.svelte-yxxxgz:last-child::after{content:'';position:absolute;width:100%;height:100%;background:rgb(45,10,13)}.text.svelte-yxxxgz.svelte-yxxxgz{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.svelte-yxxxgz.svelte-yxxxgz{display:block;font-size:1em;text-transform:uppercase;will-change:transform, opacity}.foreground.svelte-yxxxgz.svelte-yxxxgz{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}body{margin:0;padding:0;background-color:rgb(253, 174, 51)}