تخفیف

سبد خرید

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

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

دانلود پروژه css , java جهت نمایش نمونه کار ها با انیمیشن بسیار جذاب
حميد  شریفی
حميد شریفی
تعداد کل دانلود ها : 734210
تعداد کل مطالب : 1350

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

تعداد دانلود:
381
تعداد بازدید:
2852
تاریخ:

هشتگ ها :

#

ما با ایده حرکت بلوک های محتوا به عنوان راهی برای انتقال از صفحه اصلی / گالری به صفحه پروژه، بازی کرده ایم. تمام پانل ها در امتداد محور 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;
      });
   }
}
  •  
محصولات مشابه فروشی
هشتگ ها :

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

ارسال نظر

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

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

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

  • logo-samandehi