HTML
<body>
<h1 class="header">HIDDEN MESSAGE</h1>
<div class="underlay"></div>
<div class="overlay"></div>
<div class="uv-light"></div>
<script src="app.js"></script>
</body>CSS
*는 전체 선택자이므로 모든 요소 선택
body는 html body 태그에 속한 요소에만 영향 준다.
body는 태그 선택자고 .class명은 클래스 선택자이므로 class 선택자가 우선순위를 갖는다.
linear-gradient 선형 gradient
radial-gradient 반지름형 gradient
repeating-gradient 반복형 gradient
linear-gradient 선형 gradient
기본 문법 => linear-gradient( direction, color1, color2, …, color3 )
direction에서 gradient 방향 지정
-- to bottom (위에서 아래로, 기본값)
-- to right (왼쪽에서 오른쪽으로)
...
-- ndeg (n도 방향의 gradient 설정)
color 부분에 %를 통해 색상을 사용하는 길이를 지정할 수 있다.
background-size
배경 이미지의 가로세로 크기 설정
기본 문법 => background-size: auto | length | cover | contain | initial | inherit
background-size : 너비 높이; 로 설정 가능.
중복으로 작성해주면 겹쳐지면서 선이 굵어지는 걸 확인할 수 있다.
radial-gradient 원형 gradient
기본 문법 => radial-gradient( shape size at position, color1, color2, ..., color3 )
shap size 에서 원모양/크기 설정
position 에서 중심 위치 설정
이후 color에서 색상 설정
변수 사용하기 위해 var() 사용
.underlay에서 transparent 0.1%만 사용해서 투명도를 낮춰 어둡게 잡고 .overlay에서 transparent 96%를 사용해서 어두운 배경에 어느정도 투명하도록 레이아웃을 잡는 방식box-shadow
기본 문법 => box-shadow: none | x-position y-position blur spread color | inset | initial | inherit
none은 그림자 효과 지우는 거
x-position 가로 위치, 양수면 오른쪽 음수면 왼쪽에 그림자
y-position 세로 위치, 양수면 아래쪽, 음수면 위쪽에 그림자
blur 값이 클수록 흐려짐
spread 양수면 그림자 확장 음수면 축소
color 그림자 색상
보면 값을 중복해서 사용함으로써 효과를 더 진하게 해주고 있다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Indie Flower", cursive;
}
body {
height: 100vh;
width: 100%;
position: fixed;
background-image: linear-gradient(to bottom, transparent 96%, #9370db 96%),
linear-gradient(to right, #1e0033 96%, #9370db 96%);
background-size: 50px 50px, 50px 50px;
}
.underlay {
position: fixed;
top: 0;
left: 0;
z-index: 5;
width: 100%;
height: 100vh;
background: radial-gradient(
200px 500px at var(--x) 50%,
transparent 0.1%,
#1e0033
);
}
.overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background-image: linear-gradient(to bottom, transparent 96%, #9370db 96%),
linear-gradient(to right, #1e0033 96%, #9370db 96%);
background-size: 50px 50px, 50px 50px;
opacity: 0.1;
}
h1 {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
color: #91feff;
font-size: 3rem;
}
.uv-light {
position: absolute;
top: 5%;
left: 100px;
width: 30px;
height: 90%;
background-color: #ffffff;
border-radius: 50px;
animation: blink 3s infinite;
}
@keyframes blink {
0% {
box-shadow: 0 0 30px #fff, 0 0 0px #fff, 0 0 10px #fff, 0 0 30px #85b6ff,
0 0 10px #85b6ff, 0 0 10px #85b6ff;
}
50% {
box-shadow: 0 0 3px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #85b6ff,
0 0 30px #85b6ff, 0 0 80px #85b6ff;
}
100% {
box-shadow: 0 0 30px #fff, 0 0 0px #fff, 0 0 10px #fff, 0 0 30px #85b6ff,
0 0 10px #85b6ff, 0 0 10px #85b6ff;
}
}
JS
document.documentElement는 document를 제외하고 DOM 트리 꼭대기에 있는 문서 노드 <html> 태그에 해당한다.
<html> = document.documentElement
<body> = document.body
<head> = document.head
위 css에서 var()이 :root 선택자에서 정의하는 건데, document.documentElement가 여기로 접근함.
즉, js에서 document.documentElement.style.setProperty('--x', '0px'); 는 css에서 :root { --x: 0px; }; 을 의미한다.
clientX는 클라이언트 영역(현재 보이는 브라우저 화면)에서의 x좌표를 반환
css에서 .underlay에 radial-gradient를 줌으로써 원형으로 강조를 줬는데, 이 중심점 값을 var(--x)을 할당했다.여기서 마우스 움직임에 따라 var(--x) 값을 변환하고, +동시에 uvLight의 left 값으로 불빛 위치까지 따라오게 만듦으로써 조명으로 비추는 듯한 인터랙션 구현
let pos = document.documentElement;
let uvLight = document.querySelector('.uv-light');
console.log(pos);
pos.style.setProperty('--x', '0px');
document.body.addEventListener('mousemove', function(e) {
pos.style.setProperty('--x', e.clientX + 'px');
uvLight.style.left = `${e.clientX - 15}px`;
})참고
