Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
runes
This component is in runes mode.
To disable runes mode, add the following to the top of your component:
<svelte:options runes={false} />
99
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
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
let y = $state();
</script>
<svelte:window bind:scrollY={y} />
<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 {
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
99
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
›
⌄
⌄
⌄
⌄
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
var root_1 = $.template(`<img class="svelte-1p3lxwn">`);
var root = $.template(`<a class="parallax-container svelte-1p3lxwn" href="https://www.firewatchgame.com"></a> <div class="text svelte-1p3lxwn"><span class="svelte-1p3lxwn">scroll down</span> <div class="foreground svelte-1p3lxwn"> </div></div>`, 1);
export default function App($$anchor) {
const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
let y = $.state(undefined);
var fragment = root();
var a = $.first_child(fragment);
$.each(a, 21, () => layers, $.index, ($$anchor, layer) => {
var img = root_1();
$.template_effect(() => {
$.set_attribute(img, 'style', `transform: translate(0,${-$.get(y) * $.get(layer) / (layers.length - 1) ?? ''}px)`);
$.set_attribute(img, 'src', `https://www.firewatchgame.com/images/parallax/parallax${$.get(layer) ?? ''}.png`);
$.set_attribute(img, 'alt', `parallax layer ${$.get(layer) ?? ''}`);
});
$.append($$anchor, img);
});
$.reset(a);
var div = $.sibling(a, 2);
var span = $.child(div);
var div_1 = $.sibling(span, 2);
var text = $.child(div_1);
$.reset(div_1);
$.reset(div);
$.template_effect(
($0) => {
result = svelte.compile(source, {
generate: ,
});99
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
›
.parallax-container.svelte-1p3lxwn {
position: fixed;
width: 2400px;
height: 712px;
left: 50%;
transform: translate(-50%, 0);
}
.parallax-container.svelte-1p3lxwn img:where(.svelte-1p3lxwn) {
position: absolute;
top: 0;
left: 0;
width: 100%;
will-change: transform;
}
.parallax-container.svelte-1p3lxwn img:where(.svelte-1p3lxwn):last-child::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgb(45, 10, 13);
}
.text.svelte-1p3lxwn {
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;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 586
- end: 1575
- attributes: []
children: [...] (7)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 595
- end: 614
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 595
- end: 614
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "parallax-container"
- start: 595
- end: 614
}
]- start: 595
- end: 614
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 615
- end: 718
children: [...] (5)
Declaration {...}
- type: "Declaration"
- start: 619
- end: 634
- property: "position"
- value: "fixed"
} Declaration {...}
- type: "Declaration"
- start: 638
- end: 651
- property: "width"
- value: "2400px"
} Declaration {...}
- type: "Declaration"
- start: 655
- end: 668
- property: "height"
- value: "712px"
} Declaration {...}
- type: "Declaration"
- start: 672
- end: 681
- property: "left"
- value: "50%"
} Declaration {...}
- type: "Declaration"
- start: 685
- end: 714
- property: "transform"
- value: "translate(-50%, 0)"
}
]
}- start: 595
- end: 718
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 721
- end: 744
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 721
- end: 744
children: [...] (2)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "parallax-container"
- start: 721
- end: 740
}
]- start: 721
- end: 740
} RelativeSelector {...}
- type: "RelativeSelector"
combinator: Combinator {...}
- type: "Combinator"
- name: " "
- start: 740
- end: 741
}selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "img"
- start: 741
- end: 744
}
]- start: 740
- end: 744
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 745
- end: 833
children: [...] (5)
Declaration {...}
- type: "Declaration"
- start: 749
- end: 767
- property: "position"
- value: "absolute"
} Declaration {...}
- type: "Declaration"
- start: 771
- end: 777
- property: "top"
- value: "0"
} Declaration {...}
- type: "Declaration"
- start: 781
- end: 788
- property: "left"
- value: "0"
} Declaration {...}
- type: "Declaration"
- start: 792
- end: 803
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 807
- end: 829
- property: "will-change"
- value: "transform"
}
]
}- start: 721
- end: 833
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 836
- end: 877
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 836
- end: 877
children: [...] (2)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "parallax-container"
- start: 836
- end: 855
}
]- start: 836
- end: 855
} RelativeSelector {...}
- type: "RelativeSelector"
combinator: Combinator {...}
- type: "Combinator"
- name: " "
- start: 855
- end: 856
}selectors: [...] (3)
TypeSelector {...}
- type: "TypeSelector"
- name: "img"
- start: 856
- end: 859
} PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "last-child"
- args: null
- start: 859
- end: 870
} PseudoElementSelector {...}
- type: "PseudoElementSelector"
- name: "after"
- start: 870
- end: 877
}
]- start: 855
- end: 877
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 878
- end: 981
children: [...] (5)
Declaration {...}
- type: "Declaration"
- start: 882
- end: 893
- property: "content"
- value: "''"
} Declaration {...}
- type: "Declaration"
- start: 897
- end: 915
- property: "position"
- value: "absolute"
} Declaration {...}
- type: "Declaration"
- start: 919
- end: 930
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 934
- end: 946
- property: "height"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 950
- end: 977
- property: "background"
- value: "rgb(45, 10, 13)"
}
]
}- start: 836
- end: 981
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 984
- end: 989
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 984
- end: 989
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "text"
- start: 984
- end: 989
}
]- start: 984
- end: 989
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 990
- end: 1182
children: [...] (8)
Declaration {...}
- type: "Declaration"
- start: 994
- end: 1012
- property: "position"
- value: "relative"
} Declaration {...}
- type: "Declaration"
- start: 1016
- end: 1027
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 1031
- end: 1044
- property: "height"
- value: "300vh"
} Declaration {...}
- type: "Declaration"
- start: 1048
- end: 1072
- property: "color"
- value: "rgb(220, 113, 43)"
} Declaration {...}
- type: "Declaration"
- start: 1076
- end: 1094
- property: "text-align"
- value: "center"
} Declaration {...}
- type: "Declaration"
- start: 1098
- end: 1128
- property: "padding"
- value: "4em 0.5em 0.5em 0.5em"
} Declaration {...}
- type: "Declaration"
- start: 1132
- end: 1154
- property: "box-sizing"
- value: "border-box"
} Declaration {...}
- type: "Declaration"
- start: 1158
- end: 1178
- property: "pointer-events"
- value: "none"
}
]
}- start: 984
- end: 1182
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1185
- end: 1189
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1185
- end: 1189
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "span"
- start: 1185
- end: 1189
}
]- start: 1185
- end: 1189
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1190
- end: 1294
children: [...] (4)
Declaration {...}
- type: "Declaration"
- start: 1194
- end: 1208
- property: "display"
- value: "block"
} Declaration {...}
- type: "Declaration"
- start: 1212
- end: 1226
- property: "font-size"
- value: "1em"
} Declaration {...}
- type: "Declaration"
- start: 1230
- end: 1255
- property: "text-transform"
- value: "uppercase"
} Declaration {...}
- type: "Declaration"
- start: 1259
- end: 1290
- property: "will-change"
- value: "transform, opacity"
}
]
}- start: 1185
- end: 1294
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1297
- end: 1308
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1297
- end: 1308
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "foreground"
- start: 1297
- end: 1308
}
]- start: 1297
- end: 1308
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1309
- end: 1479
children: [...] (8)
Declaration {...}
- type: "Declaration"
- start: 1313
- end: 1331
- property: "position"
- value: "absolute"
} Declaration {...}
- type: "Declaration"
- start: 1335
- end: 1345
- property: "top"
- value: "711px"
} Declaration {...}
- type: "Declaration"
- start: 1349
- end: 1356
- property: "left"
- value: "0"
} Declaration {...}
- type: "Declaration"
- start: 1360
- end: 1371
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 1375
- end: 1401
- property: "height"
- value: "calc(100% - 712px)"
} Declaration {...}
- type: "Declaration"
- start: 1405
- end: 1436
- property: "background-color"
- value: "rgb(32, 0, 1)"
} Declaration {...}
- type: "Declaration"
- start: 1440
- end: 1452
- property: "color"
- value: "white"
} Declaration {...}
- type: "Declaration"
- start: 1456
- end: 1475
- property: "padding"
- value: "50vh 0 0 0"
}
]
}- start: 1297
- end: 1479
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1482
- end: 1495
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1482
- end: 1495
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
args: SelectorList {...}
- type: "SelectorList"
- start: 1490
- end: 1494
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1490
- end: 1494
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "body"
- start: 1490
- end: 1494
}
]- start: 1490
- end: 1494
}
]
}
]
}- start: 1482
- end: 1495
}
]- start: 1482
- end: 1495
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1496
- end: 1566
children: [...] (3)
Declaration {...}
- type: "Declaration"
- start: 1500
- end: 1509
- property: "margin"
- value: "0"
} Declaration {...}
- type: "Declaration"
- start: 1513
- end: 1523
- property: "padding"
- value: "0"
} Declaration {...}
- type: "Declaration"
- start: 1527
- end: 1562
- property: "background-color"
- value: "rgb(253, 174, 51)"
}
]
}- start: 1482
- end: 1566
}
]content: {...}
- start: 593
- end: 1567
- styles: "\n\t.parallax-container {\n\t\tposition: fixed;\n\t\twidth: 2400px;\n\t\theight: 712px;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t}\n\n\t.parallax-container img {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\twill-change: transform;\n\t}\n\n\t.parallax-container img:last-child::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: rgb(45, 10, 13);\n\t}\n\n\t.text {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 300vh;\n\t\tcolor: rgb(220, 113, 43);\n\t\ttext-align: center;\n\t\tpadding: 4em 0.5em 0.5em 0.5em;\n\t\tbox-sizing: border-box;\n\t\tpointer-events: none;\n\t}\n\n\tspan {\n\t\tdisplay: block;\n\t\tfont-size: 1em;\n\t\ttext-transform: uppercase;\n\t\twill-change: transform, opacity;\n\t}\n\n\t.foreground {\n\t\tposition: absolute;\n\t\ttop: 711px;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: calc(100% - 712px);\n\t\tbackground-color: rgb(32, 0, 1);\n\t\tcolor: white;\n\t\tpadding: 50vh 0 0 0;\n\t}\n\n\t:global(body) {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tbackground-color: rgb(253, 174, 51);\n\t}\n"
- comment: null
}
}- js: []
- start: 85
- end: 584
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (7)
Text {...}
- type: "Text"
- start: 83
- end: 85
- raw: "\n\n"
- data: "\n\n"
} SvelteWindow {...}
- type: "SvelteWindow"
- start: 85
- end: 119
- name: "svelte:window"
attributes: [...] (1)
BindDirective {...}
- start: 100
- end: 116
- type: "BindDirective"
- name: "scrollY"
expression: Identifier {...}
- type: "Identifier"
- start: 114
- end: 115
loc: {...}
start: {...}
- line: 7
- column: 29
}end: {...}
- line: 7
- column: 30
}
}- name: "y"
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 119
- end: 121
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 121
- end: 420
- name: "a"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 124
- end: 150
- name: "class"
value: [...] (1)
Text {...}
- start: 131
- end: 149
- type: "Text"
- raw: "parallax-container"
- data: "parallax-container svelte-1p3lxwn"
}
]
} Attribute {...}
- type: "Attribute"
- start: 151
- end: 187
- name: "href"
value: [...] (1)
Text {...}
- start: 157
- end: 186
- type: "Text"
- raw: "https://www.firewatchgame.com"
- data: "https://www.firewatchgame.com"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 188
- end: 190
- raw: "\n\t"
- data: "\n\t"
} EachBlock {...}
- type: "EachBlock"
- start: 190
- end: 415
expression: Identifier {...}
- type: "Identifier"
- start: 197
- end: 203
loc: {...}
start: {...}
- line: 10
- column: 8
}end: {...}
- line: 10
- column: 14
}
}- name: "layers"
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 213
- end: 216
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 216
- end: 406
- name: "img"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 224
- end: 294
- name: "style"
value: [...] (3)
Text {...}
- start: 231
- end: 254
- type: "Text"
- raw: "transform: translate(0,"
- data: "transform: translate(0,"
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 254
- end: 290
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 255
- end: 289
loc: {...}
start: {...}
- line: 12
- column: 34
}end: {...}
- line: 12
- column: 68
}
}left: BinaryExpression {...}
- type: "BinaryExpression"
- start: 256
- end: 266
loc: {...}
start: {...}
- line: 12
- column: 35
}end: {...}
- line: 12
- column: 45
}
}left: UnaryExpression {...}
- type: "UnaryExpression"
- start: 256
- end: 258
loc: {...}
start: {...}
- line: 12
- column: 35
}end: {...}
- line: 12
- column: 37
}
}- operator: "-"
- prefix: true
argument: Identifier {...}
- type: "Identifier"
- start: 257
- end: 258
loc: {...}
start: {...}
- line: 12
- column: 36
}end: {...}
- line: 12
- column: 37
}
}- name: "y"
}
}- operator: "*"
right: Identifier {...}
- type: "Identifier"
- start: 261
- end: 266
loc: {...}
start: {...}
- line: 12
- column: 40
}end: {...}
- line: 12
- column: 45
}
}- name: "layer"
}
}- operator: "/"
right: BinaryExpression {...}
- type: "BinaryExpression"
- start: 271
- end: 288
loc: {...}
start: {...}
- line: 12
- column: 50
}end: {...}
- line: 12
- column: 67
}
}left: MemberExpression {...}
- type: "MemberExpression"
- start: 271
- end: 284
loc: {...}
start: {...}
- line: 12
- column: 50
}end: {...}
- line: 12
- column: 63
}
}object: Identifier {...}
- type: "Identifier"
- start: 271
- end: 277
loc: {...}
start: {...}
- line: 12
- column: 50
}end: {...}
- line: 12
- column: 56
}
}- name: "layers"
}property: Identifier {...}
- type: "Identifier"
- start: 278
- end: 284
loc: {...}
start: {...}
- line: 12
- column: 57
}end: {...}
- line: 12
- column: 63
}
}- name: "length"
}- computed: false
- optional: false
}- operator: "-"
right: Literal {...}
- type: "Literal"
- start: 287
- end: 288
loc: {...}
start: {...}
- line: 12
- column: 66
}end: {...}
- line: 12
- column: 67
}
}- value: 1
- raw: "1"
}
}
}
} Text {...}
- start: 290
- end: 293
- type: "Text"
- raw: "px)"
- data: "px)"
}
]
} Attribute {...}
- type: "Attribute"
- start: 298
- end: 369
- name: "src"
value: [...] (3)
Text {...}
- start: 303
- end: 357
- type: "Text"
- raw: "https://www.firewatchgame.com/images/parallax/parallax"
- data: "https://www.firewatchgame.com/images/parallax/parallax"
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 357
- end: 364
expression: Identifier {...}
- type: "Identifier"
- start: 358
- end: 363
loc: {...}
start: {...}
- line: 13
- column: 63
}end: {...}
- line: 13
- column: 68
}
}- name: "layer"
}
} Text {...}
- start: 364
- end: 368
- type: "Text"
- raw: ".png"
- data: ".png"
}
]
} Attribute {...}
- type: "Attribute"
- start: 373
- end: 401
- name: "alt"
value: [...] (2)
Text {...}
- start: 378
- end: 393
- type: "Text"
- raw: "parallax layer "
- data: "parallax layer "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 393
- end: 400
expression: Identifier {...}
- type: "Identifier"
- start: 394
- end: 399
loc: {...}
start: {...}
- line: 14
- column: 24
}end: {...}
- line: 14
- column: 29
}
}- name: "layer"
}
}
]
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1p3lxwn"
- raw: "svelte-1p3lxwn"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 406
- end: 408
- raw: "\n\t"
- data: "\n\t"
}
]
}context: Identifier {...}
- type: "Identifier"
- name: "layer"
- start: 207
loc: {...}
start: {...}
- line: 10
- column: 18
- character: 207
}end: {...}
- line: 10
- column: 23
- character: 212
}
}- end: 212
- typeAnnotation: undefined
}- index: undefined
- key: undefined
} Text {...}
- type: "Text"
- start: 415
- end: 416
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 420
- end: 422
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 422
- end: 584
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 427
- end: 439
- name: "class"
value: [...] (1)
Text {...}
- start: 434
- end: 438
- type: "Text"
- raw: "text"
- data: "text svelte-1p3lxwn"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 440
- end: 442
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 442
- end: 511
- name: "span"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 448
- end: 490
- name: "style"
value: [...] (2)
Text {...}
- start: 455
- end: 464
- type: "Text"
- raw: "opacity: "
- data: "opacity: "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 464
- end: 489
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 465
- end: 488
loc: {...}
start: {...}
- line: 20
- column: 24
}end: {...}
- line: 20
- column: 47
}
}left: Literal {...}
- type: "Literal"
- start: 465
- end: 466
loc: {...}
start: {...}
- line: 20
- column: 24
}end: {...}
- line: 20
- column: 25
}
}- value: 1
- raw: "1"
}- operator: "-"
right: CallExpression {...}
- type: "CallExpression"
- start: 469
- end: 488
loc: {...}
start: {...}
- line: 20
- column: 28
}end: {...}
- line: 20
- column: 47
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 469
- end: 477
loc: {...}
start: {...}
- line: 20
- column: 28
}end: {...}
- line: 20
- column: 36
}
}object: Identifier {...}
- type: "Identifier"
- start: 469
- end: 473
loc: {...}
start: {...}
- line: 20
- column: 28
}end: {...}
- line: 20
- column: 32
}
}- name: "Math"
}property: Identifier {...}
- type: "Identifier"
- start: 474
- end: 477
loc: {...}
start: {...}
- line: 20
- column: 33
}end: {...}
- line: 20
- column: 36
}
}- name: "max"
}- computed: false
- optional: false
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- start: 478
- end: 479
loc: {...}
start: {...}
- line: 20
- column: 37
}end: {...}
- line: 20
- column: 38
}
}- value: 0
- raw: "0"
} BinaryExpression {...}
- type: "BinaryExpression"
- start: 481
- end: 487
loc: {...}
start: {...}
- line: 20
- column: 40
}end: {...}
- line: 20
- column: 46
}
}left: Identifier {...}
- type: "Identifier"
- start: 481
- end: 482
loc: {...}
start: {...}
- line: 20
- column: 40
}end: {...}
- line: 20
- column: 41
}
}- name: "y"
}- operator: "/"
right: Literal {...}
- type: "Literal"
- start: 485
- end: 487
loc: {...}
start: {...}
- line: 20
- column: 44
}end: {...}
- line: 20
- column: 46
}
}- value: 40
- raw: "40"
}
}
]- optional: false
}
}
}
]
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1p3lxwn"
- raw: "svelte-1p3lxwn"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 491
- end: 504
- raw: "scroll down"
- data: "scroll down"
}
]
}
} Text {...}
- type: "Text"
- start: 511
- end: 514
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 514
- end: 577
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 519
- end: 537
- name: "class"
value: [...] (1)
Text {...}
- start: 526
- end: 536
- type: "Text"
- raw: "foreground"
- data: "foreground svelte-1p3lxwn"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 538
- end: 559
- raw: "You have scrolled "
- data: "You have scrolled "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 559
- end: 562
expression: Identifier {...}
- type: "Identifier"
- start: 560
- end: 561
loc: {...}
start: {...}
- line: 23
- column: 21
}end: {...}
- line: 23
- column: 22
}
}- name: "y"
}
} Text {...}
- type: "Text"
- start: 562
- end: 571
- raw: " pixels"
- data: " pixels"
}
]
}
} Text {...}
- type: "Text"
- start: 577
- end: 578
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 584
- end: 586
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 83
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 74
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 5
- column: 0
}
}body: [...] (2)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 53
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 44
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 16
- end: 52
loc: {...}
start: {...}
- line: 2
- column: 7
}end: {...}
- line: 2
- column: 43
}
}id: Identifier {...}
- type: "Identifier"
- start: 16
- end: 22
loc: {...}
start: {...}
- line: 2
- column: 7
}end: {...}
- line: 2
- column: 13
}
}- name: "layers"
}init: ArrayExpression {...}
- type: "ArrayExpression"
- start: 25
- end: 52
loc: {...}
start: {...}
- line: 2
- column: 16
}end: {...}
- line: 2
- column: 43
}
}elements: [...] (9)
Literal {...}
- type: "Literal"
- start: 26
- end: 27
loc: {...}
start: {...}
- line: 2
- column: 17
}end: {...}
- line: 2
- column: 18
}
}- value: 0
- raw: "0"
} Literal {...}
- type: "Literal"
- start: 29
- end: 30
loc: {...}
start: {...}
- line: 2
- column: 20
}end: {...}
- line: 2
- column: 21
}
}- value: 1
- raw: "1"
} Literal {...}
- type: "Literal"
- start: 32
- end: 33
loc: {...}
start: {...}
- line: 2
- column: 23
}end: {...}
- line: 2
- column: 24
}
}- value: 2
- raw: "2"
} Literal {...}
- type: "Literal"
- start: 35
- end: 36
loc: {...}
start: {...}
- line: 2
- column: 26
}end: {...}
- line: 2
- column: 27
}
}- value: 3
- raw: "3"
} Literal {...}
- type: "Literal"
- start: 38
- end: 39
loc: {...}
start: {...}
- line: 2
- column: 29
}end: {...}
- line: 2
- column: 30
}
}- value: 4
- raw: "4"
} Literal {...}
- type: "Literal"
- start: 41
- end: 42
loc: {...}
start: {...}
- line: 2
- column: 32
}end: {...}
- line: 2
- column: 33
}
}- value: 5
- raw: "5"
} Literal {...}
- type: "Literal"
- start: 44
- end: 45
loc: {...}
start: {...}
- line: 2
- column: 35
}end: {...}
- line: 2
- column: 36
}
}- value: 6
- raw: "6"
} Literal {...}
- type: "Literal"
- start: 47
- end: 48
loc: {...}
start: {...}
- line: 2
- column: 38
}end: {...}
- line: 2
- column: 39
}
}- value: 7
- raw: "7"
} Literal {...}
- type: "Literal"
- start: 50
- end: 51
loc: {...}
start: {...}
- line: 2
- column: 41
}end: {...}
- line: 2
- column: 42
}
}- value: 8
- raw: "8"
}
]
}
}
]- kind: "const"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 56
- end: 73
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 18
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 60
- end: 72
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 17
}
}id: Identifier {...}
- type: "Identifier"
- start: 60
- end: 61
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 6
}
}- name: "y"
}init: CallExpression {...}
- type: "CallExpression"
- start: 64
- end: 72
loc: {...}
start: {...}
- line: 4
- column: 9
}end: {...}
- line: 4
- column: 17
}
}callee: Identifier {...}
- type: "Identifier"
- start: 64
- end: 70
loc: {...}
start: {...}
- line: 4
- column: 9
}end: {...}
- line: 4
- column: 15
}
}- name: "$state"
}- arguments: []
- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time