Sparkle with Custom Properties

Example of a header sparkled with sparkle.js author(s): Felix Krause

HTML

<script src="https://github.com/efkah/sparkle.js/releases/download/v1.0/sparkle.min.js"></script>
<header id="sparkle">
    <div class="title">sparkle.js</div>
    <span class="description">An animation based sparkling idea</span>
</header>

CSS

body {
    background-color: #3f3f3f;
}

header {
    padding: 25px;
    color: gold;
    text-align: center;
    border-radius: 5px;
    background-color: purple;
    position: relative;
    font-family: sans-serif;
    font-weight: 200;
}

header .title {
    font-size: xx-large;
    margin-bottom: 5px;
}

JavaScript

window.addEventListener('DOMContentLoaded', () => {
    document.getElementById("sparkle").sparkle({
        position: "afterbegin",
        count: 25,
        minAge: 500,
        maxAge: 2000,
        size: {
            width: "15px",
            height: "15px"
        }
    });
});