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

04144235034

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

دانلود پروژه css , java جهت نمایش نمونه کار ها با انیمیشن بسیار جذاب

دانلود پروژه css , java جهت نمایش نمونه کار ها با انیمیشن بسیار جذاب

دانلود پروژه css , java جهت نمایش نمونه کار ها با انیمیشن بسیار جذاب

دسته بندی :
دانلود پروژه css , java جهت نمایش نمونه کار ها با انیمیشن بسیار جذاب

ما با ایده حرکت بلوک های محتوا به عنوان راهی برای انتقال از صفحه اصلی / گالری به صفحه پروژه، بازی کرده ایم. تمام پانل ها در امتداد محور Y حرکت می کنند (محور x در دستگاه های کوچکتر)، و حرکت به وسیله ی این که کاربر میخواهد بیشتر درباره یک پروژه یاد بگیرد یا میخواهد به ناوبری دسترسی پیدا کند، حرکت می کند.

تصاویر: unsplash.com

ایجاد ساختار

ساختار HTML از دو لیست های نامرتب تشکیل شده، ul.cd-projects-previewsبرای پیش نمایش تصاویر پروژه و ul.cd-projectsبرای جزئیات پروژه، و یک nav.cd-primary-navبسته بندی ناوبری اصلی.

<div class="cd-projects-container">
   <ul class="cd-projects-previews">
      <li>
         <a href="#0">
            <div class="cd-project-title">
               <h2>Project 1</h2>
               <p>Brief description of the project here</p>
            </div>
         </a>
      </li>

      <li>
         <!-- project preview here -->
      </li>

      <!-- other project previews here -->
   </ul> <!-- .cd-projects-previews -->

   <ul class="cd-projects">
      <li>
         <div class="preview-image">
            <div class="cd-project-title">
               <h2>Project 1</h2>
               <p>Brief description of the project here</p>
            </div> 
         </div>

         <div class="cd-project-info">
            <!-- project description here -->
         </div> <!-- .cd-project-info -->
      </li>

      <!-- projects here -->
   </ul> <!-- .cd-projects -->

   <button class="scroll cd-text-replace">Scroll</button>
</div> <!-- .cd-project-container -->

<nav class="cd-primary-nav" id="primary-nav">
   <ul>
      <li class="cd-label">Navigation</li>
      <li><a href="#0">The team</a></li>
      <!-- navigation items here -->
   </ul>
</nav> <!-- .cd-primary-nav -->

افزودن سبک

در دستگاه های کوچک، پیش نمایش هر پروژه <li>دارای عرض عرض برابر با عرض عرض و ارتفاع یک چهارم از ارتفاع نمایش پرونده (4 پروژه در نسخه ی نمایشی ما) است. تصویر پیش نمایش پروژه به عنوان تصویر پس زمینه  <a>عنصر کودک تنظیم می شود. ارتفاع آن برابر با ارتفاع نمایشگر است و برای پوشش کل نمایشگر به بالای صفحه ترجمه می شود.

.cd-projects-previews li {
  height: 25%;
  width: 100%;
  overflow: hidden;
  transition: transform 0.5s;
}
.cd-projects-previews a {
  display: block;
  height: 100vh;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s;
  transform: translateY(0%);
}
.cd-projects-previews li:nth-of-type(2) a {
  transform: translateY(-25%);
}
.cd-projects-previews li:nth-of-type(3) a {
  transform: translateY(-50%);
}
.cd-projects-previews li:nth-of-type(4) a {
  transform: translateY(-75%);
}

همانطور که برای جزئیات پروژه ( .cd-projects > li)، هر آیتم لیست دارای موقعیت مطلق، عرض و ارتفاع به ترتیب عرض و ارتفاع عرض نمایش است و به طور پیش فرض پنهان است.

.cd-projects > li {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}

هنگامی که یک کاربر یک پروژه را انتخاب می کند، .selectedکلاس به متناظر اضافه می شود .cd-projects > li، در حالی که .slide-outکلاس به پیش نمایش های پروژه اضافه می شود (در یک تصادف و با تاخیر برای ایجاد اثر کشویی).

.cd-projects-previews li.slide-out {
  transform: translateX(-100%);
}

.cd-projects > li.selected {
  z-index: 1;
  opacity: 1;
  transition: opacity 0s;
}

در دستگاه های بزرگتر (عرض نمایش بزرگتر از 1024 پیکسل)، پیش بینی های پروژه ارتفاع به 100٪ و عرض آن به یک چهارم از عرض عرض نمایش در حالی که <a>کودک به سمت چپ برای پوشش کل نمایش پورت ترجمه شده است.

@media only screen and (min-width: 1024px) {
  .cd-projects-previews li {
    display: inline-block;
    height: 100%;
    width: 25%;
    float: left;
  }
  .cd-projects-previews li.slide-out {
    transform: translateY(-100%);
  }
  .cd-projects-previews a {
    /* width equal to window width */
    width: 400%;
  }
  .cd-projects-previews li:nth-of-type(2) a {
    transform: translateX(-25%);
  }
  .cd-projects-previews li:nth-of-type(3) a {
    transform: translateX(-50%);
  }
  .cd-projects-previews li:nth-of-type(4) a {
    transform: translateX(-75%);
  }
}

در مورد ناوبری تمام صفحه، .cd-primary-navزیر زیر قرار دارد .cd-projects-container؛ هنگامی که کاربر روی آن کلیک می کند .cd-nav-trigger، .slide-outکلاس به پیش نمایش های پروژه اضافه می شود تا ناوبری را نشان دهد.

.cd-primary-nav {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s;
}
.cd-primary-nav.nav-visible {
  opacity: 1;
}

درباره تعداد پروژه ها: اگر شما نیاز به ایجاد بیش از 4 پروژه دارید، پس از آن باید عرض / ارتفاع پیش نمایش پروژه (و ترجمه ارزش <a>فرزندان آن ) را به روز کنید. اگر از SASS استفاده می کنید، می توانید  $itemsمتغیر داخل partials> _variables.scss را به روز کنید.

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

ما از jQuery برای تشخیص رویدادهای کلیک در پیش نمایش ها و .cd-nav-triggerعناصر پروژه استفاده کردیم. 
هنگامی که یک کاربر پروژه را انتخاب می کند / ناوبری اصلی را باز می کند، این  slideToggleProjects()تابع از کشیدن و یا خارج کردن پروژه ها مراقبت می کند، در حالی که این makeUniqueRandom()تابع برای استخراج اعداد تصادفی (بین 1 تا 4) برای خروج از پروژه ها استفاده می شود.

function slideToggleProjects(projectsPreviewWrapper, projectIndex, index, bool) {
   var randomProjectIndex = makeUniqueRandom();
  
   if( index < numRandoms - 1 ) {
      projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool);
      setTimeout( function(){
         //animate next preview project
         slideToggleProjects(projectsPreviewWrapper, projectIndex, index + 1, bool);
      }, 150);
   } else {
      //this is the last project preview to be animated 
      projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
         // ...
         animating = false;
      });
   }
}
  •  
حميد  شریفی
نویسنده
حميد شریفی
تعداد بازدید: 376
تعداد دانلود : 79
تاریخ 1397-3-26
کانال تلگرامی ما تا 50% تخفیف دریافت کنید
مطالبی که شاید خوشتان بیاد