Wicked Warderobe 2026

HTML

<div class="wicked-wrap">

    <img 
        src="https://imgur.com/rm2dIWa.png"
        class="wicked-layout"
        alt="Wicked Warderobe"
    >

    <!-- Mist -->
    <div class="mist mist-1"></div>
    <div class="mist mist-2"></div>

    <!-- Vleermuizen -->
    <div class="bats">

        <div class="bat bat-1">
            <span class="wing left"></span>
            <span class="bat-body"></span>
            <span class="wing right"></span>
        </div>

        <div class="bat bat-2">
            <span class="wing left"></span>
            <span class="bat-body"></span>
            <span class="wing right"></span>
        </div>


    </div>

    <!-- Magie -->
    <div class="magic magic-left"></div>
    <div class="magic magic-right"></div>

    <!-- Topic -->
    <a 
        href="https://virtualpopstar.com/social/forum?category=11&topic=995051"
        target="_blank"
        class="topic-link"
        aria-label="Klik hier voor het topic">
    </a>

</div>

CSS

html,
body {
    margin: 0;
    padding: 0;
}

.wicked-wrap {
    position: relative;
    width: 688px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
}

.wicked-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 688px;
    height: 500px;
    z-index: 1;
}


/* Mist */

.mist {
    position: absolute;
    width: 500px;
    height: 120px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    background: rgba(235, 220, 255, 0.55);
    filter: blur(25px);
}

.mist-1 {
    left: -300px;
    bottom: 15px;
    animation: mistLinks 8s linear infinite;
}

.mist-2 {
    right: -300px;
    bottom: 60px;
    opacity: 0.45;
    animation: mistRechts 11s linear infinite;
}

@keyframes mistLinks {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(1200px);
    }
}

@keyframes mistRechts {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-1200px);
    }
}


/* Vleermuizen */

.bats {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 8;
}

.bat {
    position: absolute;
    left: -70px;
    width: 46px;
    height: 24px;
}


/* Lijfje */

.bat-body {
    position: absolute;
    left: 19px;
    top: 7px;
    width: 8px;
    height: 13px;
    background: #100b18;
    border-radius: 50% 50% 65% 65%;
}


/* Oren */

.bat-body::before,
.bat-body::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 4px;
    height: 6px;
    background: #100b18;
}

.bat-body::before {
    left: 0;
    transform: rotate(-25deg);
}

.bat-body::after {
    right: 0;
    transform: rotate(25deg);
}


/* Vleugels */

.wing {
    position: absolute;
    top: 5px;
    width: 22px;
    height: 15px;
    background: #100b18;
}

.wing.left {
    left: 0;
    border-radius: 100%...

JavaScript

function makeSpark(container) {

    const spark = document.createElement("span");

    spark.classList.add("spark");

    if (Math.random() > 0.5) {
        spark.classList.add("orange");
    } else {
        spark.classList.add("purple");
    }

    spark.style.left = (25 + Math.random() * 30) + "px";
    spark.style.top = (35 + Math.random() * 20) + "px";

    spark.style.setProperty(
        "--moveX",
        ((Math.random() * 50) - 25) + "px"
    );

    const size = 2 + Math.random() * 4;

    spark.style.width = size + "px";
    spark.style.height = size + "px";

    container.appendChild(spark);

    setTimeout(function() {
        spark.remove();
    }, 1800);
}


const leftHand = document.querySelector(".magic-left");
const rightHand = document.querySelector(".magic-right");


setInterval(function() {

    makeSpark(leftHand);

    setTimeout(function() {
        makeSpark(rightHand);
    }, 180);

}, 320);