윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 68강 - jQuery 기본 애니메이션 > javascript

javascript

자바스크립트 강의 리스트

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 68강 - jQuery 기본 애니메이션

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
윤인성님의 javascript강의 청각장애인을 위한 자막
15444120684093.jpg

 안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 입문 3단 68 강

되겠구요
이번 강의에서는 애니메이션과 관련된 부분에 대해서 알아보도록 하겠습니다
체계 장은 챕터 17 되겠구요 제목은 효과 부분 되겠습니다
일단 539 페이지에 있는 17.1 잘 기본 시각효과 부분 부터
살펴보도록 할텐데요
표 17 다시 레 있는 간다는데 3rd 들을 사용을 하면 화면에 있는
요소를 보이게 하거나 보이지 않게 만들 수 있습니다
그럼 코드 17 다시 레이는 내용과 같은 코드를 한번 복사해서 입력해
보도록 하겠습니다
일단 책에서는 버튼 태그를 하나 만들고 이 버튼의 내부의 다가 콘텐츠를
토글 쇼 라고 입력을 했고요
이어 성 div 태그를 만들고 내부의 다가 클래스를 페이지 라는 것을
입력한 다음에 이 내부의 다가 a1000 태그와
p 태그를 입력을 한 다음에 내부의 다 내용물을 넣었습니다
참고적으로 이 내용물을 넣을 때는 요리 입심 닷컴 이라는 사이트에 있는
요 이상한 말들을 넣었는데요
여기에서 제 라이트로 램 입심이 라고 누르게 되면은 로 렘 입춤 으로
시작하는 굉장히 많은 말을 볼 수 있습니다
라틴어로 되어 있는 말인데요 뭐 사실 의미는 없고 그냥 무작위로 조합을
한 말인데 사람들이 라틴어를 모르고 사실 라틴어를 조금 좋아하기 때문에
미국 분들이
그래서 쓸 말이 없을 때 그냥 사용하는 그런 예제 라고 생각을 해 주시면
좋겠습니다
그럼 간단하게 요기에 말을 붙여서 h1 태그와 p 태그를 만들도록
하겠고요
참고적으로 요로 램 입주민 한 것은 굉장히 한국어로도 많이 사용되어
한국어로도 7마리 없을 때 한국어로 램 입힘 이라고 추게 되면 이러한
한글 입술이 라던지 한글 로 램 입춤 이라고 나오게 되는데요
그냥 클릭을 해서 들어가 주시게 되면 아래 쪽에 뭔가
말은 안되지만 좀 그럴듯한 단어들이 생성되는 말을 볼 수 있습니다
사실 최근에는 못입는 잉 등이 활성화가 되서 딩 너님 같은걸 넣어서 약간
조금 더 그럴듯한 말을 만들어 주기 때문에 활용을 해보시면 좋을 것
같습니다
자 그러면 지금 화면과 같이 코드가 간단하게 구성해 됐는데요 여기에서
버튼 태그를 클릭을 하게되면
내부에 성 div 점 페이지 라는 녀석을 토글 하도록 하겠습니다
이토 글이라는 녀석은 화면에 있는 녀석을 보이게 만들거나 보이지 않게
만들 때 사용하는 녀석인데요 한번 이렇게 코드를 작성을 하고 실행해
보도록 하겠습니다
코드를 실행하게 되면 지금 화면처럼 나오게 되는데요 버튼을 클릭하면
보이지 않고 보이게 되고
요렇게 변경되는 모습을 확인할 수 있습니다 그 채권이 톱을 메서드의 매개
변수 에다가 슬로 라던지 아니면 세 스 트 라던지 하는 쏙 또 와 관련된
영화 단어를 입력을 해 주시게 되면 이러한 표현이 약간 부드럽게 바뀌게
되는데요 이렇게 입력을 하고 코드를 실행한 다음에 토글 쇼와 토글 쏘 를
클릭을 해 보고 반복을 해보게 되면 지금 화면처럼 글자 가 출력이 되고
출력이 사라지는 그러한 모습을 확인할 수 있습니다
보여질 때 애니메이션이 화면이 이렇게 커지는 형태로 나오는 모습을 보실
수 있을 겁니다
책의 표 17 다시 를 보시게 되면 이 외에도 다른 래서 들 들 도 볼
수 있는 내용이 를 줘서 슬라이드 토굴을 사용하게되면 저장을 하고 실행을
했을 때 슬라이드 되면서 보여지고 사라지는 걸 볼 수 있고요
마찬가지로 페이 디톡 우리라는 약속도 있는데
세이디 토굴을 입력을 해주시면 실행을 했을 때 서서히 사라지고 서서히
보이는 모습을 확인할 수 있습니다
참고적으로 뿅뿅 톱을 이외에도
뭐 페이드 같은 경우에는 페이드인 페이드아웃 세이디 투 라는 녀석이
있는데요 이 페이드 잉 같은 경우에는
없는데 서 있는 모습으로 서서히 나타나는 것 그리고 사이드 9선 서서히
물러나는 것 그러니까 무대가 있을 때 무대 안으로 들어가는 지 무대
밖으로 나가는지 라고 생각을 해 주시면 되겠구요
페이 d2 는 어떠한 오퍼 시티로 서서 이동을 하게 되는 것 그리고 뭐
슬라이드 같은 경우도 슬라이드 다운이 있고 슬라이드 업 이 있는데요
이녀석 두 녀석을 번갈아가면서 사용하게 만드는게 슬라이 디토 글이라고
생각해 주시면 좋겠습니다
어쨌거나 그냥 토글 같은 경우에는 쇼와 하이드 라는 녀석을 번갈아서
실행해 주는 노 녀석이라고 생각을 해 주시면 좋겠습니다
어쨌건 1 간단한 예로 오뚜기 에 사이트를 한번 보도록 할게요
오뚜기 사이트는 지금 화면처럼 나오게 되는데요 회사소개 라던지 뭐 홍보
센터 를 누르게 되면 위에서 아래로 슬라이드 다운 일어나고 한번 더
클릭을 하게되면 하이드로 사라지는 모습을 볼 수 있습니다
참고적으로 뭐 제품 정보나 쿠킹 스토리 같은걸 누르게 되면 페이지가 아예
이동하는 모습을 볼 수 있는데요
어쨌거나 아래로 조금 더 내려가서 회사소개를 클릭을 하게되면 마찬가지로
슬라이드 나오니 되는 모습을 확인 할 수 있구요
아래쪽에서 la
피 같은 것을 보게 되면 요기 위에다가 글을 올릴때 아래에서 위로 뭔가가
쭉 올라왔다가 다시 이렇게 뜰 때 내려가는 모습도 확인할 수 있습니다
그래서 이러한 것도 모두 슬라이드 다운 이라든지 아니면 슬라이드 업 을
활용한 것이라고 생각을 해 주시면 되겠습니다
그럼 이어서 필요 17.2 에 사용자 정의 효과에 대해서 살펴보도록
하겠는데요
사용자 정의 효과는 우리가 원하는 대로 여기 적혀있는 오퍼스 cd 라던지
하이 시 라던지 탑 이라던지 웰스 라던지 레스트 라던지 의 마진이 라든지
라이스 라던지 패딩 이라든지 바텀 이라던지 하는 것을 수정하는 것입니다
추가적으로 플러그인을 넣게 되면 이유에 값들 도 변경을 하실 수 있는데요
예를 들어서 화면에 있는 요소를 3차원으로 회전하게 만들거나 아니면
색상이 변경되지 않은 애니메이션도 지정할 수 있습니다
그럼 뭐 기본적인 형태를 한번 살펴보도록 할게요
일단 못타 이를 사용해서 div 태그에 미스 를 100p 쌩 그리고
하이셀 100 픽셀로 주도록 하겠습니다 이어서 이 녀석의 백그라운드
칼라를
뭐 렌지 같은걸로 쓰시게 되면 은
내부에 div 태그를 넣었을 때
코드를 저장을 하고 실행을 하면 지금 화면처럼 간단한 오렌지색 100
픽셀 백팩 틀을 사각형이 만들어지는 모습을 확인할 수 있습니다
참고적으로 보기에는 요렇게 정렬되는 게 좋지만 강의에서는 한 화면에 보여
드리는게 더 좋다고 생각을 해서 요렇게 펼치도록 할게요
이렇게 된 상태에서 애니메이트 메서드를 사용해 보도록 하겠는데요
음 div 태그를 클릭을 하게되면
저번에 디스가 내부에서 자기 자신을 의미한다. 고 했죠
디스의 애니메이트 를 호출해서
그리스를 300 픽셀로 변경해 보도록 하겠습니다
애니메이트 메서드는 첫번째 매개변수로 이렇게 객체를 넣어서 변경하고 싶은
형태를 입력을 하게 되구요
두 번째 매개 변수에는 스웨이 션 속도를 입력을 하게 됩니다
밀리 세컨드 단위로 녀석을 몇초동안 실행 할 것이냐를 지정을 하게 되는
건데요
간단하게 1.5 초 를 지정하도록 하겠습니다
뭐 1.5 곱하기 인천을 하면 쉽게 1.5 초 라고 이해를 할 수 있을
텐데요
어쨌거나 이렇게 코드를 저장을 하고 실행해 보도록 하겠습니다
코드를 실행하고 애니메이트 를 누르게 되면 화면에 너비가 300 픽셀로
쭉 변경되는 모습을 확인할 수 있습니다
또 굉장히 간단한 대용 변화 후에 변경되고 싶은 녀석을 목 앞서 를
입력을 하기만 하면 실행을 했을 때 그냥 그 녀석이 진행되는 모습을
확인할 수 있습니다
이 애니메이트 메소드가 증정하는 약간 측이 한걸 지원을 하는데 용
매개변수로 문자를 넣고 플러스 이 콜백 이라던지 를 입력을 하게 되면
상대적으로 값을 변경 을 시킬 수도 있습니다
플러스 2 콜백을 입력을 하게 되면 현재 값에서 100 픽셀 100
픽셀의 씩 더 하라는 의미가 되는데요 이렇게 입력을 하고 코드를 실행해
보도록 하겠습니다
코드를 실행한 이후에 클릭을 하게 되면 점점 작아 켜기 커지는 모습을
확인할 수 있습니다
어쨌거나 이 애니메이트 메서드 같은 경우에는 약간 특이한 것이 있는데요
한번 다시 코드를 실행해 보고 지금 화면에 있는 녀석을 3번 동시에
클릭을 해 보도록 하겠습니다
뭐 연속으로 123 플릭 을 하게 되면
저는 지금 화면에 아무것도 누르지 않았는데 세 번을 연속으로 클릭해 썼기
때문에 3번이 연달아서 실행이 되서 커지는 모습을 확인할 수 있습니다
이처럼 애니메이트 메서드 같은 경우에는 실행을 계속하게 되면 그 녀석들이
동시에 실행되는 게 아니라 대기열에 들어간 다음에 그 대기열이 하나하나
끝날 때마다 다채로운 애니메이션이 실행이 됩니다
예를 들어서 지금 화면에 있는 그림 17 다시 4
애니메이션 q 같은 녀석인데요 어떤 설정한 애니메이트 메서드에 객체가
변경 이 모두 완료될 때까지 다음 녀석들은 그냥 대지만 하게 됩니다
한번 책에 있는 예제를 한번 더 실행해 보도록 하겠는데요
div 태그에 다가 추가적으로
4g 상 속성을 릴레이 팁으로 지정을 한 다음에 체 코드 17 다시
10일에 있는 것과 마찬가지로
애니메이트 메서드를 3번 연달아서 적용을 해 보도록 하겠습니다
책을 보시게 되면 일단 애니메이트 로 레스트 플러스 c 컬 60 그리고
윌슨 플러스 2 콜 60 하 2+2 콜 60을 해서 60c 키우는 모습을
볼 수 있는데용
애니메이트 메서드의 매개 변수를 동시에 지정을 한 게 아니라
애니메이트 메소드를 체 번을 사용을 해서 지정을 한 것이기 때문에 코드를
실행 했을 때 이 녀석들이 동시에 실행되는 게 아니고
레프트 가 변경되고 위스 가 변경되고
하이 c 변경되는 3개가 연달아서 차례차례 실행되는 모습을 볼 수
있습니다
근데 이게 마음에 앉으실 경우가 있어요 예를 들어서 현재와 같이 지금
2000 2000 2001 입력을 해서 6초 동안 실행이 되는데요 이렇게
되었을 때 사용자가 실수로 화면에 있는 녀석을
한 3번 동시에 클릭을 했다 그러면
6 초가 3번이 실행이 되기 때문에
18초 동안 화면에 있는 내용이 변경될 것입니다
지금 저는 아무것도 클릭하고 있지 않은데 화면에 있는 요소가 계속
변경되는 모습을 볼 수 있는데요
이와 같이 사용자가 조작하는 시간과 화면에 있는 개체가 움직이는 시간이
다르게 되면 사용자가 뭔가 이질감이 라던지 이물감을 느낄 수 있게 됩니다
그래서 현재 화면에 있는 녀석들을 제거를 하는 것 화면에서 움직임을
대기를 타고 있는 녀석들을 제거하는 메소드가 있는데요
클리어 q 라는 메쏘드 입니다 클리 억스 라는 녀석을 사용을 하게 되면
아까 그림에서
그림 1다시 7에서 현재 실행되고 있는 녀석은 계속 실행되게 놔두고
이 뒤에 있는 다른 대기를 타고 있는 녀석들을 제거를 하게 됩니다
따라서 이렇게 코드를 저장을 하고 실행하게 되면 세 번을 연속으로 클릭한
다고 해도 대기열에 들어갔던 녀석들이 모두 제거되기 때문에 한번만
진행되고 끝나게 됩니다
한번 실행해 볼게요 123 3번을 클릭을 했는데요
1후드가 바뀌고 위스 가 바뀌고 하이 시 바뀌고 곧바로 끝나는 모습을
볼 수 있습니다
그래서 요러한 형태로 클리어 q 를 사용하게되면 사용자가 애니메이션을
연달아서 실행하는 그런 것을 방지할 수 있다라고 생각을 해 주시면
좋겠습니다
이어서 알아볼 녀석은 애니메이션을 중지하는 스타 메소드입니다 스타 메써드
같은 경우에는 매개변수로 일반적으로 클리어 q 라는 녀석과 점 프 트 &
라는 녀석 두가지를 넣게 되는데요
두가지 모두 생략을 할 수 있고 두 가지 모두 입력을 해 주실 수도
있습니다
두가지 모두 훈련을 놓게 되고 첫 번째 매개 변수에는 클리어 큐를 입력을
하게 됩니다
클리어 q 는 방금 했던 클리어 q 라는 메소드를 호출 할 지 말지
입니다
애니메이션을 정지를 할 때 클리어 q 라는 매개 변수를 추러 주시게 되면
클레이아크 라는 메소드를 호출하는 것과 같은 효과를 가지게 됩니다
두번째는 점프 터 & 인데요 점 프 트 & 같은 경우에는 애니메이션을
중간에 중지 할 것인지 아니면은 애니메이션에서 추정한 최종 상태로 변경을
할 것인지를 지정을 하게 됩니다
모유 녀석을 한번 투르 로 지정을 해 보도록 하겠 꾸 요 요 녀석을 조금
간략하게 만들어서 지금 화면처럼 경 경 을 해보도록 하겠습니다
어쨌거나 요렇게 저장을 하고 실행을 하게 되면
클릭을 할때 변경 이 될 건데요
뉴 변경되는 중간에 다시 한번 클릭을 해 보도록 하겠습니다
클릭을 연속으로 하게 되면 점프 트렌드를 우리가 치료를 뭐 되기 때문에
최종 상태로 탁탁 바뀌게 될 것입니다
한번 상콤하게 클릭을 해 보도록 하겠는데요 클릭을 촉촉함 연 애니메이션이
바로 진행이 되는게 아니라 곧바로 최종적인 상태로 변경되는 모습을 확인할
수 있습니다
이렇게 스타 메서드의 매개 변수 두가지를 기억을 해 주시면 좋겠습니다
어쨌거나 애니메이션과 관련된 마지막 메서드는 딜레이 메서드 되겠는데요
딜레이 메써드 같은 경우에는 애니메이션 사이에 대기 간격을 주는 것이라고
생각을 해 주시면 좋겠습니다
예를 들어서 애니메이트 를 한번 호출하고
딜레이를 한번 호출하고 그 다음에 애니메이트 를 한번 더 호출하는 형태로
코드를 작성해 보도록 하겠습니다
이때 뭘 엑트 를
음 플러스 2 콜 100정도 주도록 하게 9 0 1초 동안 이동하기
하겠습니다
마찬가지로 두 번째 애니메이트 메서드 도 이렇게 지정을 하겠구요 딜레이
메서드의 매개 변수에는 주 레이 션 넘버를 입력을 하게 되는데 이제 줄의
이전을 1
1초 정도로 떠서 1초 동안 댁 이야기 하겠습니다
요렇게 코드를 저장을 하고 실행하게 되면
1초 동안 레스트 가 움직이고 정제를 1초 동안 했다가 다시 1초에
움직이는 모습을 확인할 수 있습니다
중간에 딜레이가 들어갔다는 점 이것만 기억을 해 주시면 되겠습니다
지금까지 제이쿼리 를 사용한 애니메이션에 대해서 살펴보았는데요 요
녀석들을 활용 하시게 되면 일반적인 웹 사이트에서 사용되는 대부분의
애니메이션을 쉽게 구현 하실 수 있을 겁니다
참고적으로 이상이 애니메이션들 예를 들어서 지금 화면을 보시게 되면 크롬
엑스페리먼트 에서 제공을 하게 되는 html 예제 중의 하나인데요
마우스를 움직이게 되면 이 3d 로 그 개체들이 1 움직이는 모습을 볼
수 있는 예제입니다 녹화 하면서 찍으니까 더럽게 끊기기 는 하는데요
어쨌거나 저런 녀석은 어떻게 구현 하는지 궁금하실 수 있는데요 전
녀석들은 애니메이트 메서드로 구현을 하는게 아니라 우리가 이전에 문서
기체 모델을 배울 때 3 인터벌 암소 라던지 등을 사용을 하면서 그냥
1초에 30 프레임 씩 움직이면서 화면에 있는 기체를 하나하나 조절을
했죠
그러한 형태로 사용하는 겁니다 j 꼬리 같은 경우에는 일반적이고 범용적인
웹사이트를 만들 때 사용되는 라이브러리 이기 때문에 저런걸 만드는 것과는
관계가 없다는 걸 기억을 해 주시면 좋겠습니다
뭐 관계가 아이 없다고는 또 알 수 없지만 그렇게 큰 연관성은 없다 라고
생각을 해 주시면 좋겠습니다
어쨌거나 지금까진 제이쿼리 를 사용한 다양한 내용에 대해서 알아보았는데요
다음 강의에서는 간단하게 파인드 메서드에 대해서 살펴보고 실제 범용적인
웹 사이트에서 사용되는 내용들을 하나하나 구현하는 방법을 살펴 보고
연습하는 방법들을 살펴보도록 하겠습니다
이전에 언급했듯이 프로그래밍 언어 라던지 라이브러리 의 사용법은 도구의
사용법을 익히는 것 뿐이에요 그래서 이 도구를 어떻게 활용할 지에 대해서
이제 다음 강에 부터 간단하게 조금 살펴 보도록 하겠습니다
어쨌건 오늘 강의는 여기까지 되겠구요 다음 강의에서 뵙도록 하겠습니다
감사합니당.

댓글 0개

등록된 댓글이 없습니다.

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권, 강의등록, 광고, 제휴등은 "관리자에게 문의"로 메세지 주시면 확인후 답변드립니다.

Menu