[WEB]jQuery 응용 -Animation 만들기

Animation을 만들기 전에 어떤 디자인을 할지 미리 생각을 하고

시작 스타일과 최종 스타일에 대한 CSS 를 만들어 준다

그런다음 원하는 방식으로 Transition을 추가해서 동작을 구현해준다

jQuery 이용해서 Animation 만들기

---

jQuery에서 제공하는 다양한 라이브러리가 존재한다

 

jQuery 입문 | 이펙트(effect) 효과

 

애니메이션 효과

$(선택자).animate(스타일 [,지속시간] [,시간당속도함수] [,콜백 함수]);

• backgroundPositionX
• backgroundPositionY
• borderWidth
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderTopWidth
• borderSpacing
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• outlineWidth
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
• height
• width
• maxHeight
• maxWidth
• minHeight
• minWidth
• fontSize
• bottom
• left
• right
• top
• letterSpacing
• wordSpacing
• lineHeight
• textIndent

페이드 효과

 

.fadeIn()

선택한 요소의 CSS opacity 속성값을 높여가며 요소를 나타지게 함.

 

.fadeOut()

선택한 요소의 CSS opacity 속성값을 높여가며 요소를 사라지게 함.

 

.fadeToggle()

선택한 요소에 fadeIn() 메소드와 fadeOut() 메소드를 번갈아가며 적용함.

 

.fadeTo()

페이드 효과에서 사용하는 opacity 속성값을 직접 설정함.

 

슬라이드 효과

.slideUp()

선택한 요소의 CSS height 속성값을 높여가며 사라지게 한다.

 

.slideDown()

선택한 요소의 CSS height 속성값을 낮춰가며 나타나게 한다.

 

.slideToggle()

선택한 요소에 .slideUp() 메소드와 .slideDown() 메소드를 번갈아가며 적용한다.

 

요소의 표시와 숨김

 

.hide()

선택한 요소를 사라지게 한다.

 

.show()

선택한 요소를 나타나게 한다.

 

.toggle()

선택한 요소에 .show() 메소드와 .hide() 메소드를 번갈아가며 적용한다.

 

이펙트 효과의 제어

.delay()

실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정한다.

 

.stop()

선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킨다.

 

.finish()

선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시키고,

선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킨다.

 

---

Transition을 사용해서 팝업창 서서히 활성화 하는 방법

---

    <div class="black-bg">
      <div class="white-bg">
        <h4>HELLO, javascript</h4>
        <button class="btn btn-dark" id="close">CLOSE</button>
      </div>
    </div>
    <button class="open-button">OPEN</button>

    <script>
      $(".open-button").on("click", function () {
        $(".black-bg").toggleClass("show");
      });
      $(".btn").on("click", function () {
        $(".black-bg").toggleClass("show");
      });
    </script>

open-button 클래스를 가진 OPEN 버튼을 누르면 toggleClass() 이벤트를 사용해서

클래스 안에 show를 추가해주는 방식으로 팝업이 활성화(visibility: visible;)/비활성화(visibility: hidden;) 되도록 만들었다

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

 

이제 여기서 서서히 등장하게 하기 위해서

visibility 를 hidden으로 설정하고 transition을 사용해서

1초 안에 서서히 등장하게 하도록 만들었다

 

그리고 버튼을 눌렀을 때

visibility 가 visible로 만들어주고 opacity를 0 ~ 1로 만들어준다

 

.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;
}

.show {
  visibility: visible;
  opacity: 1;
}

 

팝업창, 위에서 아래로  내려오게 하는 방법

 

위의 코드에서 위에서 아래로 내려오게 하는 코드만 작성해주면 된다

.black-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;

  visibility: hidden;
  opacity: 0;
  transform: translateY(-2000px);
  transition: all 1s;
}

.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}

.show {
  visibility: visible;
  transform: translateY(0px);
  opacity: 1;
}

 

팝업창, 접었다 펼쳤다 하는 방법

 

OPEN 버튼을 누르면

팝업창이 열리고

CLOSE 버튼을 누르면 팝업창이 닫히도록 만들기 위해서

 

팝업창이 열릴때는

창의 heigth를 400px로 만들어주고

창이 닫일 때, 0px로 만들어 주면 된다

 

서서히 창이 열리도록 하기 위해서

@Keyframes을 사용해서 다음과 같이 애니메이션을 만들어 주었다

@keyframes open-animation {
  0% {
    height: 0px;
  }
  100% {
    height: 400px;
  }
}
@keyframes hide-animation {
  0% {
    height: 400px;
  }
  100% {
    height: 0px;
  }
}

 

그리고 애니메이션이 동작 할 수 있도록

.show {
  animation-name: open-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  visibility: visible;
  opacity: 1;
}
.hide {
  animation-name: hide-animation;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  visibility: visible;
  opacity: 0;
}

open 버튼을 눌렀을 때는 show 클래스를 추가해주고

close를 누르면 hide 클래스가 추가 되게 만들어주면 된다.

   <script>
      $(".open-button").on("click", function () {
        $(".black-bg").addClass("show");
        $(".black-bg").removeClass("hide");
      });
      $(".btn").on("click", function () {
        $(".black-bg").removeClass("show");
        $(".black-bg").addClass("hide");
      });
    </script>