본문 바로가기

전체 글266

tweenMax에서의 yoyo 속성 GASP에의 tweenMax 애니메이션 기능 속성중에 yoyo 속성이 있다.지금까지 여러 애니메이션을 사용해 보면서 yoyo란 속성은 처음 받기에 한번 사용해 보았다.그런데 yoyo속성은 진행했던 애니메이션을 다시 되돌리는 속성이었다.말그대로 우리가 어릴때 즐겨했던 요요다. ㅋㅋ tweenMax의 여러 애니메이션 속성을 사용하고 있는데, 정말 유용한게 많다.그리고 삼성이 이 기업을 후원해주고 있어서 새삼 놀랐다.ㅅ. yoyo 속성에 대한 자세한 설명은 아래의 링크를 참조하면 된다. https://greensock.com/docs/#/HTML5/All/TweenMax/yoyo/ 2017. 6. 10.
GSAP에 대하여 2년전 GASP란 라이브러리에 대해서 찾아본적이 있다.본 라이브러리에는 HTML과 flash의 수많은 애니메이션 기능을 담고 있다.처음에 보고 너무 매력적이라 사용하려 했지만당시 회원제 유료였기에 사용을 접었었다. 지금 다시 사용해 보니 유료도 많이 풀리고 기능도 많아짐을 알 수 있었다.물론 라이선스 비용은 존재하는것 같다. 여튼 앞으로 본 라이브러리를 통해서 몇가지 작품을 많들어볼 생각이다.GASP 라이브러리는 다양한 기능에 비해 사용방법이 매우 간단하다. 자세한 정보는 아래의 링크를 참고하면 된다. http://www.beautifulcss.com/archives/2960 2017. 6. 10.
반응형 테이블 만들기 회사에서 만들고 있는 사이트에서 반응형 테이블을 만들일이 생겼다.지금까지 반응형 테이블을 만든적이 없기에 인터넷 검색을 해서 어떻게 만드는지 찾아보았더니 생각보다 어렵지 않았다.결론은 HTML의 before 속성을 사용하는 것이다.이를 위해 CSS의 설정이 필요하다.실제 구현한 것을 보면 이해가 빠르기에 아래의 링크를 걸어둔다. https://codepen.io/geoffyuen/pen/FCBEg 2017. 6. 8.
D3.js 데이터 업데이트, 선택자, 레이어구조의 중요성 D3.js 라이브러리를 쓰면 쓸수록 데이터 업데이트, 선택자, 레이어구조를 잡는것의 중요성에 대해 깨달아가고 있다.특히 최근에는 collapse 기능이 들어간 tree diagram을 만들기회가 있었는데,위 3가지를 능숙하게 다루어야 만들 수 있었다. 먼저 이벤트에 따라 데이터를 업데이트 하고 그에따라 enter, exit 선택자 함수를 이용하여 enter, update, exit의 함수를 설계한다.그리고 노드와 링크의 레이어 구조를 잡아서 화면에 나타내 준다.말로 설명해서 간단하지만 직접 처음부터 만들어야 하는 사람이 생각한다면3가지에 대한 제대로된 이해없이는 설계자체가 불가능하다. D3.js를 처음하는 분이라면 어느정도 함수를 공부하고조금 난이도 있는 시각화 결과물을 위의 3가지 관점에서 분석해 보는.. 2017. 6. 7.
D3.js enter, update, exit 함수 D3.js를 하다보면 DOM 할당에 있어서 enter, update, exit 함수를 쓰는 것을 볼 수 있다.처음 본 함수를 접하다보면 이해가 안 될 수 있지만D3.js를 계속 사용하다보면 이해가 조금씩 되기 시작한다.본 함수에 대한 자세한 설명은 아래의 링크에 잘 설명되어 있다. http://www.programkr.com/blog/MYjMwADMwYT0.html 2017. 6. 5.
이전페이지로 돌아가게 하는 함수 홈페이지를 만들다보면 어떠한 이벤트 발생시 뒤의 페이지로 가게 하는 기능이 필요하다.이를 위해 javascript에서는 location.replace(/* url 주소 */) 라는 강제 페이지 이동 기능을 제공하고 있으며,그 안에 변수로 document.referrer를 넣으면 바로 뒤의 페이지로 이동하게 된다. 더 자세한 설명은 아래의 링크를 참조하면 좋다. https://stackoverflow.com/questions/18518795/how-to-reload-previous-page-with-javascript 2017. 6. 1.
setInterval의 초반실행 방지 방법 이전에는 몰랐는데 jquery의 setInterval 함수가 초반에 먼저 실행되고,그 다음에 안의 함수를 실행시킨다는 것을 알게 되었다. 그래서 먼저 함수를 선실행 하려면 어떻게 해야 하는지 고민하게 되었다.원리는 간단했다. setInterval내에 들어가는 함수를 바깥의 함수로 선언하고,밭에다 한번 선언해주고 안해다 선언해주면 끝나는 문제였다. 이와같은 문제에 대한 질문과 해결책 샘플은 아래의 링크에 잘 나와있다. https://stackoverflow.com/questions/10563344/how-to-start-setinterval-loop-immediately 2017. 6. 1.
jquery 이벤트를 확실히 발생시키는 방법 가끔 jquery를 사용하다가 이벤트를 선언했음에도 발생이 되지 않을때가 있다.이러한 경우는 페이지 내에 이벤트가 물려있는 버튼의 태그가 없었다가 생겨나는 등의 다양하고 복잡한 문제에 의해 발생하는데,이러한 문제를 해결하고 언제나 이벤트를 발생시켜 주려면,아래의 함수를 선언해주면 된다. $(document).on('/* 이벤트이름 */', /* 이벤트객체(ex> '#app') */ , function() { /* 내용 */ }) 이와같은 문제에 대한 질문과 해결책 샘플은 아래의 링크에 잘 나와있다. https://stackoverflow.com/questions/1525664/jquery-how-to-bind-onclick-event-to-dynamically-added-html-element 2017. 6. 1.
웹내에서 동영상 지원 비디오코텍 웹페이지에 내에서 동영상을 띄울때 가끔 나오지 않는 영상이 존재한다.그럴때는 비디오코덱을 확인해보아야 한다.웹에서 지원하는 비디어 코덱이 정해져 있는데,아래의 링크에 잘 정리되어 있다. https://en.wikipedia.org/wiki/HTML5_video#Browser_support 흔히 H.264 코텍을 많이 지원해 준다. 2017. 6. 1.

티스토리툴바