628 henriko.se Tis 20 Feb
https://www.henriko.se/?page_id=1628

Read more about Let it snow

By default, the script tries to put its drawing canvas behind the parent element by using z-index: -1, and then makes an attempt to move background properties from the parent element to the canvas, and then set the background of the parent element transparent.

If this isn't working out, it might be necessary to use the style attribute --letitsnow-z-control to control how this is made.

If the parent element is a link, contains links or forms, and similar, it is important that the canvas is not on top of the links and form controls. Otherwise it will be impossible to interact with them. If parent element do not contain any interactive elements, and it is desirable that the snow pass in front of the content, then the canvas needs to be on top.

Example code, of putting the canvas on top of other elements:

<script src="letitsnow.js" type="text/javascript"></script>
<style>
  h1.myhead {
    padding: 24px;
    background: #1f2f4f;
    color: lightblue;
    --letitsnow-z-control: 5;
    }
</style>
<h1 class="myhead letitsnow">Hello Olaf</h1>

Or like this:

<script src="letitsnow.js" type="text/javascript"></script>
<style>
  h1.myhead {
    padding: 24px;
    background: #1f2f4f;
    color: lightblue; 
    --letitsnow-z-control: none;
    }
  h1.myhead>.letitsnowcanvas {
    z-index: 5;
    }
</style>
<h1 class="myhead letitsnow">Hello Olaf</h1>

Example code, of explicitly putting the canvas behind other elements:

<script src="letitsnow.js" type="text/javascript"></script>
<style>
  h1.myhead {
    padding: 24px;
    background: transparent;
    color: lightblue; 
    --letitsnow-z-control: -2;
    }
  h1>.letitsnow-canvas {
    background: #1f2f4f;
    }
</style>
<h1 class="myhead letitsnow">Hello <a href="/olaf">Olaf</a></h1>

Perhaps you even need to add some extra div in certain tricky situations, which the script is not able to handle.

Example code:

<style>
  .mybanner {
    -moz-filter-draw-a-forest: the-larch; 
   }
  .mybanner>h1 {
    position: relative;
    padding: 24px; 
    z-index: 2;
    --letitsnow-z-control: auto; 
   }
</style>
<div class="mybanner">
  <h1 class="letitsnow">Hello <a href="/olaf">Olaf</a></h1>
</div>

The amount of snow can be adjusted using the --letitsnow-amount, and a number in percent of what is a reasonable maximum, both aesthetically, and of what a 10 year phone or computer might be able to handle. The percent sign is optional.

<style>
  h1 {
    padding: 24px;
    --letitsnow-amount: 10%;
    }
</style>

There is nothing preventing multiple instances in the same document, like this:

<h1 class="letitsnow">Hello Olaf</a></h1>
Lorem ipsum...
<div class="footer letitsnow">*&lt;|:)</div>

In certain scenarios it might be preferable to pass arguments directly to the script instead of editing CSS code. It might depend on if one prefers to mess the most with the HTML code or the CSS code. One or the other might come from some code generation tool, or might be sourced externally, which can make it hard to quickly do adjustments. Settings passed as arguments to the script can be overridden by CSS style attributes, which might be useful when having multiple instances. It is recommended not to use a percent sign in this case, since it has a special meaning in a URL. However, it is possible to code the percent sign as %25.

Example of passing arguments directly to the script:

<script src="letitsnow.js?--letitsnow-z-control=7&amp;--letitsnow-amount=200" type="text/javascript"></script>

One last thing to mention, a bit crazy perhaps, is that the normally used classname letitsnow actually is the scripts filename, but without the file extension. So it is possible to rename the script, to target some already existing classname, if dealing with code, or at least a section of code, which one has no control over. Still, the script tag has to be inserted somewhere, somehow, of cause. If using this method, all attributes also change accordingly to the filename.

<script src="generated-content.js?--generated-content-amount=75%25" type="text/javascript"></script>

<div class="generated-content page-42 transaction-id-725611">
<div class="log-entry">2021-11-14 10:32 Started</div>
<div class="log-entry">2021-11-14 10:47 Stopped</div>
</div>