[Canvas-불꽃놀이-02] UI 구성

이전 글 : [Canvas-불꽃놀이-01] 프로젝트 초기화

[Canvas-불꽃놀이-01] 프로젝트 초기화

 

화면 html, css 구성

1. 화면 UI 구성하기

• 글자를 입력한 후 불꽃놀이처럼 터지게 하는 효과를 만들기 위해 크게 두 가지의 화면으로 구성하였다
• 구성 : 홈 (입력화면) / 캔버스 (불꽃놀이 효과)
• 배경 : 우주느낌을 주고 싶어서 배경색을 검은색으로 설정하였다.
• 안내 문구 : 안내문구에 애니메이션을 적용해 사용자들이 쉽게 인식할 수 있도록 유도하였다.
• input 태그 주변 : input 태그 주변에 box-shadow를 적용해 빛나는 은하 느낌 적용하였다.
• input 태그 : input 태그 바깥에 box-shadow를 적용하니 입력란이 너무 도드라져 보여 input 태그 안에도 box-shadow를 적용해 부드러운 느낌 추가하였다.
• 버튼 : 캔버스 화면으로 전환을 위해 입력 버튼을 만들어야 됐었는데 버튼이 도드라지지 않고 기존 디자인과 잘 어울리게 하기 위해 버바탕색을 제거하고 테두리를 두 줄로 설정하였다. 입력버튼을 누를 때 확실함을 주기 위해서 hover을 적용해 기존 스타일을 반전시켰다.

1-1.완성된 화면

홈화면

 

2. 안내 문구 애니메이션

• 안내문구에 scale 애니메이션을 적용해 강조 효과를 주었다.

#notice {
    margin-bottom: 2.5rem;
    color: white;
    text-align: center;
    line-height: 1.5;
    /* duration | easing-function | delay | iteration-count | direction | name */
    animation: 1.5s linear 0.5s infinite alternate scale-adjustment;
    z-index: 0;
}

• 1.5s : 1.5초동안 애니메이션의 한 사이클을 진행
• linear : 애니메이션이 일정한 속도로 진행되게 설정
• 0.5s : 애니메이션 시작 전 0.5초의 지연이 있음
• infinite : 애니메이션을 무한히 반복하도록 설정
• alternate : 매 사이클마다 방향이 반대로 진행 (처음 사이클 확대 -> 축소, 그다음 사이클 축소 -> 확대 사이클을 반복)
• scale-adjustment : 애니메이션의 이름을 scale-adjustment라 명명

@keyframes scale-adjustment {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0.9);
    }
}

• @keyframes scale-adjustment : @keyframes를 사용하여 scale-adjustment 애니메이션에서 요소의 크기가 점진적으로 변하도록 설정
• from: 애니메이션이 시작될때 상태 / transform 속성의 scale을 1로 적용해서 크기 변화 없음
• to: 애니메이션이 종료될 때 상태 / transform 속성의 scale을 0.9로 적용해서 요소의 크기를 90%로 줄임

1.5초 동안 일정한 속도로 100% -> 90%로 작아졌다가 0.5초가 지난 후 다시 1.5초 동안 일정한 속도로 90% ~ 100%로 커지는 사이클을 무한 반복한다.

 

3. input 태그 주변의 shadow-box 적용

• input 태그를 감싼 div 태그와 input 태그 입력란 안에 shadow-box를 적용하여 부드러운 우주 느낌이 나도록 설정했다.
• input_box
  • offset-x, offset-y를 0px로 두어 그림자가 특정 방향으로 이동하지 않고 요소의 중심에서 동일하게 퍼져 나가도록 했다.
  • blur-radius의 크기를 점점 늘려 경계를 부드럽게 풀어내도록 적용했다.
  • spread-radius의 크기를 점점 늘려 밖으로 갈수록 넓게 그림자가 퍼지도록 했다.

#input_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    border-radius: 30px;
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0px 0px 20px 10px white, 
                0px 0px 50px 30px deepskyblue, 
                0px 0px 80px 40px rgba(0, 191, 255, 0.5);
    z-index: 0;
}

• input
  • inset 키워드로 그림자를 요소 내부에 적용했다.
  • 오른쪽 아래 방향(10px, 10px)으로 흰색 투명한 그림자가 부드럽게 퍼지도록 했다.
  • 왼쪽 위 방향(-10px, -10px)으로 반대 방향의 부드러운 그림자를 적용하여 빛이 양쪽으로 비치는 것 같은 효과를 연출했다.

#user_input {
    width: 100%;
    padding: 0.875rem;
    border: none;
    border-radius: 30px;
    /* inset | offset-x | offset-y | blur-radius | color */
    box-shadow: inset 10px 10px 20px rgba(255, 255, 255, 0.35), 
                inset -10px -10px 20px rgba(255, 255, 255, 0.35);
    background-color: black;
    opacity: 0.9;
    color: white;
    font-size: large;
    text-align: center;
    font-family: "Do Hyeon";
    font-size: 1.125rem;
}

 

Github 링크

GitHub - jinsk9268/text-fireworks