간단한 애니메이션 만들기
✨ 과제. 버튼 누르면 modal 창 띄우기 (jQuery 사용하기)
.black-bg{
display: none;
}
.show-modal{
display: block;
}<script>
$('#loginBtn').on('click', function(){
$('.black-bg').toggleClass('show-modal');
$('.black-bg').addClass('show-modal');
});
$('#close').on('click', function() {
$('.black-bg').toggleClass('show-modal');
$('.black-bg').removeClass('show-modal');
})
</script>💎간단한 애니메이션 만들기
지난번 UI 만들기는 이런 프로세스로 만들었다.
1. HTML / CSS로 미리 디자인
2.필요할 때 호출
애니메이션은
1. 시작 스타일 만들기 (class)
2. 최종 스타일 만들기 (class)
3. 원할 때 최종스타일로 변하라고 JS 코드 짜기
4. 시작스타일에 transition 추가
js007.html을 복사해 js008.html 만들기
black-bg 클래스를 black-bg1 클래스로 변경하고 css 추가
이렇게 1.시작스타일과 2.최종스타일을 작성함
기존의 display는 애니메이션이 잘 동작하지 않기 때문에
비슷한 역할을 하는 visibility: hidden 을 사용함
opacity는 투명도 조절 속성 (0은 투명 1은 불투명) 0과 1사이의 값으로 투명도 조절 가능
3. 원할 때 최종스타일로 변하라고 JS 코드 짜기
4. 시작스타일에 transition 추가
transition의 시간을 조절해서 애니메이션 길이 변경 가능
✨ 실습. 기존에 만들었던 navbar를 애니메이션을 사용해 아래로 펼쳐지게 만들어보자.
Last updated