باکس ثبت نام حرفه ای با انیمیشن زیبا css,jquery

در بیشتر موارد، کاربران خود را به یک صفحه ثبت نام هدایت می کنید. با این حال، اگر فرآیند پرداخت شما کاملا ساده باشد، یک روش جایگزین برای جابجایی جدول قیمت گذاری است، و در همان صفحه، فرم پرداخت را نشان می دهد. این همان چیزی است که ما با قطعه امروز تلاش کردیم.

صحبت کردن به اندازه کافی، بیایید به کد بچرخانیم؛)

منابع:

• Velocity.js توسط جولیان شاپیرو.
• آیکون از Nucleo .

ایجاد ساختار

ساختار HTML است: توسط 2 عنصر اصلی تشکیل شده ul.cd-pricingاست که جدول قیمت گذاری، و div.cd-form، که پنجره فرم های معین.

هر برنامه شامل هدر با عنوان و قیمت طرح، div.cd-pricing-featuresبا یک لیست از ویژگی ها و یک پاورقی با یک دکمه تماس به عمل است.

ساختار فرم کاملا ساده است. فقط یک یادداشت: یک div.cd-plan-infoعنصر خالی وجود دارد که با استفاده از jQuery با اطلاعات برنامه انتخاب شده توسط کاربر (اساسا با کلون div.cd-pricing-header و .cd-pricing-features) پر می شود.

<ul class="cd-pricing">
   <li>
      <header class="cd-pricing-header">
         <h2>Basic</h2>

         <div class="cd-price">
            <span>$9.99</span>
            <span>month</span>
         </div>
      </header> <!-- .cd-pricing-header -->

      <div class="cd-pricing-features">
         <ul>
            <li class="available"><em>Feature 1</em></li>
            <li><em>Feature 2</em></li>
            <li><em>Feature 3</em></li>
            <li><em>Feature 4</em></li>
         </ul>
      </div> <!-- .cd-pricing-features -->

      <footer class="cd-pricing-footer">
         <a href="#0">Select</a>
      </footer> <!-- .cd-pricing-footer -->
   </li>

   <li>
      <!-- ... -->
   </li>

   <li>
      <!-- ... -->
   </li>
</ul> <!-- .cd-pricing -->

<div class="cd-form">
   <div class="cd-plan-info">
      <!-- content will be loaded using jQuery - according to the selected plan -->
   </div>

   <div class="cd-more-info">
      <h3>Need help?</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   </div>

   <form action="">
      <fieldset>
         <legend>Account Info</legend>

         <div class="half-width">
            <label for="userName">Name</label>
            <input type="text" id="userName" name="userName">
         </div>

         <div class="half-width">
            <label for="userEmail">Email</label>
            <input type="email" id="userEmail" name="userEmail">
         </div>

         <div class="half-width">
            <label for="userPassword">Password</label>
            <input type="password" id="userPassword" name="userPassword">
         </div>

         <div class="half-width">
            <label for="userPasswordRepeat">Repeat Password</label>
            <input type="password" id="userPasswordRepeat" name="userPasswordRepeat">
         </div>
      </fieldset>

      <fieldset>
         <!-- ... -->
      </fieldset>

      <fieldset>
         <!-- ... -->
      </fieldset>
   </form>

   <a href="#0" class="cd-close"></a>
</div> <!-- .cd-form -->

<div class="cd-overlay"></div> <!-- shadow layer -->

افزودن سبک

CSS برای این منبع بسیار ساده است. فقط برخی نکات: هنگامی که فرم قابل مشاهده .empty-boxاست، کلاس به مورد اضافه .cd-pricing > liمی شود. از آنجا که کل آیتم لیست را کلون می کنیم (و آن را داخل فرم قرار می دهیم)، اصلی اصلی هنوز هم وجود دارد. در این مورد، ما از .empty-boxکلاس استفاده کردیم تا آیتم اصلی لیست را پنهان کنیم.

.cd-pricing > li {
  position: relative;
  margin: 0 auto 2.5em;
  background-color: #ffffff;
  border-radius: .3em .3em .25em .25em;
  box-shadow: 0 2px 8px rgba(2, 4, 5, 0.5);
}

.cd-pricing > li.empty-box {
  box-shadow: none;
}

