[Codes / Scripts] Lights

cReTzUUUU · December 10, 2020

HTML:

<body>
    <div class="light">
        <ul class="line">
            <li class="red"></li>
            <li class="yellow"></li>
            <li class="blue"></li>
            <li class="pink"></li>
            <li class="red"></li>
            <li class="green"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
            <li class="red"></li>
            <li class="pink"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
            <li class="red"></li>
            <li class="green"></li>
            <li class="blue"></li>
            <li class="yellow"></li>
            <li class="red"></li>
            <li class="pink"></li>
            <li class="green"></li>
            <li class="blue"></li>
            <li class="pink"></li>
            <li class="red"></li>
            <li class="green"></li>
            <li class="blue"></li>
        </ul>
    </div>

    <h1>Merry Christmas ! </h1>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
</body>

CSS:

$green: #24D024;
$yellow: #fff952;
$pink: #f53896;
$red: #fb4545;
$blue: #0A53DE;
@import url('https://fonts.googleapis.com/css?family=Cookie');
body {
    background-color: #000000;
}

h1 {
    font-family: 'Cookie', cursive;
    font-size: 80px;
    text-align: center;
    color: white;
    letter-spacing: 3px;
}

.drop {
    position: absolute;
    top: 0;
    z-index: 1;
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px #FFF
}

.animate {
    animation: falling 5.5s infinite ease-in;
}

@keyframes falling {
    0% {
        top: -10px;
        // opacity: 1;
    }
    10% {
        transform: translateX(-5px)
    }
    20% {
        transform: translateX(5px)
    }
    30% {
        transform: translateX(-5px)
    }
    40% {
        transform: translateX(5px)
    }
    60% {
        transform: translateX(-5px)
    }
    70% {
        transform: translateX(5px)
    }
    80% {
        transform: translateX(-5px)
    }
    90% {
        transform: translateX(5px)
    }
    95% {
        opacity: 1
    }
    100% {
        top: 95vh;
        opacity: 0;
    }
}

.line{
  text-align: center; 
}

li {
    position: relative;
    margin: 0 15px;
    list-style: none;
    padding: 0;
    display: inline-block;
    width: 12px;
    height: 28px;
    border-radius: 50%;
    top: 35px;
    background: #fff;
    &:before {
        content: "";
        position: absolute;
        background: #222;
        width: 10px;
        height: 9px;
        border-radius: 3px;
        top: -4px;
        left: 1px;
    }
    &:after {
        content: "";
        top: -14px;
        left: 9px;
        position: absolute;
        width: 52px;
        height: 19px;
        border-bottom: solid #222 2px;
        border-radius: 30%;
    }
}

.red {
    background-color: $red;
    animation: lightningRed 1s infinite;
}

.green {
    background-color: $green;
    animation: lightningGreen 0.8s infinite;
}

.yellow {
    background-color: $yellow;
    animation: lightningYellow 0.9s infinite;
}

.blue {
    background-color: $blue;
    animation: lightningBlue 1.1s infinite;
}

.pink {
    background-color: $pink;
    animation: lightningPink 1.2s infinite;
}

@keyframes lightningRed {
    0% {
        box-shadow: 5px 10px 35px 10px $red;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 5px 10px 35px 10px $red;
    }
}

@keyframes lightningGreen {
    0% {
        box-shadow: 5px 0 35px 10px $green;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 5px 0 35px 10px $green;
    }
}

@keyframes lightningYellow {
    0% {
        box-shadow: 5px 0 35px 10px $yellow;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 5px 0 35px 10px $yellow;
    }
}

@keyframes lightningBlue {
    0% {
        box-shadow: 5px 0 35px 10px $blue;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 5px 0 35px 10px $blue;
    }
}

@keyframes lightningPink {
    0% {
        box-shadow: 5px 0 35px 10px $pink;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 5px 0 35px 10px $pink;
    }
}

@media (max-width: 1024px) {
  .line{
    padding: 0; 
  }
    li {
        margin: 0 15px 20px 15px;
    }
}

Javascript :

$(function() {

    function randomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    };

    var limit_flake = 50;
    setInterval(function() {
        let dimension = randomInt(3, 9) + "px";
        var flake = "<div class='drop animate' style='left:" + randomInt(10, window.innerWidth - 20) + "px;width:" + dimension + ";height:" + dimension + "'></div>";
        $('body').append(flake);

        var list_flake = $('.drop');
        if (list_flake.length > limit_flake) list_flake[list_flake.length - 1].remove();
    }, 200);
})

Sign In

[Codes / Scripts] Lights

Recommended Posts

cReTzUUUU

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Forums

Store

Important Information