소스코드 다운로드_javascript 기술을 활용하여 자바스크립트 기반의 아름다운 페이지 전환 애니메이션 효과 구현

페이지 왼쪽 메뉴를 클릭하면 해당 페이지가 슬라이딩 필터 애니메이션과 진행률 표시줄 효과와 함께 로드됩니다. 물론 페이지 로딩은 Ajax 기반이며 전체 로딩 전환 프로세스가 매우 원활하고 매우 좋은 사용자 경험을 제공합니다.

HTML

HTML 구조에서 .cd-main에는 페이지의 기본 콘텐츠가 포함되고, .cd-side-navigation에는 측면 탐색 표시줄이 포함되며, #cd-loading-bar는 진행률 표시줄 애니메이션에 사용됩니다.

<nav class="cd-side-navigation"> 
  <ul> 
    <li> 
      <a href="index.html" class="selected" data-menu="index"> 
        <svg><!-- svg content here --></svg> 
        Intro 
      </a> 
    </li> 
    <li> 
      <!-- ... --> 
    </li> 
    <!-- other list items here --> 
  </ul> 
</nav> <!-- .cd-dashboard --> 
<main class="cd-main"> 
  <section class="cd-section index visible"> 
    <header> 
      <div class="cd-title"> 
        <h2 id="Animated-Page-Transition">Animated Page Transition #2</h2> 
        <span>Some text here</span> 
      </div> 
      <a href="#index-content" class="cd-scroll">Scroll Down</a> 
    </header> 
    <div class="cd-content" id="index-content"> 
      <!-- content here --> 
    </div> <!-- .cd-content --> 
  </section> <!-- .cd-section --> 
</main> <!-- .cd-main --> 
<div id="cd-loading-bar" data-scale="1" class="index"></div> <!-- lateral loading bar --> 

CSS

페이지 왼쪽의 .cd-side-navigation을 수정하고 높이를 100%로 설정하여 오른쪽의 메인 콘텐츠를 스크롤하면 왼쪽 탐색 메뉴가 항상 왼쪽 사이드바를 차지하도록 했습니다. 내비게이션 메뉴가 움직이지 않습니다.

.cd-side-navigation { 
 position: fixed; 
 z-index: 3; 
 top: 0; 
 left: 0; 
 height: 100vh; 
 width: 94px; 
 overflow: hidden; 
} 
.cd-side-navigation ul { 
 height: 100%; 
 overflow-y: auto; 
} 
.cd-side-navigation::before { 
 /* background color of the side navigation */ 
 content: ''; 
 position: absolute; 
 top: 0; 
 left: 0; 
 height: 100%; 
 width: calc(100% - 4px); 
 background-color: #131519; 
} 
.cd-side-navigation li { 
 width: calc(100% - 4px); 
} 
.cd-side-navigation a { 
 display: block; 
 position: relative; 
} 
.cd-side-navigation a::after { 
 /* 4px line to the right of the item - visible on hover */ 
 content: ''; 
 position: absolute; 
 top: 0; 
 right: -4px; 
 height: 100%; 
 width: 4px; 
 background-color: #83b0b9; 
 opacity: 0; 
} 
.no-touch .cd-side-navigation a:hover::after { 
 opacity: 1; 
}

자바스크립트

왼쪽 메뉴를 클릭하면 TriggerAnimation() 함수가 호출됩니다. 이 함수는 로딩 진행률 표시줄 애니메이션 함수인 loadingBarAnimation()을 트리거한 다음 페이지 콘텐츠 함수인 loadNewContent()를 로드합니다.

function loadingBarAnimation() { 
  var scaleMax = loadingBar.data('scale'); 
  if( scaleY + 1 < scaleMax) { 
    newScaleValue = scaleY + 1; 
  } 
  // ... 
   
  loadingBar.velocity({ 
    scaleY: newScaleValue 
  }, 100, loadingBarAnimation); 
}

새 페이지를 선택하면 새 요소인 .cd-section이 생성되어 DOM에 삽입된 다음 새 URL 콘텐츠가 로드()됩니다.

function loadNewContent(newSection) { 
  var section = $('<section class="cd-section overflow-hidden '+newSection+'"></section>').appendTo(mainContent); 
   
  //load the new content from the proper html file 
  section.load(newSection+'.html .cd-section > *', function(event){ 
     
    loadingBar.velocity({ 
      scaleY: scaleMax //this is the scaleY value to cover the entire window height (100% loaded) 
    }, 400, function(){ 
       
      section.addClass('visible'); 
 
      var url = newSection+'.html'; 
 
      if(url!=window.location){ 
        //add the new page to the window.history 
        window.history.pushState({path: url},'',url); 
      } 
 
      // ... 
    }); 
  }); 
}

비동기적으로 로드된 페이지를 통해 이전 페이지의 검색 기록으로 돌아가고 싶다면 브라우저에서 돌아가기를 클릭하면 됩니다. 이전 페이지로 돌아가는 경우에도 전환 애니메이션 효과가 있습니다.