.cd-pricing > li.empty-box::after {
  /* placeholder visible when .cd-form is open - in this case same color of the background */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0f222b;
}

ما از .empty-boxکلاس نیز استفاده می کنیم تا دکمه عمل در پایین صفحه را هدف قرار دهد، به طوری که هنگامی که کاربر فرم را بسته می کند (از مقیاس (0) به مقیاس (1)) متحرک می شود.

.cd-pricing-footer a {
  transition: transform 0.3s;
}

.empty-box .cd-pricing-footer a {
  /* scale down to 0 the action button when sign up form is visible */
  transform: scale(0);
}

این div.cd-formاست که در position: fixed;آن است و آن را به اندازه به طور پیش فرض نیست. هنگامی که کاربر شیپور خاموشی / کلیک بر روی دکمه انتخاب، ما را به شکل قابل مشاهده است (از visibility: hidden;به visibility: visible;)، آن را به همان اندازه از اقلام لیست قیمت گذاری اختصاص دهید، و تحریک و تشجیع آن با ساخت آن بزرگتر است. این توهم باعث می شود که این آیتم قیمت گذاری است که در حال افزایش است، در حالیکه آن div.cd-form، همان اندازه دارد و دارای عناصر مشابه است (کلونها - که سپس برای ایجاد فضای فرم ثبت نام حرکت می کنند).

/* -------------------------------- 

Form 

-------------------------------- */

.cd-form {
  position: fixed;
  z-index: 2;
  background-color: #ffffff;
  border-radius: .25em;
  visibility: hidden;
  transition: visibility 0s 0.8s;

  /* Force Hardware Acceleration in WebKit */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.cd-form.is-visible {
  /* form is visible */
  visibility: visible;
  transition: visibility 0s 0s;
}

یکی از آخرین جزئیات ذکر شده است: زمانی که فرم ظاهر می شود، پس زمینه سبز عنوان برنامه باعث می شود که پس زمینه لیست ویژگی ها (فقط دسکتاپ) شود. این در واقع عنصر دیگری است ( .cd-form .cd-pricing-features::before) که ارتفاع آن متحرک است (با استفاده از تبدیل مقیاس).

.cd-form .cd-pricing-features::before {
  /* this is the layer which covers the .cd-pricing-features when the form is open - visible only on desktop */
  content: '';
  position: absolute;
  /* fix a bug while animating - 1px white space visible */
  top: -5px;
  left: 0;
  
  height: calc(100% + 5px);
  width: 100%;
  background-color: #95ac5f;

  will-change: transform;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.6s 0.2s;
}

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

animateForm()تابع تعریف شده است به تحریک و تشجیع شکل معین: هنگامی که یک کاربر یک برنامه را انتخاب کند، تابع موقعیت و بعد از انتخاب قیمت گذاری مورد جدول ارزیابی و اختصاص آنها به .cd-formطوری که آن را به طور کامل پوشش می دهد مورد قیمت گذاری (که با استفاده از پنهان .empty-boxکلاس)

سپس انیمیشن شروع می شود: ما .cd-formعرض و ارتفاع را به مقادیر نهایی خود تحریک می کنیم  و آن را ترجمه می کنیم تا در منظره ی مرکزی قرار گیرد.

//form is the .cd-form element
form.velocity(
{
   'width': tableWidth+'px', //pricing table item width
   'height': tableHeight+'px', //pricing table item height
   'top': formTopValue, //final top value of the form 
   'left': formLeftValue, //final top value of the form 
   'translateX': formTranslateX+'px', //difference between formLeftValue and pricing table item left value
   'translateY': formTranslateY+'px', //difference between formTopValue and pricing table item top value
   'opacity': 1,
}, 0, function(){
   //table is the pricing table item
   table.addClass('empty-box');

   form.velocity(
   {
      'width': formFinalWidth+'px', //form final width
      'height': formFinalHeight+'px', //form final height
      'translateX': 0,
      'translateY': 0,
   }, 
   //animation duration
   animationDuration, 
   //spring easing
   [ 220, 20 ]).addClass('is-visible');
});

وقتی کاربر Modal را بسته می کند، fieldsets fields پنهان می شوند (تغییر شفافیت آنها به 0) و سپس انیمیشن معکوس انجام می شود (تاخیر برای انیمیشن با استفاده از delayمتغیر تعریف شده است).