Skip to content

Commit 94fcbe3

Browse files
author
Rich Harris
committed
fix scroll example
1 parent f386f57 commit 94fcbe3

File tree

5 files changed

+24
-169
lines changed

5 files changed

+24
-169
lines changed

‎content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
title: <svelte:window> bindings
33
---
44

5-
We can also bind to certain properties of `window`, such as `scrollY`. Update line 7:
5+
We can also bind to certain properties of `window`, such as `scrollY`:
66

77
```svelte
88
/// file: App.svelte
9-
<svelte:window bind:scrollY={y}/>
9+
<svelte:window +++bind:scrollY={y}+++ />
1010
```
1111

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

‎content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/app-a/src/lib/App.svelte

Lines changed: 10 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,22 @@
11
<script>
2-
const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
3-
4-
let y;
2+
let y = 0;
53
</script>
64

75
<svelte:window />
86

9-
<a
10-
class="parallax-container"
11-
href="https://www.firewatchgame.com"
12-
>
13-
{#each layers as layer}
14-
<img
15-
style="transform: translate(0,{(-y *
16-
layer) /
17-
(layers.length - 1)}px)"
18-
src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
19-
alt="parallax layer {layer}"
20-
/>
21-
{/each}
22-
</a>
23-
24-
<div class="text">
25-
<span
26-
style="opacity: {1 - Math.max(0, y / 40)}"
27-
>
28-
scroll down
29-
</span>
30-
31-
<div class="foreground">
32-
You have scrolled {y} pixels
33-
</div>
34-
</div>
7+
<span>depth: {y}px</span>
358

369
<style>
37-
.parallax-container {
38-
position: fixed;
39-
width: 2400px;
40-
height: 712px;
41-
left: 50%;
42-
transform: translate(-50%, 0);
43-
}
44-
45-
.parallax-container img {
46-
position: absolute;
47-
top: 0;
48-
left: 0;
49-
width: 100%;
50-
will-change: transform;
51-
}
52-
53-
.parallax-container img:last-child::after {
54-
content: '';
55-
position: absolute;
56-
width: 100%;
57-
height: 100%;
58-
background: rgb(45, 10, 13);
59-
}
60-
61-
.text {
62-
position: relative;
63-
width: 100%;
64-
height: 300vh;
65-
color: rgb(220, 113, 43);
66-
text-align: center;
67-
padding: 4em 0.5em 0.5em 0.5em;
68-
box-sizing: border-box;
69-
pointer-events: none;
10+
:global(body) {
11+
height: 400vw;
12+
background: url(./deepsea.webp);
13+
background-size: cover;
7014
}
7115
7216
span {
73-
display: block;
74-
font-size: 1em;
75-
text-transform: uppercase;
76-
will-change: transform, opacity;
77-
}
78-
79-
.foreground {
80-
position: absolute;
81-
top: 711px;
82-
left: 0;
83-
width: 100%;
84-
height: calc(100% - 712px);
85-
background-color: rgb(32, 0, 1);
17+
position: fixed;
18+
font-size: 2em;
8619
color: white;
87-
padding: 50vh 0 0 0;
88-
}
89-
90-
:global(body) {
91-
margin: 0;
92-
padding: 0;
93-
background-color: rgb(253, 174, 51);
20+
font-variant: tabular-nums;
9421
}
95-
</style>
22+
</style>

‎content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/app-a/src/lib/deepsea.webp

604 KB
Binary file not shown.

‎content/tutorial/02-advanced-svelte/09-special-elements/05-svelte-window-bindings/app-b/src/lib/App.svelte

Lines changed: 10 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,22 @@
11
<script>
2-
const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
3-
4-
let y;
2+
let y = 0;
53
</script>
64

75
<svelte:window bind:scrollY={y} />
86

9-
<a
10-
class="parallax-container"
11-
href="https://www.firewatchgame.com"
12-
>
13-
{#each layers as layer}
14-
<img
15-
style="transform: translate(0,{(-y *
16-
layer) /
17-
(layers.length - 1)}px)"
18-
src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
19-
alt="parallax layer {layer}"
20-
/>
21-
{/each}
22-
</a>
23-
24-
<div class="text">
25-
<span
26-
style="opacity: {1 - Math.max(0, y / 40)}"
27-
>
28-
scroll down
29-
</span>
30-
31-
<div class="foreground">
32-
You have scrolled {y} pixels
33-
</div>
34-
</div>
7+
<span>depth: {y}px</span>
358

369
<style>
37-
.parallax-container {
38-
position: fixed;
39-
width: 2400px;
40-
height: 712px;
41-
left: 50%;
42-
transform: translate(-50%, 0);
43-
}
44-
45-
.parallax-container img {
46-
position: absolute;
47-
top: 0;
48-
left: 0;
49-
width: 100%;
50-
will-change: transform;
51-
}
52-
53-
.parallax-container img:last-child::after {
54-
content: '';
55-
position: absolute;
56-
width: 100%;
57-
height: 100%;
58-
background: rgb(45, 10, 13);
59-
}
60-
61-
.text {
62-
position: relative;
63-
width: 100%;
64-
height: 300vh;
65-
color: rgb(220, 113, 43);
66-
text-align: center;
67-
padding: 4em 0.5em 0.5em 0.5em;
68-
box-sizing: border-box;
69-
pointer-events: none;
10+
:global(body) {
11+
height: 400vw;
12+
background: url(./deepsea.webp);
13+
background-size: cover;
7014
}
7115
7216
span {
73-
display: block;
74-
font-size: 1em;
75-
text-transform: uppercase;
76-
will-change: transform, opacity;
77-
}
78-
79-
.foreground {
80-
position: absolute;
81-
top: 711px;
82-
left: 0;
83-
width: 100%;
84-
height: calc(100% - 712px);
85-
background-color: rgb(32, 0, 1);
17+
position: fixed;
18+
font-size: 2em;
8619
color: white;
87-
padding: 50vh 0 0 0;
88-
}
89-
90-
:global(body) {
91-
margin: 0;
92-
padding: 0;
93-
background-color: rgb(253, 174, 51);
20+
font-variant: tabular-nums;
9421
}
95-
</style>
22+
</style>

‎src/routes/tutorial/[slug]/ImageViewer.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
['.jpg', 'image/jpeg'],
88
['.jpeg', 'image/jpeg'],
99
['.png', 'image/png'],
10-
['.gif', 'image/gif']
10+
['.gif', 'image/gif'],
11+
['.webp', 'image/webp']
1112
]);
1213
1314
$: ext = selected?.basename.slice(selected.basename.lastIndexOf('.'));

0 commit comments

Comments
 (0)