تخفیف

سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

مبلغ کل
0
تسویه حساب
سبد خرید خالی می باشد

دانلود سورس انیمیشن js , css جهت صفحه بندی خدمات شما بدون رفرش
حميد  شریفی
حميد شریفی
تعداد کل دانلود ها : 734251
تعداد کل مطالب : 1350

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

تعداد دانلود:
467
تعداد بازدید:
2929
تاریخ:

هشتگ ها :

#منو جیکوئری

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

محصولات مشابه فروشی
هشتگ ها :

این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید

ارسال نظر

آخرین های مشابه مشاهده بیشتر

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

ملت وب در سال 1393 فعالیت خود را در چهار بخش قالب های آماده، طراحی لوگو، طراحی سایت، طراحی بنر آغاز کرده است، که در مدت بسیار کم با تلاش های بی وقفه خود و همکاران توانسته بزرگترین وب سایت ارائه دهنده قالب های با کیفیت در ایران باشد رمز موفقیت شرکت ملت وب پشتیبانی بی دریغ از کاربران خود می باشد ما موقعیت خود را مدیون مشتریان وفادار خود هستیم پس همیشه همراهشان خواهیم بود .

  • logo-samandehi