ملت وب مرجع دانلود قالب وردپرس فارسی و قالب فارسی وردپرس و قالب html و افزونه وردپرس
24
ساعت با شما

04144235034

آیا میدانستید دلیل اصلی محبوبیت ملت وب در چیست ؟ ملت وب به عنوان مرجعی پیشرو در پشتیبانی مشتریان خود توانسته رضایت کاربران را در برگیرد در واقع در ملت وب وب شخص پاسخگو نیاز های شما نیست در اینجا یک شرکت معتبر و پاسخگو در کنار مشتریان خود می باشد و تمام مسئولیت پشتیبانی بر عهده شرکت می باشد و نقطه قوت فوق العاده بالای برای یک وب سایت می باشد
فروش محصولات
فروش محصولات شما

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

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

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

دسته بندی :
دانلود سورس انیمیشن 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()هنگامی که آن را اخراج می کنیم، عملکرد را اجرا می کنیم.

حميد  شریفی
نویسنده
حميد شریفی
تعداد بازدید: 408
تعداد دانلود : 81
تاریخ 1397-3-19
کانال تلگرامی ما تا 50% تخفیف دریافت کنید
مطالبی که شاید خوشتان بیاد