49 lines
1.4 KiB
Plaintext
49 lines
1.4 KiB
Plaintext
<!-- weather -->
|
|
<!-- Based on https://codepen.io/codeconvey/pen/xRzQay -->
|
|
{# This include causes a symbol (text, emoji, et cetera; from metadata.weatherSymbol) to fall from the top of the viewport like snow. #}
|
|
<div class="fallingObjects hidden" id="weather" aria-hidden="true">
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const turnOnWeather = (containerId) => {
|
|
const container = document.getElementById(containerId);
|
|
weather.classList.remove("hidden");
|
|
}
|
|
|
|
const turnOffWeather = (containerId) => {
|
|
const container = document.getElementById(containerId);
|
|
weather.classList.add("hidden");
|
|
}
|
|
</script>
|
|
<!-- /weather -->
|