728x90
반응형
코드펜에서 눈 내리는 효과를 구현한 HTML, CSS 코드
1. CodePen
See the Pen Snow (Pure CSS) by alphardex (@alphardex) on CodePen.
위 코드에서는 js가 따로 없고 css로만 구현한 것으로 보인다.
수정 없이도 잘 구현되었지만, 랜덤 색으로 구현된다면 더 이쁠 것 같아서 재미로 약간의 수정을 해보았다.
js를 활용하였고, css는 수정하지 않고 html만 수정했다.
수정 내용
- 반복적인 코드 제거 (클린 코딩)
- 여러가지(랜덤) 색으로 눈 내리는 효과
1. 반복적인 코드 제거 (클린 코딩)
코드펜에서 보았던 .html 코드 <div class="snow"></div> 반복이었다.
이 부분은 너무 효율적이지 않다고 생각하여 반복문으로 넣어주었다. (jQuery를 추가)
for (var i = 0; i < snowCount; i++) {
$('<div class="snow"></div>').appendTo('body');
}
이제 200줄을 반복해서 넣어주지 않고 눈의 개수를 직접 설정할 수 있다.
2. 여러가지(랜덤) 색으로 눈 내리는 효과
조금 더 화려한 빵빠레와 같은 효과를 내고 싶어, 내리는 눈의 색깔을 랜덤 값으로 바꿔주었다.
<script>
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var snowElements = document.getElementsByClassName('snow');
for (var i = 0; i < snowElements.length; i++) {
var snowElement = snowElements[i];
snowElement.style.setProperty('--snow-color', getRandomColor());
}
});
</script>getRandomColor()는 '#000000' 형태로 저장되는 color 속성을 랜덤값으로 받기 위해
' # ' 뒤에 랜덤 숫자 알파벳을 추가하여 color의 값을 반환한다.
랜덤한 color를 활용하기 위해 style 속성을 지정해주고 ('--snow-color')
color를 입혀준다. 그러기 위해선 css에 '--snow-color'를 지정해줘야한다.
최종 코드 - [index.html]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/snow.css">
<style>
:root {
--snow-color: white;
}
.snow {
position: absolute;
width: 10px;
height: 10px;
background: var(--snow-color);
border-radius: 50%;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var snowCount = 200; // 원하는 눈의 개수를 설정
for (var i = 0; i < snowCount; i++) {
$('<div class="snow"></div>').appendTo('body');
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var snowElements = document.getElementsByClassName('snow');
for (var i = 0; i < snowElements.length; i++) {
var snowElement = snowElements[i];
snowElement.style.setProperty('--snow-color', getRandomColor());
}
});
</script>
</body>
</html>728x90
css는 codepen에 있는 css를 가져다 사용하면 된다.
실행결과
728x90
반응형
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 배열 메서드 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.22 |
|---|---|
| [JavaScript] 자바스크립트 특정 페이지 이동 | 민민의 하드디스크 - 티스토리 (1) | 2023.05.15 |
| [JavaScript] 자바스크립트 웹 출력하기 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.15 |
| [JavaScript] 자바스크립트 심볼(Symbol)이란? | 민민의 하드디스크 - 티스토리 (0) | 2023.05.14 |
| HTML, CSS 버튼 디자인 | 민민의 하드디스크 - 티스토리 (0) | 2023.05.12 |
