화면전환 애니메이션 만들기

E-book을 주제로한 사이트니 책이 넘어가는건 아니어도 다음장으로 넘어간다는 느낌을 주는 애니메이션을 만들고 싶었다.
며칠 동안 화면전환 애니메이션을 찾아보다가 책을 한장 뜯어서 넘기는 듯한 애니메이션을 발견했고 그걸 적용해 보기로 했다.

/* rotate fall */

.pt-page-rotateFall {
	-webkit-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-animation: rotateFall 1s both ease-in;
	animation: rotateFall 1s both ease-in;
}


@-webkit-keyframes rotateFall {
	0% { -webkit-transform: rotateZ(0deg); }
	20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
	40% { -webkit-transform: rotateZ(17deg); }
	60% { -webkit-transform: rotateZ(16deg); }
	100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@keyframes rotateFall {
	0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
	20% { -webkit-transform: rotateZ(10deg); transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
	40% { -webkit-transform: rotateZ(17deg); transform: rotateZ(17deg); }
	60% { -webkit-transform: rotateZ(16deg); transform: rotateZ(16deg); }
	100% { -webkit-transform: translateY(100%) rotateZ(17deg); transform: translateY(100%) rotateZ(17deg); }
}

@keyframes scaleUp {
	from { opacity: 0; -webkit-transform: scale(.8); transform: scale(.8); }
}

애니메이션을 적용하면서 다음페이지로 넘어가기

애니메이션을 적용하는건 어렵지 않았지만 문제는 이애니메이션을 적용한다고 다음페이지로 넘어가는 것은 아니었다는 것이다
그래서 ajax를 활용해 다음페이지로 넘어가는 듯한 착각을 주기로 했다.

 <section id="One">
            <article id="header-area">
                <div id="title-area">
                    ${bookTitle }
                </div>
            </article>
            <article id="main-text" class="container">

                <div id="step-title">
                    ${obSeries.seriesNo }. ${obSeries.title }
                    <c:if test="${obSeries.checkPermission == 'N'}"> <!-- 승인되지 않았을시 메세지 -->
                    	<br><b> 이 시리즈는 승인되지 않았습니다</b>
                    </c:if>
                    <c:if test="${obSeries.status == 'N'}"> <!-- 승인되지 않았을시 메세지 -->
                    	<br><b> 이 시리즈는 삭제되었습니다.</b>
                    </c:if>
                </div>
                <div id="contents-area">
                    ${obSeries.contents }
                </div>

            </article>
         
        </section>
        
           <section id="next-button-area">
            	<img src="/resources/img/book/icons8-open-book-64.png" id="book-button" alt=""onclick="location.href='/book/bookStep.do?bookNo=${obSeries.bookNo}&category=origin'">
            	<img src="/resources/img/book/icons8-twoleft.png" id="prev-button" alt="">
                <img src="/resources/img/book/icons8-twoTop.png" id="top-button" alt="" onclick=" window.scrollTo(0,0);"> 
                <img src="/resources/img/book/icons8-tworight.png" id="next-button" alt=""> 
                 
            </section>
        
         <section id="two" style="display:none;">
            <article id="header-area" class="header-area2">
                <div id="title-area" class="title-area2">
                    
                </div>
            </article>
            <article id="main-text" class="container main-text2">

                <div id="step-title" class="step-title2">
                    

                </div>
                <div id="contents-area" class="contents-area2">
                    
                </div>

            </article>
            <article class="container" id="next-button-area">
                 
            </article>

        </section>

이렇게만 보면 무엇인지 모르겠지만,

• one이라는 section안에 도서의 내용을 채우두었다.
• 똑같은 구조의 two라는 section을 만들어 내용을 비워두었다,
• two는 css에서 display:none을 처리해 안보이도록 만들었다.
• one background를 white로 설정한다.
• two를 position:absolute로 만든뒤 z-index를 낮춰서 one뒤에 오도록한다.

ajax활용하기

• 이와같은 방식으로 만약 다음화를 선택한다면 아래의 내용이 진행되도록 했다
  • 비어있는 two안에 ajax를 통해 다음화의 내용을 불러온다.
  • two를 display:block으로 처리한다.
  • One을 display:none으로 처리한다.
  • 애니메이션이 자연스럽게 보이기 위해 스크롤을 무조건 top으로 이동하도록 처리한다.
  • setTimeOut을 활용해 애니메이션이 끝난 뒤 다음화로 페이지가 넘어가게 만든다.

//다음화가 진행되는 애니메이션
	function nextAnimation(seriesNo){
		
		document.querySelector('#One').style.transformOrigin="0% 0%";
				
		document.querySelector('#One').style.animation="rotateFall 0.8s both ease-in";
		document.querySelector('#two').style.animation="scaleUp .6s ease both";
				
		setTimeout(function(){	
			document.querySelector('#One').style.display='none';			
			location.href="/book/NordetailSeries.do?bookNo="+bookNo+"&seriesNo="+seriesNo;
		}, 800);

		 			
		 	}


//다음화를 처리하는 ajax함수
document.querySelector('#next-button').onclick=function(){

	 $.ajax({
	 url:"/book/NornextSeires.do",
	 type:"get",
	 data:{"bookNo":bookNo,"seriesNo":seriesNo},
	 success:function(result){
		 if(result=="no:end"){
		 	 alert('마지막 화 입니다.');
		 }else if(result==""){
			 alert('로그인하세요'); 
		 }else{
			 window.scrollTo(0,0);
			document.querySelector('.header-area2').style.backgroundImage="linear-gradient(to bottom,rgba(232, 232, 232, 0),rgba(255, 255, 255, 1)),url('/resources/bookImg/"+result.subpicRename+"')"
		 	var bookTitle =result.bookTitle;
		 	var subTitle = result.seriesNo+'. '+result.title;
		 	var contents = result.contents;
		 	$('.title-area2').html(bookTitle);
		 	$('.step-title2').html(subTitle);
		 	$('.contents-area2').html(contents);
		 	document.querySelector('#two').style.display='block';
			
			if(window.scrollY>0){ //스크롤이 있다면 스크롤실행후 다음화 넘김
			window.addEventListener('scroll', function(){
				 if(window.scrollY == 0){//스크롤이 전부 올라왔을때
				nextAnimation(result.seriesNo)
				}
				})
			}else{ //없으면 바로 넘김
			nextAnimation(result.seriesNo);
			}
			
		
		 	
		 }
	 },
	 error:function(){
	 	alert('시스템오류, 오류가 반복되면 관리자에게 신고하세요');
	 }
	 
	 })


}

실행결과

ajax와 애니메이션을 활용하여 다음페이지로 전환하는듯한 착각을 주는 방식의 페이지 전환 설정법이었다.