네이버 버튼 만들기
모바일 버전
네이버는 모바일 버전으로 사용자 경험을 증가시키기 위해서 아래에 동그란 버튼을 만들고 그 안에 기능을 넣었다. (개인적으로 마음에 들지 않은 기능이다. )
네이버는 사람들이 "검색"하는 행위를 하기 위해서 사용하지 음악, 카메라, 번역, 사진, 음성검색, 위치, qr 등 기타 기능을 찾아서 하기 위해 사용하지 않는다.
물론 그 기능을 잘 활용하는 사람도 있지만 사용자가 몇이나 일까 의심스럽다.
아마도 그 기능을 잘 활용하지 못하는 나같은 부류를 위해 만든 인터렉티브한 버튼이 아닐까 싶다..
구현
아무튼 본론으로 넘어와서 우리는 아래의 사진과 같은 버튼을 구현할 것이다.
아래 푸터의 뉴스와 쇼핑과 같은 사이드 메뉴, 푸터의 곡선 레이아웃은 만들지 않고 버튼만 구현할 예정이다.
먼저 결론부터 말하자면 아직 실력이 부족한지라 아이콘에 대한 그라데이션 적용과 터치를 하면 움직이는 회전 원판을 구현하지 못했다.
대체물로 흰 원판을 클릭하면 회전시키는 제한적인 반응으로 구현해놓았는데 여러 문제는 아래에서 설명하겠다.
코드
HTML
<!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">
<link rel="stylesheet" href="style.css">
<script src="./main.js" defer></script>
<title>naver_mobile_handle</title>
</head>
<body>
<!-- 버튼 메뉴 전체를 감싸는 div를 만들었다. -->
<div class="menu">
<!-- 버튼의 중간 원을 만들기 위해(그라데이션 적용부분) div를 만들고-->
<div class="gradation">
<!-- 실제로 이 부분만 애니메이션을 적용하여 그라데이션을 돌렸다. -->
<div></div>
</div>
<!-- 작은 원을 만들기 위해 따로 만듦-->
<div class="circle"></div>
<!-- 흰색 원과 그 중심으로 아이콘들을 배치함 -->
<div class="menu_background">
<!-- 검색 아이콘, style var(--i :0으로 설정) -->
<li style="--i:0">
<a href="#"><ion-icon class="icon" name="search-circle-outline"></ion-icon></a>
</li>
<!-- 번역 아이콘 -->
<li style="--i:1">
<a href="#"><ion-icon class="ion1 icon" name="globe-outline"></ion-icon></a>
</li>
<!-- 카메라 아이콘 -->
<li style="--i:2">
<a href="#"><ion-icon class="ion2 icon" name="camera-outline"></ion-icon></a>
</li>
<!-- qr 아이콘 -->
<li style="--i:3">
<a href="#"><ion-icon class="ion3 icon" name="qr-code-outline"></ion-icon></a>
</li>
<!-- 사진 아이콘 -->
<li style="--i:4">
<a href="#"><ion-icon class="ion4 icon" name="image-outline"></ion-icon></a>
</li>
<!-- 음악 아이콘 -->
<li style="--i:5">
<a href="#"><ion-icon class="ion5 icon" name="musical-notes-outline"></ion-icon></a>
</li>
<!-- 음성 메모 아이콘 -->
<li style="--i:6">
<a href="#"><ion-icon class="ion6 icon" name="mic-outline"></ion-icon></a>
</li>
<!-- 위치 아이콘 -->
<li style="--i:7">
<a href="#"><ion-icon class="ion7 icon" name="location-outline"></ion-icon></a>
</li>
</div>
</div>
<!-- 아이콘을 불러오기 위한 CDN링크 -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 전체를 flex로 배치하고 버튼을 중간으로 가져옴 */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #00000066;
}
/* 그라데이션이 들어가는 중간 부분의 원형 */
.menu .gradation {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0px -3px 2px rgb(80, 80, 80);
z-index: 9;
transition: 0.5s;
}
/* 실제로 그라데이션 적용되는 원형 */
.menu .gradation div {
width: 150px;
height: 150px;
background: radial-gradient(
circle at 50% 0,
rgba(0, 255, 170, 0.9) 20%,
rgba(0, 240, 199, 1) 35%,
rgba(0, 240, 200, 1) 50%,
rgba(0, 212, 255, 1) 100%
);
border-radius: 50%;
animation: rotate 8s linear infinite;
}
/* 애니메이션을 적용하여 그라데이션을 움직임 */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
/* 작은 원형 설정 */
.menu .circle {
position: relative;
width: 80px;
height: 80px;
z-index: 100;
top: 35px;
left: 35px;
border: 3px solid #fff;
border-top: 0;
box-shadow: 0 2px 5px #a6bab4;
background: #85ffda;
border-radius: 50%;
cursor: pointer;
transition: 0.5s;
}
/* 흰색 큰원을 설정 */
.menu_background {
position: relative;
top: -155px;
left: -75px;
width: 300px;
height: 300px;
border-radius: 50%;
border: 75px solid #fff;
/* 45도씩 움직여야 정렬됨 */
transform: rotate(0);
transition: all 0.5s;
}
/* 아이콘의 li를 설정 */
.menu li {
position: absolute;
list-style: none;
top: 62px;
left: -55px;
transform-origin: 130px;
z-index: 8;
}
/* 8개의 아이콘들을 순서대로 일정한 간격으로 배치함 */
.menu_background li {
transform: rotate(calc(360deg / 8 * var(--i)));
}
.menu_background li a {
display: flex;
font-size: 1.5em;
justify-content: center;
align-items: center;
color: rgba(0, 240, 200, 1);
transform: rotate(calc(360deg / -8 * var(--i)));
z-index: 15;
}
/* 흰원판이 돌아갈때 아이콘을 반대로 같은 각도로 움직여 기준을 이룸 */
/* 45도씩 움직여야 정렬됨 */
/* 흰색 원이 돌아갈때 transition으로 부드럽게 위치를 잡음 */
.icon {
transform: rotate(0);
transition: all 0.5s;
}
/* 작은원이 클릭되었을때 작게 만든다.*/
.circle.active {
transform: scale(0.2);
background-color: #fff;
animation: circle_scale 2s linear infinite;
animation-direction: alternate-reverse;
}
@keyframes circle_scale {
0% {
transform: scale(0.3);
}
50% {
transform: scale(0.4);
}
100% {
transform: scale(0.6);
}
}
/* active가 붙을때 작게 만든다. */
.gradation.active {
transform: scale(0.55);
transition: 0.23s;
}
/* active가 붙을때 작게 만든다. */
.menu_background.active {
transform: scale(0.32) !important;
transition: all 0.23s;
}
/* 아이콘 위에 마우스를 올리면 색상을 변경함. */
.menu_background li a:hover .icon {
color: #ffa1ac;
}
JS
// 동그란 버튼을 누르면 스케일을 업시키기 위한 선택자를 classlist에 넣어줌
let circle = document.querySelector('.circle');
let menubgd= document.querySelector('.menu_background')
let grd = document.querySelector('.gradation')
//클릭 시 다음 함수를 실행한다.
circle.onclick = function(){
// 아래 3개의 클래스에 active 클래스를 붙임
circle.classList.toggle('active')
menubgd.classList.toggle('active')
grd.classList.toggle('active')
}
//클릭하면 움직이는 걸로 대체하자.....
//icon을 가져옴
let icon = document.getElementsByClassName('icon');
let rotate_deg = 0;
//menubgd을 가져와 이벤트를 적용하고 클릭 시 rotate_1 함수를 실행
menubgd.addEventListener('click', (e) => rotate_1(e.offsetX, e.offsetY));
const rotate_1 = function(x,y){
//x와 y 좌표들을 중심 기준으로 음수와 양수로 만들었다.
let cord_x = (75+x)-150;
let cord_y =150-(y+75);
//console.log((75+x)-150)
//console.log(150-(y+75))
// console.log(x,y)
if(cord_x>0 && cord_y>0){
console.log('here1')
rotate_plus()
}else if(cord_x>0 && cord_y<0){
console.log('here2')
rotate_plus()
}else if(cord_x<0 && cord_y>0){
console.log('here3')
rotate_minus()
}else if(cord_x<0 && cord_y<0){
console.log('here4')
rotate_minus()
}
console.log(rotate_deg)
//함수가 실행되면 아래의 스타일을 적용시킨다.
menubgd.style.transform = `rotate(${rotate_deg}deg)`
//icon은 배열로 여러클래스를 가져왔기 때문에 아래와 같이 적용시킴
for(let i = 0; i<8; i++){
icon[i].style.transform = `rotate(${-rotate_deg}deg)`
}
//console.log(icon[1])
}
//아이콘들의 정렬을 위해 45도씩 적용되는 함수
const rotate_plus = function(){
rotate_deg += 45;
}
const rotate_minus = function(){
rotate_deg -= 45;
}
//흰색 원판 회전 시키기(하다가 실패함..)
// let icon = document.querySelector('.icon');
// let rotate_start_x = 0;
// let rotate_gab = 0;
// let is_rotate = false;
// // 화면을 처음 클릭했을때 x좌표
// const rotate_start = function(e){
// rotate_start_x = e;
// is_rotate = true;
// }
// const rotate_move = function(e){
// if(is_rotate){
// rotate_gab = (e - rotate_start_x)
// }
// menubgd.style.transform = `rotate(${rotate_gab}deg)`
// console.log(e)
// console.log(rotate_gab)
// }
// const rotate_end = function(){
// is_rotate = false;
// }
// menubgd.addEventListener('mousedown', (e) => rotate_start(e.offsetX))
// menubgd.addEventListener('mousemove', (e)=> rotate_move(e.offsetX))
// menubgd.addEventListener('mouseup', ()=> rotate_end())
// menubgd.addEventListener('mouseout', ()=> rotate_end())추후 과제.
1. 원형을 돌릴 때 슬라이드로 돌릴 수 있도록 구현한다.
2. 한 방향으로 계속 돌려도 오류없이 계속 작동해야한다.
AllTimeDevelop