[티스토리]CCZ-CROSS 스킨 preloader 로딩 이미지 CSS로 변경

[티스토리]CCZ-CROSS 스킨 preloader 로딩 이미지 CSS로 변경

오늘은 뭔가 포스팅 제목처럼 대단한건 아니지만 엄청난 것을 해보겠습니다.

흉내내기님이 제작하신 CCZ-CROSS 스킨은 몇가지 옵션을 설정 할 수 있는 트리거가 있습니다.

스킨 옵션 설정


var setting = {

	activeCate: true,    //현재카테고리위치 표기 
	autoLink: false,      //댓글,방명록 자동링크
	extendThumb: false,  //썸네일 확장
	newIcon: true,    	 //new 아이콘 변경여부
	preloader: true,    //프리로드 활성화
	searchTag: true,  	 //검색시에 우선순위태그를 보여줌
	searchTagCount: 8,   //보여줄 우선순위태그 갯수
	tbHide: true,        //트랙백숨기기
	timeChange: false    //포스트,댓글,방명록 날짜표기 변경 
	
}

preloader

해당 스킨은 스크립트로 변경되는 부분이 존재하며, 이를 콘텐츠가 노출된 상태에서 변경되는 과정을 감추기 위해서 FOUC 처리가 기본으로 적용되어 있습니다. 다만, 로딩이 길어질 경우 빈 화면을 노출하고 있기에 기호에 따라 로딩 이미지로 대체할 수 있도록 이 옵션을 제공합니다. 활성화하면 페이지 로딩시에 아래와 같은 이미지가 제공됩니다.

라고 설명이 되어있습니다.

그런데 사용을 해보니 블로그 형태가 한번 나타나고

콘텐츠 내용이 불러오기 전에 로딩 화면이 전환 되었다가

다시 로딩완료 후 페이지가 보이기 때문에

시각적으로 기존의 preloader 비활성화 할때보다

더 로딩이 더 오래 걸리는 것처럼 걸리는 것 처럼 느껴졌습니다.

그렇게 비활성화를 하던 도중

gif 아이콘을 찾다가

CSS로 만들어진 loading 효과를 찾게 되었습니다.

See the Pen flat loading animate by wenbin zhou (@wenbin5243) on CodePen.

그래서 기존의 preloadr.gif 파일을 css로 변경해보자고 생각하고 수정을 진행하게 됩니다.

저는 5번째 로딩 이미지로 변경하기 위해서

우선 CSS를 수정 해주었습니다.

스킨 파일에 저장 되어있는reset.css파일을 열어줍니다.

그리고 해당 부분을 찾아 줍니다. 그리고 /* 양끝에 주석 */ 처리를 해줍니다.

파일 업로드에 관련한...

따로 언급 되지 않아도 모든 파일은 [HTML/CSS 편집]->[파일업로드]에서 다운로드 후 수정이 완료 되면 꼭 다시 업로드로 갱신

reset.css 찾아서 주석처리 할 부분


.loading-fixed{position:fixed;left:0;top:0;width:100%;height:100%;background:#fff url('./preloader.gif') no-repeat center;opacity:1;filter:alpha(opacity=100);z-index:99999;}.loading-fixed img{position:absolute;top:50%;left:50%;margin-left:-47px;margin-top:-36px;}
/* 위 부분을 찾아서 아래 처럼 양끝에 주석 처리를 해줍니다. */
/*.loading-fixed{position:fixed;left:0;top:0;width:100%;height:100%;background:#fff url('./preloader.gif') no-repeat center;opacity:1;filter:alpha(opacity=100);z-index:99999;}.loading-fixed img{position:absolute;top:50%;left:50%;margin-left:-47px;margin-top:-36px;}*/

그리고는 위 로딩 CSS 이미지 코드에서 CSS부분에서 .loading 5클라스 네임이 적힌 코드를 전부 갖고 와서

.loading 5를 모두 .loading-fixed 바꾸어 줍니다.

그리고 꼭 z-index:1;값을 주어서 로딩 CSS 이미지가 제일 위에 올라 올 수 있게 해줍니다.

사실z-index:1; 속성을 몰라서.. 다른 것을 전부 해결해 놓고 한참을 찾았습니다.. ㅠ_ㅠ

loding-fixed로 클래스 네임을 고치고 reset.css에 붙혀넣기 해야 하는 것


.loading-fixed{
  width: 40px;
  height: 40px;
  z-index: 1; /*직접 입력 해주어야 합니다*/
  transform:rotate(45deg);
  animation:loading-fixed-ani1 3s ease-in-out infinite;
}
.loading-fixed i{
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 50%;
  position:absolute;

}
.loading-fixed i:nth-child(1){
  background: #ff5954;
  transform:translate(0,50px);
  animation:loading-fixed-ani2 3s ease-in-out infinite;
}
.loading-fixed i:nth-child(2){
  background: #1f4c59;
  transform:rotate(90deg) translate(0,50px);
  animation:loading-fixed-ani3 3s ease-in-out infinite;
}
.loading-fixed i:nth-child(3){
  background: #00b39f;
  transform:rotate(180deg) translate(0,50px);
  animation:loading-fixed-ani4 3s ease-in-out infinite;
}
.loading-fixed i:nth-child(4){
  background: #ffb364;
  transform:rotate(270deg) translate(0,50px);
  animation:loading-fixed-ani5 3s ease-in-out infinite;
}
@keyframes loading-fixed-ani1{
  25%{
    transform:rotate(135deg);
  }
  50%{
    transform:rotate(225deg);
  }
  75%{
    transform:rotate(315deg);
  }
  100%{
    transform:rotate(405deg);
  }
}
@keyframes loading-fixed-ani2{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    transform:translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    transform:translate(0,35px);
  }
}
@keyframes loading-fixed-ani3{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    transform:rotate(90deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    transform:rotate(90deg) translate(0,35px);
  }
}
@keyframes loading-fixed-ani4{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    transform:rotate(180deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    transform:rotate(180deg) translate(0,35px);
  }
}
@keyframes loading-fixed-ani5{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    transform:rotate(270deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    transform:rotate(270deg) translate(0,35px);
  }
}

