animation 비교


js vs jQuery vs CSS3





<HTML>




<CSS>






<화면> 





1. js (setInterval) 

: 길고 어렵고 만들기 귀찮은 점이 있다. 








2. jQuery (animate) 









3. CSS3 (transition) 


: CSS에서 다 만든 후 js 파일에서 event를 감지하고 class를 추가한다. 


<CSS>


<JS>











< jQuery vs CSS3 >




1. 크로스브라우징 : jQuery가 용이하다. (낮은 버전의 브라우저도 안정적으로 지원해줌)

2. 속도( 퍼포먼스) : jQuery < CSS3 (jQuery) jQuery는 라이브러리의 도움을 받는다. CSS는 자체 웹킷 사용 

3. 관리 

- jQuery : HTML, CSS, 동작 다 따로 관리해줘야 함 

- CSS3 : CSS파일 안에서 스타일과 동작을 다 관리한다. js는 이벤트만 감지함

4. 생산성 : jQuery  < CSS3





저작자표시 비영리 동일조건 (새창열림)

'프론트엔드' 카테고리의 다른 글

<bracket> bracket power mode (코딩 질리지 않고 하기)  (0) 2017.08.10
(1) 프론트엔드 오리엔테이션  (0) 2017.05.22

* 자바스크립트를 활용한 애니메이션 * 

- setInterval(함수,시간) : 매 '시간'마다 '함수'를 실행시킨다 

(~시간에 한번 함수 실행)

-setTimeOut : '시간'이 경과하면 '함수'를 한 번 실행시킨다. 

-clearInterval(변수) : interval을 없애준다 



* 시간단위 : 1ms (1000ms = 1s)

*순서대로 개발하는것 : 절차지향 프로그램이 (<-> 객체지향 프로그래밍)



<HTML>




(+) CSS의 transition과 비교할 때 사용할 태그




<CSS>




<화면>







* setInterval을 이용해 1초마다 숫자가 바뀌는 초시계 만들기 * 



1. 변수 지정해놓기 






2. 초시계의 시간을 나타낼 num 변수 







3. setInteval 

1초에 한번 clock의 innerHTML을 1씩 늘린다.

(F5누르면 바로 실행)






4. 시작 버튼을 눌렀을 때 실행하도록 addEventListener 안에 넣어준다.



-> 버튼을 누를수록 Interval이 중첩되므로 숫자가 커지는 속도가 점점 빨라진다. 





5. 속도가 빨라지는 것을 방지하기 위해 버튼을 누를 때마다 이전에 실행되고 있던 Interval을 지우도록 clearInterval 

clearInterval은 변수가 필요하므로 변수를 만들었다. 

저렇게 변수에 넣으면서 setInterval을 해도 실행된다


move를 setInterval을 실행하면서 만들면 clearInterval 에서 오류가 나므로 밖에 미리 만들어 두었다. 





6. 정지를 눌렀을 때 시계가 멈추는 동작

clearInterval




7. num=1으로 초기화 해주면 정지하고 다시 시작할 때 초시계가 처음부터 돌아가게 된다. 








*응용 : 이동 버튼을 누르면 시계가 오른쪽으로 200px 이동하게 하기*











* 이동 응용을 css transition으로 나타냈을 경우 * 


<CSS>



<JS>



훨신 간단하다 ^.^ 


저작자표시 비영리 동일조건 (새창열림)

'프론트엔드 > JavaScript' 카테고리의 다른 글

<JS> 스코프(scope) (호이스팅, es6 변수)  (0) 2017.09.01
<JS es6> let, const, 변수명 만으로 선언하기  (0) 2017.08.25
<JS> 유저의 행위(event) (4) input form  (0) 2017.08.11
<JS> 유저의 행위(event) (3) 스크롤  (0) 2017.08.11
<JS> 유저의 행위(event) (2) 키보드  (0) 2017.08.11

+ Recent posts

티스토리툴바