모달창만들기와 간단한 애니메이션

자바스크립트

by front-hyun 2024. 2. 3. 09:03

모달창 띄우기 숙제 1. 클래스부터 만들어놓읍시다

버튼 누를 때 display : block 그냥 대충 줘도 되겠지만 나중을 위해 class 부착식으로 만들어봅시다.

.black-bg {
  (생략)
  display : none;
}

.show-modal {
  display : block;
}

그래서 css 파일열어서

모달창에 붙어있던 기본 class엔 display : none을 추가했고

show-modal 이라는 class를 만들었습니다.

이제 show-modal 원할 때 부착하면 모달창 보일듯요

모달창 띄우기 숙제 2. 버튼클릭시 모달창 띄워주세요

버튼클릭시 모달창 띄워달라고 컴퓨터에게 명령주면 되는데

"띄워주세요~" 라고 코드짜면 컴퓨터가 알아듣겠습니까.

지능이 없는 친구이기 때문에

show-modal 이라는 class를 부착이나 해달라고 구체적으로 명령주면 됩니다.

<button id="login">로그인</button>
<script>
  $('#login').on('click', function(){
    $('.black-bg').addClass('show-modal');
  });
</script>

그래서 버튼누르면 .black-bg에 show-modal 클래스명 추가하라고 코드짰습니다.

쌩자바스크립트는 document.querySelector('.black-bg').classList.add('show-modal') 하면 되겠군요.

닫기버튼과 기능은 알아서 만들어오십시오.

UI 애니메이션 만드는 법

fade 애니메이션은 이렇게 만들어요~

slide 애니메이션은 이렇게 만들어요~

이렇게 가르치면 100강도 모자라서 평생 강의듣다가 인생끝나니까

UI 애니메이션 만드는 법을 알려드리도록 하겠습니다.

실은 자바스크립트말고 css 잘하면 됩니다.

[ one-way 일방향 애니메이션 만드는 법 ]

1. 시작스타일 만들고 (class로)

2. 최종스타일 만들고 (class로)

3. 원할 때 최종스타일로 변하라고 JS 코드짭니다

4. 시작스타일에 transition 추가

A 상태에서 B 상태로만 움직이는 one-way 애니메이션은 다 이렇게 만들면 됩니다.

그럼 모달창 fade-in 애니메이션을 만들어봅시다.

1. 시작스타일 2. 최종스타일을 class로 만들어봅시다.

애니메이션 동작 전 스타일과 동작 후 스타일을 class로 각각 만들어두라는 소리입니다.

.black-bg {
  (생략)
  visibility : hidden;
  opacity : 0;
}
.show-modal {
  visibility : visible;
  opacity : 1;
}

기존에 있던 display 어쩌구는 다 버리고 이렇게 코드짰습니다.

- display : none을 주면 애니메이션이 잘 동작하지 않기 때문에

그거랑 비슷한 역할을 할 수 있는 visibility : hidden 을 사용했습니다.

- opacity는 투명도 조절할 수 있는 속성입니다.

0이면 투명 1이면 불투명 0.5면 반투명임

3. 원할 때 최종스타일로 변하라고 자바스크립트 코드짬

이건 아까 했습니다.

로그인버튼 누르면 알아서 show-modal 부착되고 그럼 최종스타일로 변하는군요

4. 시작스타일에 transition 추가

.black-bg {
  (생략)
  visibility : hidden;
  opacity : 0;
  transition : all 1s;
}
.show-modal {
  visibility : visible;
  opacity : 1;
}

transition은 스타일이 변할 때 천천히 변경하라는 뜻입니다.

지금 class 탈부착시 opacity가 변하는데 그걸 천천히 1초에 걸쳐 변경해줍니다.

애니메이션 구현 끝

Q. 그럼 모달창이 위에서 밑으로 내려오는 애니메이션은 어떻게 만들까요?

Q. 서브메뉴가 접혔다 펴지는 애니메이션은 어떻게 만들까요?

심심하면 집에서 해봅시다. 저거 4-step 따라하면 됩니다.

이건 자바스크립트보다는 css 실력에 달린 것이라 css 잘 모르면 못하는게 당연합니다.

예를 들면 서브메뉴 이렇게 접히는건

서브메뉴의 height를 0px 에서 400px 로 조절하면 되는데

overflow : hidden 이런것도 있으면 될듯 합니다.

모달창이 위에서 내려오도록 / 서브메뉴 접었다 폈다 할 수 있도록

.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
}
.list-group {
  height: 0px;
  overflow: hidden;
  transition: all 1s;
}

.show {
  height: 400px;
}

.black-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
  visibility: hidden;
  opacity: 0;
  transition: all 1s;
  top: -100%;
}
.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}

.show-modal {
  visibility: visible;
  opacity: 1;
  top: 0;
}

앞서 설명한 텍스트랑 버튼 애니메이션 제작 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="css/animation.css" rel="stylesheet" />
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <p class="text">안녕하세요 12기 아기사자입니다~</p>
    <button class="btn">성장중</button>

    <script>
      //3. 원할 때 최종스타일로 변하라는 JS 코드 작성
      $(".btn").on("click", function () {
        $(".text").addClass("size-up");
        $(".btn").addClass("move");
      });
    </script>
  </body>
</html>

/* 1. 시작 스타일 class
4. 시작 스타일에 transition 추가하기 */
.text {
  font-size: 15px;
  color: #3498db;
  font-weight: 800;
  transition: all 1s;
}
.btn {
  margin-left: 10px;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
  transition: all 1s;
}

/* 2. 최종 스타일 class */
.size-up {
  /* 글자 크기 애니메이션 */
  font-size: 20px;
}
.move {
  /* 버튼 애니메이션 */
  margin-left: 300px;
}

'자바스크립트' 카테고리의 다른 글

공백검사 숙제와 else if 문법 (0)	2024.02.14
폼만들며 배워보는 if else (0)	2024.02.14
jQuery 사용법 간단정리 (0)	2024.02.03
서브메뉴 만들어보기와 classList 다루기 (0)	2024.01.29
자바스크립트 이벤트리스너 (0)	2024.01.27