Snowflakes as firstElementChild

ghost commented 3 years ago

Hi, In my application I wanted snowflakes to be falling in container with content in it. To do so, snowflakes needed to be placed as first child. container param was appending it to parent container so snowflakes wasn't falling from top but from bottom of container. What I did to make it work was changing line in minified from

this.params.container.appendChild(n)

to

this.params.container.insertBefore(n, this.params.container.firstElementChild)

which does work for me. But I belive there is better way to do that.

Since I'm not very good at js, I would like to propose that snowflakes object should have a parameter to decide whether it should be appended or inserted before some other DOM element. i.e.

const sf = new Snowflakes({
  container: document.querySelector('#header'),  //Default: document.body
  insertBefore:  document.querySelector('#header.header-content')  //Default: null
});

If there is no insertBefore parameter snowflakes should be appended to parent element.

hcodes commented 3 years ago

<!DOCTYPE html>
<html>
<body>
    <div class="container">
        <div class="first"></div>
    </div>

    <div class="temp-container"></div>

    <script src="../dist/snowflakes.js"></script>
    <script>

        var tempContainer = document.querySelector('.temp-container');
        Snowflakes({
            container: tempContainer,
            height: 250,
        });

        document.querySelector('.container').insertBefore(tempContainer, document.querySelector('.first'));
    </script>
</body>
</html>

ghost commented 3 years ago

Nice workaround! I haven't thought about it. Thanks for sharing 🔥

hcodes / snowflakes

Snowflakes as firstElementChild #33