그리고 위 코드를 아까 주석 처리한 부분 뒤에 붙혀주면 됩니다.

바로 붙혀넣기를 해도 상관이 없지만 reset.rss 코드 압축 처리가 되어있기 때문에

http://refresh-sf.com/

위 CSS 코드를 압축 해서 붙혀 넣기를 하면 더욱 좋습니다.!

압축 처리된 CSS 코드 위와 동일한 코드입니다.


.loading-fixed{width:40px;height:40px;z-index:1;transform:rotate(45deg);animation:loading-fixed-ani1 3s ease-in-out infinite}.loading-fixed i{width:40px;height:40px;display:inline-block;border-radius:50%;position:absolute}.loading-fixed i:nth-child(1){background:#ff5954;transform:translate(0,50px);animation:loading-fixed-ani2 3s ease-in-out infinite}.loading-fixed i:nth-child(2){background:#1f4c59;transform:rotate(90deg) translate(0,50px);animation:loading-fixed-ani3 3s ease-in-out infinite}.loading-fixed i:nth-child(3){background:#00b39f;transform:rotate(180deg) translate(0,50px);animation:loading-fixed-ani4 3s ease-in-out infinite}.loading-fixed i:nth-child(4){background:#ffb364;transform:rotate(270deg) translate(0,50px);animation:loading-fixed-ani5 3s ease-in-out infinite}@keyframes loading-fixed-ani1{25%{transform:rotate(135deg)}50%{transform:rotate(225deg)}75%{transform:rotate(315deg)}100%{transform:rotate(405deg)}}@keyframes loading-fixed-ani2{100%,17.5%,25%,42.5%,50%,67.5%,75%,92.5%{transform:translate(0,50px)}12.5%,37.5%,62.5%,87.5%{transform:translate(0,35px)}}@keyframes loading-fixed-ani3{100%,17.5%,25%,42.5%,50%,67.5%,75%,92.5%{transform:rotate(90deg) translate(0,50px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(90deg) translate(0,35px)}}@keyframes loading-fixed-ani4{100%,17.5%,25%,42.5%,50%,67.5%,75%,92.5%{transform:rotate(180deg) translate(0,50px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(180deg) translate(0,35px)}}@keyframes loading-fixed-ani5{100%,17.5%,25%,42.5%,50%,67.5%,75%,92.5%{transform:rotate(270deg) translate(0,50px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(270deg) translate(0,35px)}}

이제 다음은 main.js 를 열어줍니다.

main.js에서 찾아서 변경 해줘야 할 부분


	//옵션수행
	if (setting.preloader) { //프리로드
		var htmlStr = '<div class="loading-wrap"><div class="loading-fixed"></div></div>';
		$body.prepend(htmlStr);
	}

// 위 부분을 찾아서 아래처럼 로딩 CSS 이미지 HTML의 div 값으로 변경해줍니다.

	//옵션수행
	if (setting.preloader) { //프리로드
		var htmlStr = '<div class="loading-wrap"><div class="loading-fixed"><i></i><i></i><i></i><i></i></div></div>';
		$body.prepend(htmlStr);
	}

자 그러면 로딩 이미지가 정상적으로 구현이 되는 것을 알 수 있는데...

이번에는 위치가 말썽입니다. ㅠ_ㅠ

가장 좌측 상단에서 로딩이미지가 돌기 시작합니다.

jquery를 사용해서 div가 화면 정중앙에 올 수 있도록 아래 스크립트를 추가해줍니다.

div 클래스가 화면 정중앙에 올 수 있도록 해주는 코드 main.js에 붙혀넣기


 $( document ).ready(function() {
    $(window).resize();
 }); 
 $(window).resize(function(){
     $('.loading-fixed').css({position:'absolute'}).css({
         left: ($(window).width() - $('.loading-fixed').outerWidth())/2,
         top: ($(window).height() - $('.loading-fixed').outerHeight())/2
     });
 });