윤인성 모던 웹을 위한 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개

등록된 댓글이 없습니다.

Total 83건 1 페이지
썸네일
제목

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

저작권에 문제가 있는 자료일 경우 "관리자에게 문의하기"로 신고해 주시면 즉시 삭제처리하겠습니다.

Menu