دانلود پروژه 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;
      });
   }
}