دانلود سورس انیمیشن js , css جهت صفحه بندی خدمات شما بدون رفرش

ما اخیرا با یک انیمیشن طراحی شده با CSS تجربه  کردیم که جایگزین تازه کردن صفحه وب می شود در حالی که محتوای با استفاده از ajax به روز شده است. انفجار امروز بر اساس یک ایده است، اما با یک اجرای متفاوت: در این زمان یک اثر شناور ساده تبدیل به یک نوار بارگذاری، که در نهایت با محتوای جدید گسترش می یابد!

آیکون های کتابخانه هسته ای ما .

ایجاد ساختار

ساختار 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>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 -->

افزودن سبک

.cd-side-navigationدر موقعیت ثابت، با ارتفاع: 100٪ و سرریز: مخفی، در حالی که فرزند خود را تگ <ul> است overflow-y مقدار: خودکار (به طوری که شما می توانید در داخل آن حرکت کنید اگر ناوبری بالاتر از دید است).

برای ایجاد خط زمانی که روی هر آیتم ناوبری حرکت میکنید، ما از a::afterشبه عناصر استفاده کردیم . آنها در موقعیت مطلق هستند، دارای عرض: 4px، top: 0 و right: -4px. 
یک نکته : برای هر عنصر عنصر لیست می توانیم a::afterعناصر داخل  .cd-side-navigation(از آنجا که سرریز شده است: پنهان) ما یک عرض: calc (100٪ - 4px) را تعیین کردیم .

.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;
}

هنگامی که یک کاربر یک آیتم جدید در ناوبری سمت را انتخاب می کند، یک .cd-sectionعنصر جدید ایجاد شده و وارد DOM می شود (شما می توانید جزئیات بیشتری را در بخش «رویدادهای مدیریت» پیدا کنید).

به طور پیشفرض، این .cd-sectionعنصر جدید به سمت چپ، خارج از منظره نمایش ترجمه شده است (translateX (-100٪)). سپس آن را .visible برای جایگزینی محتوای قدیمی به نمایشگر (با استفاده از کلاس) بازگرداند  .

.cd-section {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateX(-100%);
  transition: transform 0s 0.5s;
}
.cd-section.visible {
  /* this is the visible/selected section */
  position: relative;
  z-index: 2;
  transform: translateX(0);
  transition: transform 0.5s 0s;
}

مدیریت رویدادها

فایل index.html شامل تنها محتوای معرفی شده است. یک فایل متنی دیگر برای هر آیتم navigation (services.html، contact.html، ..) با دقیقا همان ساختار ایجاد شده است، اما با .cd-sectionمحتوای متفاوت ایجاد شده است.

هنگامی که کاربر یک مورد را در ناوبری سمت کلیک می کند،  triggerAnimation()تابع اجرا می شود. این تابع باعث می شود انیمیشن بارگذاری ( loadingBarAnimation()عملکرد) نوار بارگیری شده و محتویات جدید ( loadNewContent()عملکرد) را بارگذاری کند .

برای بار انیمیشن بار، ما از Velocity.js استفاده کرده ایم: در ابتدای انیمیشن، #cd-loading-barدرست در کنار انتخاب مورد نظر قرار گرفته است (ارتفاع آن برابر با یکی از آیتم لیست است). مقدار scaleY آن سپس متحرک است تا اثر بارگیری ایجاد شود.

function loadingBarAnimation() {
   //loadingBar is the #cd-loading-bar element
   //scaleY is the loadingBar actual scale value
   var scaleMax = loadingBar.data('scale'); //this is the scaleY value to cover the entire window height (100% loaded)
   if( scaleY + 1 < scaleMax) {
      newScaleValue = scaleY + 1;
   } 
   // ...
  
   loadingBar.velocity({
      scaleY: newScaleValue
      }, 100, loadingBarAnimation
   );
}

هنگامی که یک صفحه جدید انتخاب می شود، یک .cd-sectionعنصر جدید ایجاد شده و وارد DOM می شود. سپسload()تابع برای بارگذاری محتویات جدید مورد استفاده قرار می گیرد ( data-menuبرای مشخص کردن محتویات فایل که باید بارگذاری شوند، از یک  مشخصه اختصاص یافته به آیتم های ناوبری استفاده شد). هنگامی که HTML جدید بارگذاری شده است، انیمیشن نوار بارگیری تکمیل شده است، محتوای قدیمی توسط جدید جایگزین شده و صفحه جدید به پنجره.history (با استفاده از  pushState()روش) اضافه شده است.

function loadNewContent(newSection) {
   //create a new section element and insert it into the DOM (newSection is the data-menu of the selected navigation item)
   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(){
            //add the .visible class to the new section element -> it will cover the old one
            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);
            }

            // ...
         }
      );
   });
}

برای اجرای همان اثر انیمیشن زمانی که کاربر بر روی دکمه بازگشت به مرورگر کلیک می کند، ما برای popstateرویداد گوش می کنیم و triggerAnimation()هنگامی که آن را اخراج می کنیم، عملکرد را اجرا می کنیم.