<commit_before><script>
	let sy;
</script>

<!-- this binds `sy` to the current value of `window.scrollY` -->
<svelte:window bind:scrollY={sy}/>

<!-- try changing the values that `sy` is multiplied by -
     values closer to 0 appear further away -->
<div class="parallax-container">
	<img style="transform: translate(0,{-sy * 0.2}px)" src="http://www.firewatchgame.com/images/parallax/parallax0.png">
	<img style="transform: translate(0,{-sy * 0.3}px)" src="http://www.firewatchgame.com/images/parallax/parallax1.png">
	<img style="transform: translate(0,{-sy * 0.4}px)" src="http://www.firewatchgame.com/images/parallax/parallax3.png">
	<img style="transform: translate(0,{-sy * 0.5}px)" src="http://www.firewatchgame.com/images/parallax/parallax5.png">
	<img style="transform: translate(0,{-sy * 0.6}px)" src="http://www.firewatchgame.com/images/parallax/parallax7.png">
</div>

<div class="text">
	<small style="
		transform: translate(0,{-sy * 1.5}px);
		opacity: {1 - Math.max( 0, sy / 80 )}
	">(scroll down)</small>
	<span>parallax has never been this easy</span>
</div>

<style>
	.parallax-container {
		position: fixed;
		width: 2400px;
		height: 712px;
		left: 50%;
		transform: translate(-50%,0);
	}

	.parallax-container img {<commit_msg>Update parallax example to use https: URLs<commit_after><script>
	let sy;
</script>

<!-- this binds `sy` to the current value of `window.scrollY` -->
<svelte:window bind:scrollY={sy}/>

<!-- try changing the values that `sy` is multiplied by -
     values closer to 0 appear further away -->
<div class="parallax-container">
	<img style="transform: translate(0,{-sy * 0.2}px)" src="https://www.firewatchgame.com/images/parallax/parallax0.png">
	<img style="transform: translate(0,{-sy * 0.3}px)" src="https://www.firewatchgame.com/images/parallax/parallax1.png">
	<img style="transform: translate(0,{-sy * 0.4}px)" src="https://www.firewatchgame.com/images/parallax/parallax3.png">
	<img style="transform: translate(0,{-sy * 0.5}px)" src="https://www.firewatchgame.com/images/parallax/parallax5.png">
	<img style="transform: translate(0,{-sy * 0.6}px)" src="https://www.firewatchgame.com/images/parallax/parallax7.png">
</div>

<div class="text">
	<small style="
		transform: translate(0,{-sy * 1.5}px);
		opacity: {1 - Math.max( 0, sy / 80 )}
	">(scroll down)</small>
	<span>parallax has never been this easy</span>
</div>

<style>
	.parallax-container {
		position: fixed;
		width: 2400px;
		height: 712px;
		left: 50%;
		transform: translate(-50%,0);
	}

	.parallax-container img {
{'fraction_non_alphanumeric': 0.19361198738170346, 'fraction_numerical': 0.031545741324921134, 'mean_word_length': 4.5758241758241756, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 5, 'lorem ipsum': 0, 'www.': 10, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2751622', 'n_tokens_mistral': 1001, 'n_tokens_neox': 943, 'n_words': 196}