javascript snow (눈내리는 효과)
js로 눈내리는 효과 구현
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Snow Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> </head> <body> <script src="app.js"></script> </body> </html>
js
setInterval(createSnow, 100); function createSnow() { const snow = document.createElement('i'); snow.classList.add('fas'); snow.classList.add('fa-snowflake'); snow.style.left = Math.random() * window.innerWidth + 'px'; snow.style.animationDirection = Math.random() * 3 + 2 + 's'; snow.style.opacity = Math.random(); snow.style.fontSize = Math.random() * 10 + 10 + 'px'; document.body.appendChild(snow); setTimeout(() => { snow.remove(); }, 5000); }
css
* { box-sizing: border-box; } body { margin: 0; background-color: #144B98; } .fa-snowflake { animation: fall 5s linear forwards; color: #fff; position: absolute; } @keyframes fall { to { transform: translateY(90vh); } }
'ETC > Sample' 카테고리의 다른 글
네이버 검색광고 API를 node.js를 통해 호출 (naver ad api, express, node.js) (0) | 2022.10.22 |
---|---|
javascript calculator (계산기) (0) | 2021.04.21 |
javascript metronome (자바스크립트 메트로놈) (0) | 2021.04.14 |
javascript vimeo thumbnail (자바스크립트로 비메오 썸네일 가져오기) (0) | 2021.04.12 |
javascript youtube thumbnail (자바스크립트로 유튜브 썸네일 가져오기) (0) | 2021.04.11 |
댓글
이 글 공유하기
다른 글
-
네이버 검색광고 API를 node.js를 통해 호출 (naver ad api, express, node.js)
네이버 검색광고 API를 node.js를 통해 호출 (naver ad api, express, node.js)
2022.10.22 -
javascript calculator (계산기)
javascript calculator (계산기)
2021.04.21 -
javascript metronome (자바스크립트 메트로놈)
javascript metronome (자바스크립트 메트로놈)
2021.04.14 -
javascript vimeo thumbnail (자바스크립트로 비메오 썸네일 가져오기)
javascript vimeo thumbnail (자바스크립트로 비메오 썸네일 가져오기)
2021.04.12
댓글을 사용할 수 없습니다.