Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<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
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: ,
});

.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
<svelte:window> bindings • Playground • Svelte