새소식

인터넷/티스토리 꾸미기

티스토리 컨텐츠 페이드 시키기

  • -

티스토리 꾸미기 - 컨텐츠 페이드 인

지금 현재 블로그를 보면 클릭해서 들어가는 컨텐츠들이 페이드 되어 보여질 것이다. 컨텐츠를 페이드 시키게 되면 다시한번 사용자에게 컨텐츠에게 재 집중시키게 할 수 있는 좋은 방법이라 생각이 든다. 너무 조금만 느리게 설정이 되도 바로 지루함과 답답함을 느끼게 되지만 0.3~0.5초 정도의 페이드라면 충분히 사용자를 편하게 해줄수 있는 좋은 기법이다. 왠지 어려울것 같지만 생각보다 굉장히 간단한 방법으로 할 수 있다. 한번 알아보도록 하자.

복사할 CSS 코드 - 반응형 #1스킨용


#dkContent  {     
animation: fadein 1s;     -moz-animation: fadein 1s; /* Firefox */     -webkit-animation: fadein 1s; /* Safari and Chrome */     -o-animation: fadein 1s; /* Opera */ } 
@keyframes fadein {     from {         opacity:0;     }     to {         opacity:1;     } }  @-moz-keyframes fadein { /* Firefox */     from {         opacity:0;     }     to {         opacity:1;     } }  
@-webkit-keyframes fadein { /* Safari and Chrome */     from {         opacity:0;     }     to {         opacity:1;     } }  @-o-keyframes fadein { /* Opera */     from {         opacity:0;     }     to {         opacity: 1;     } } 

자신의 블로그의 전체 컨텐츠를 담당하는 div 클래스를 찾아야 한다.

위의 코드를 복사했다면 티스토리 관리자 모드에서 CSS에 적당한 곳에 붙여 넣었다면 저장하면 끝이다. 굳이 수치를 변경하겠다면 첫줄에 fadein 1s라고 써있는 부분인데 이 부분을 보면 페이드가 1초라는 것이다. 이 수치를 변경해 가면서 자신이 원하는 속도를 찾을 수 있다. 개인적으로는 굳이 변경안하는 것을 추천한다.

참고로 다른 스킨을 이용하는 분들은 제일 처음 나오는 #dkContent 이부분이 지금 이 스킨에서 전체 뷰를 담당하는 id 값인데 이 값을 각자의 스킨에 맞게 변경만 해주면 페이드 효과를 볼 수 있을 것이다.

티스토리 관리자모드
관리자 모드에서 스킨편집 - html 편집을 누르자

필자는 반응형 #1 스킨을 사용하고 있는데 다른 스킨은 확인해봐야 하므로 우선 필자와 같은 스킨을 쓰는 분들에게는 바로 도움이 될것이고 스킨 편집좀 해보셨다 하시는 분들 역시 아주 쉽게 적용하실 수 있을 거라 믿어 의심치 않는다.

CSS 탭을 누르도록 하자

티스토리 스킨에 대해서

자 그럼 이제 이 코드를 css에서 적당한 곳에 붙여 넣으면 될텐데 제일편하게 최 상단에 넣어도 되고 중간쯤에 자신이 알아볼 수 있을 나중에 수정하거나 삭제 할 수 있을 곳에 붙여 넣도록 하자. 그리고 확인해본 결과 모바일 관련해서 css가 작동이 되지 않는데 지금 반응형 #1스킨을 사용하는 유저는 티스토리 모바일웹을 사용하지 않아도 되는데 그럴경우는 페이드 효과가 적용이 되며 어떤 이유로 티스토리 모바일웹 사용을 해야만 한다면 현재로서는 딱히 방법이 없다. 있다 하더라도 좀 복잡할 듯 하다.

지금 반응형 스킨을 쓴다면 굳이 쓸필요는 없다.

필자는 아무 생각없이 그냥 티스토리 모바일을 사용하다가 반응형 스킨이라는 사실을 뒤늦게 깨닫고 모바일웹 자동연결을 끊었다. 잘 판단해서 사용 유무를 선택하는 것이 좋을 것 같다. 분명한건 티스토리 모바일 웹은 아쉬운점이 많다라는 것이다.
주의사항 : 다음애드핏을 사용하는 유저는 모바일웹 자동연결을 끊을 시 광고가 나오지 않는다. 필자도 계속 고민 중이다.

Contents

포스팅 주소 복사 완료😎

PC버전 공감은 상단에 있어요!😍