2016.07.02 13:50

fools


fools


저작자 표시 비영리 변경 금지
신고

웹 엘리먼트의 에니메이션등에 사용되는 유저 타이밍 정보에 활용되는 API에 W3C는 IE9이상부터 활용할수 있는 Performance API를 제공하고 있다.

(https://www.w3.org/TR/user-timing/)


IE8이전에 사용되던 Date.now()의경우 네트워크의 상황에따라 정확하지 않은 문제가 있다.

측정이 정확하지 않으면  원하는 에니메이션을 보여줄수 없다.


사실 이 API는 브라우저 로딩을 측정해 좀더 나은 접속환경을 제공하는데 목적을두고 만들어졌으나, 사용자의 입력에 따른 에니메이션을 보여주는데 지속(duration)을 지정하는경우 사용될수 있다.


먼저 해당링크를 읽어보고 어떤 API인지 확인할수 있다.


http://www.html5rocks.com/ko/tutorials/webperformance/basics/(한글)

http://www.html5rocks.com/ko/tutorials/webperformance/usertiming/(한글)

https://developer.mozilla.org/ko/docs/Navigation_timing(한글)

https://www.sitepoint.com/discovering-the-high-resolution-time-api/(영문)


간단하게 필요한 부분만 살펴보면


접속된 시점부터 performance 를 이용해 브라우저에 대기된 시간을 밀리초로 반환한다.


예를들어

로드가 끝난시점에


var start = window.performance.now();

를 호출하고 무언가 이벤트를 실행한후에 다시 실행해서 처음 값을빼면


var end = start - window.performance.now();

이벤트를 실행하는데 걸린 시간을 밀리초로 알수있다.



이점을 활용해서

사용자의 입력이 들어온시간을 마크하고 

setTime이나 requestAnimationFrame을 통해 에니메이션을 보여질 지연을 설정해서 원하는 시간만큼 에니메이션을 보여줄수 있다.



IE8이전에는 이 시점을 Date.now()를 이용했는데

같은 내용을 폴리필로 대체할수 있다.


https://gist.github.com/paulirish/5438650

https://gist.github.com/pmeenan/5902672



활용 예를보면


var target = document.getElementById('el');//엘리먼트를 선택하고 var startTime = null,//시작값 startVal, //초기값 endVal, //종료값 duration, //지연값 ani; //cancel하기위한 변수


function update(time){ if(startTime == null){ //함수를 실행해서 시작타이밍이 없으면 startTime = window.performance.now(); //시작타이밍 설정하고 } ani = requestAnimationFrame(update) //값을바꾸기위한 에니메이션을 반복실행하는데 draw(0,300,1000,time)//실행할 액션 } function draw(st,end,duration,time){ //순서대로 시작값, 종료값, 지연값, requestAnimationFrame리턴 밀리초 if (!!time == false || time <= st) { // 0밀리초부터 실행하는데 console.log("too low"); return; } var elap = (time - startTime) / duration; //100분율로 완료를 확인한다 elap = elap > 1 ? 1 : elap; // 1이면 100%를 의미 value = elap;//값을 설정하는데 elap에 easeing등을 이용할수있을듯 target.style = ("top:" + (value*end) +"px"); //엘리먼트의 top을 바꿔보다 if( elap === 1){ //100%가 되면 끝내야겠지 startTime = null; //시작값을 초기화하고 cancelAnimationFrame(ani) //에니메이션은 끝낸다. return; } console.log(time - startTime,duration) //duration까지 남은시간을 보자, duration도 console.log(elap) // 100%될때까지얼마나 남았는지 console.log(value) // 값은 얼마가 되었는지 }

내가 지연을 설정할때 이런식으로 에니메이션 되는데 지금 얼마나 지났는지

알게 할수 있다.


지연시간이 완료될때 내가설정한 elap값도 100%가 되어 1이 되므로

시간에 맞게 에니메이션일 종료되게 할수있다.


이 elap값에 easing을 이용하면 다양한 에니메이션을 줄수있다.


플래시등의 TWEEN이나 JQUERY의 animate 함수도 같은 방식을 활용하고있다.

tx.timing에 performance를 이용한다.


플래시의 부드러운 움직임(easing)에 이용되는 함수

시작점, 끝나는 시간, 시작값, 반영될값 등 설정하는 함수를 이용하면 에니메이션.js를 제작할수 있겠다.


예를들어 캔버스에 easing을 이용해 그래프를 그려보면



See the Pen OXmdWZ by ishaiin (@ishaiin) on CodePen.


저작자 표시 비영리 변경 금지
신고


현재 티스토리에서 발행관련해서 API를 변경함에따라


http://notice.tistory.com/2324


RSS를 이용하는 리뉴얼 전 스킨 이용자에게 무한 새로고침 현상이 생겼습니다.



스킨3, 스킨5 이용자분들은 이전 스킨말고 새로 전달드린 스킨을 설치해이용

부탁드립니다.

( 메일 전달드렸으나 구매시 이메일이 변경된분들에겐 메일전송 실패로 전달드리지 못했습니다. )


스킨6, 스킨10 이용자 분들께는 몇가지 테스트 후

변경된 API 따른 스킨을 다시 전달 드리겠습니다.



*0528


현재 RSS에대해 티스토리에서 수정된내용을 다시 원복하여 몇가지가 복구되었으나

속도가 현저하게 느려진 문제를 가지고 있습니다.


위 공지 링크(http://notice.tistory.com/2324)에서 추가로 티스토리에서 전달한 말대로

RSS이용하지 않는 HTML주소로 개별 파싱하는 스킨을 다시 제작할 계획입니다.


동영상컨텐츠 썸네일이 필요없는경우 가능하면 서버에서 이미지를 제공하는

리뉴얼 스킨을 이용을 부탁드립니다.


*0530


속도가 어느정도 정상화 되었습니다.

현재 스킨3을 제외하고 RSS이용에 문제가 없어보입니다.



감사합니다.

저작자 표시 비영리 변경 금지
신고

  • BlogIcon leekihwan 2016.05.27 10:34 관리자의 승인을 기다리고 있는 댓글입니다

스킨 리뉴얼 배포안내입니다.


현재 티스토리 API가 계속적으로 변하고있고 3개월전부터 서버측 치환자

그리고 프론트단의 개선작업이 계속적으로 진행중입니다.


변경 및 수정점이 지속적으로 진행중이라 

아직 스킨을 수정해서 전달 드릴 경우 문제가 있어 대응이 어렵습니다.


변경된 API에 맞춰 테스트를 진행하고 안정화되는대로

기존스킨(이전치환자 - 커스텀플러그인)과

리뉴얼스킨(새로운치환자 - 티스토리API, 디자인과 기능개선)을

재배포 드릴예정입니다.


배포이후 기존스킨은 기능문제 외 대응은 진행하지 않을예정입니다.


리뉴얼스킨은 국내 사용자 브라우저 점유율 기준(IE8이상과 모바일, 태블릿)으로 호환성을

확인 예정입니다.


배포는 구입시 전달주신 메일로 다시 안내 드리겠습니다.

기존에 구입하신경우 재구매하실 필요없습니다.


스킨3,스킨5에대해 배포드렸습니다.


-05/22 스킨3, 스킨5 수정 사항에 대해 보호글에 추가로 작성했습니다.


-06/05 스킨6 수정사항에 대해 보호글에 추가 작성 했습니다.


감사합니다.


저작자 표시
신고

티스토리 이미지서버의 경로가 절대경로에서 상대경로로

http://~~~~

에서

//

로 일괄적으로 변경되어 스킨이 작동하지 않은현상이 있었습니다.


아래 스크립트 파일로 해당 스킨에 맞게 다시 업로드해주시고 문제가 있을경우 메일 부탁드립니다.

스킨을 커스텀 설정한경우도 있어 수정된부분을 전달드립니다.


아래 정규식의 다음 이미지서버 주소와 경로처리를 //로 처리함에따라 http: 부분이 삭제되었습니다.


수정된부분은

스킨에따라 각각의경우 http: 부분을 삭제하였습니다.


       targetReg: /http:\/\/.+images\//


또는


       targetReg = /http:\/\/.+skin\//g,

(스킨 10의 디스커스의 아이디의경우 별도 설정이 필요합니다.)

아래는 해당 스킨에따른 스크립트 변경파일입니다.



skin3.zip


skin5.zip


skin6.zip


skin10.zip




수정이 원활하지 않으시거나 문제가 계속될경우 메일 연락 부탁드립니다.

감사합니다.

저작자 표시 비영리 변경 금지
신고

안녕하세요. 정명입니다.


디스커스는 스킨10에 추가되었습니다. 스킨6에 적용할수 있는 방법에대해

설명드리겠습니다.






스킨6에 보면 위처럼 코맨트 영역이 있습니다.

<s_rp> 로 시작되는부분이고 </s_rp>부분이 끝부분입니다. 100줄이 조금 넘네요.(저는 폴더식으로 접어서 2줄로보입니다.)


<s_rp>로 시작하는부분은 하단에 한개가 더 존재하는데 이부분은 방명록부분입니다.


왼쪽의 HTML태그를 오른쪽으 태그처럼 수정합니다.

(아래 첨부파일 참조)


상단의 <s_rp> 를 위처럼 cmtArea라는 div로 씌워주고 토글버튼을추가하여

'티스토리 코멘트' 와 '디스커스' 를 토글하여 화면에 표시하게 합니다.







추가로 첨부파일에 추가된 스타일 적용파일과 토글버튼을 지원하는 스크립트파일을 추가해준다음

파일을 자신의 디스커스 아이디에 맞게 수정후 업로드해주시면 됩니다.

(아래 첨부파일 참조)







아래는 첨부 파일입니다.


disqus.zip






저작자 표시 비영리 변경 금지
신고

최근 다음 티스토리 별도의 공지없이 API 변경의 이유로

카테고리가 넓게 보이는 현상이생겼습니다.

(내부 카테고리에 동일한 클래스가 더 추가되었습니다.)


해당 문제에대해

블로그주소/admin/skin/newedit/


의 CSS부분 최하단에


스킨3의경우

.header .category_list .category_list{

padding: 0;

}


스킨5의경우 

.sidebar_wrap .category_list .category_list{

padding: 0;

}


스킨6의 경우

.sidebar_wrap .category_list .category_list{

padding: 0;

}


스킨 10의경우


.mCustomScrollBox  .mCustomScrollBox{

padding: 0;

}

#wrap #header .category .category_list .category_list{

margin: 0;

}



를 추가해주시면 다시 정상으로 돌아옵니다.

문제가 발생하시는분들은 위 내용을 추가해주세요.


혹시 적용이 어려우시거나 다른 문제가 있으신분은 꼭 메일 부탁드립니다.

감사합니다

저작자 표시 비영리 변경 금지
신고

티스토리 스킨 가작10은 기본타입으로 일반블로그에 적합한 스킨 입니다.


개인형 블로그, 포트폴리오 블로그(순차적 리스트), 개인다이어리등

여러방면으로 활용가능한 미디엄스타일 블로그 목록 방식의 스킨입니다.


글이나 사진이나 음악 동영상등 자기의 관심이되는 내용이 리스트에 표시되며

(사진의경우 첫 등록이미지)


화면폭은 100%, 글내용은 960을 기준으로 하였습니다.

모바일 기기나 다양한 크기의 기기에 대응합니다.


메인화면은 유투브, 비메오 사운드클라우드등 미디어 컨텐츠를 아이콘으로 표시

속도이슈를 없애고 카테고리에서 직접 노출설정을 가능하게 합니다.


간결한 편의성 UI를 제공합니다.


PC웹(IE8이상), 모바일을 지원합니다.


(플러스의경우 티스토리API를 사용하며 영상,음악 플러그인의 썸네일이 표시되지 않습니다.

재디자인 되었으며, 반응형입니다.)



 구매하기






가작10(영상썸네일지원)


http://skinten.tistory.com/


가작10 리뉴얼(티스토리API이용, 영상썸네일 미지원)


http://skintenplus.tistory.com/


설치가이드:


http://ishaiin.com/notice/135


배포문의:


http://ishaiin.com/notice/143


관련문의는 메일(ishaiin@ishaiin.com)연락 바랍니다.







저작자 표시 비영리 변경 금지
신고

검색할 '단어'를 입력하시고, 엔터를 눌러 주세요.