●▲■ 개발일기

[JavaScript] Colorful Rain Animation Effects using Html CSS & Vanilla Javascript 본문

👉 javascript

[JavaScript] Colorful Rain Animation Effects using Html CSS & Vanilla Javascript

●▲■ PRINT 2021. 12. 19. 22:27

휴일에 우연히 유튜브 보다가 따라서 만들어 본 js animation.

요새 자바스크립트에 빠져 있다보니 자연스레 관심이.

 

일 때문에 자바스크립트를 많이 만지고 있는 요즘.

어디에 기록을 할까 고민하다가 티스토리 계정 생성해서 이제 여기에 메모할 예정.

 

 

 

출처 : https://www.youtube.com/watch?v=YhXxBhInJMI

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS -- Rain effect</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        background: #000;
        overflow: hidden;
        height: 100vh;
    }
    i {
        position: absolute;
        height: 200px;
        background: linear-gradient(transparent, #fff);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        animation: animate 5s linear infinite;
    }
    i:nth-child(3n + 1) {
        background: linear-gradient(transparent, #0ff);
    }
    i:nth-child(3n + 2) {
        background: linear-gradient(transparent, #0f0);
    }
    i:nth-child(3n + 3) {
        background: linear-gradient(transparent, #f00);
    }
    @keyframes animate
    {
        0%
        {
            transform: translateY(-200px);
        }
        100%
        {
            transform: translateY(calc(100vh + 200px));
        }
    }
</style>


<body>
    <script>
        function rain() {
            let amount = 100;
            let body = document.querySelector('body');
            let i = 0;
            while(i < amount) {
                let drop = document.createElement('i');
                let size = Math.random() * 5;
                let posX = Math.floor(Math.random() * window.innerWidth);
                let delay = Math.random * -20;
                let duration = Math.random() * 5;

                drop.style.width = 0.2 + size+'px';
                drop.style.left = posX + 'px';
                drop.style.animationDelay = delay+'s';
                drop.style.animationDuration = 1 + duration+'s';
                body.appendChild(drop);
                i++
            }
        }

        rain();
    </script>
</body>
</html>

Colorful Rain Animation Effects using Html CSS &amp; Vanilla Javascript.html
0.00MB

'👉 javascript' 카테고리의 다른 글

[javascript] 이미지가 있는지 없는지 체크하여 default이미지 뿌려주는 함수.  (0) 2023.05.19
[bootstrap] 부트스트랩 스타일 프로그래스바 progressBar  (1) 2023.02.17
[JavaScript] display: none에서 block으로 transition animation의 적용.  (0) 2021.12.30
[JavaScript] 비밀번호 정규표현식 유효성 검사 (버튼 활성화)  (0) 2021.12.20
[JavaScript] 자바스크립트를 이용하여 간단한 텍스트 바꾸기(교체)  (0) 2021.12.19
'👉 javascript' Related Articles more