طراحی سایت شرکتی با کنترل پنل اختصاصی تحویل فوری - 250 هزار تومان اطلاعات بیشتر

پلاگین FoxHolder برای انیمیشنی کردن فرم ها و دکمه ها با افکت های متنوع

متنوع ترین افکت ها ها با پلاگین FoxHolder

پلاگین FoxHolder,پلاگین جی کوئری,افکت سایت,افکت,افکتهای طراحی سایت

پلاگین FoxHolder برای انیمیشنی کردن فرم ها و دکمه ها با افکت های متنوع

مسلما هنگام طراحی سایت ارزان، همیشه دوست داشتید که سایت شما هم مانند سایتهای حرفه ای دیگران افکتهای جذاب داشته باشد تا نظر کاربر را به خود جلب کند و از سادگی خارج شود. پیشنهاد میکنم این پلاگین را حتما امتحان کنید در عین سادگی افکتهای جذاب زیادی را برای عناصر فرم ها اعم از: inputها،butonها وPlaceHolder،  ارائه می دهد که به راحتی میتوان در چندین سایت از آن ها استفاده کرد بدون اینکه سایتهای شما یک شکل و تکراری شود.

لینک دمو

مراحل استفاده از پلاگین FOXHOLDER

ابتدا فایل foxholder-styles.css  و foxholder.js را از لینک دمو دانلود کنید. سپس هر دو را به پروژه ضمیمه کنید و کدهای زیر را وارد نمایید.

کد HTML:

<main>
        <div class="row">
          <section class="textareas">
            <h2 class="text-center text-danger">Placeholder Effects</h2>
            <div class="row">
              <div class="col-lg-12">
                <nav class="text-center">
                  <a class="btn" href="#example-1" title="">Demo 1</a>
                  <a class="btn" href="#example-2" title="">Demo 2</a>
                  <a class="btn" href="#example-3" title="">Demo 3</a>
                  <a class="btn" href="#example-4" title="">Demo 4</a>
                  <a class="btn" href="#example-5" title="">Demo 5</a>
                  <a class="btn" href="#example-6" title="">Demo 6</a>
                  <a class="btn" href="#example-7" title="">Demo 7</a>
                  <a class="btn" href="#example-8" title="">Demo 8</a>
                  <a class="btn" href="#example-9" title="">Demo 9</a>
                  <a class="btn" href="#example-10" title="">Demo 10</a>
                  <a class="btn" href="#example-11" title="">Demo 11</a>
                  <a class="btn" href="#example-12" title="">Demo 12</a>
                  <a class="btn" href="#example-13" title="">Demo 13</a>
                  <a class="btn" href="#example-14" title="">Demo 14</a>
                  <a class="btn" href="#example-15" title="">Demo 15</a>
                </nav>
              </div>
            </div>
            <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">

              <div class="form-container form-container--effect-1" id="example-1">
                <h3 class="text-center">Placeholder Demo 1</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-1" type="text" placeholder="Input" required />
                  <textarea id="msg-1" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-2" id="example-2">
                <h3 class="text-center">Placeholder Demo 2</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-2" type="text" placeholder="Input" required />
                  <textarea id="msg-2" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-3" id="example-3">
                <h3 class="text-center">Placeholder Demo 3</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-3" type="text" placeholder="Input" required />
                  <textarea id="msg-3" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-4" id="example-4">
                <h3 class="text-center">Placeholder Demo 4</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-4" type="text" placeholder="First Input" required />
                  <textarea id="msg-4" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-5" id="example-5">
                <h3 class="text-center">Placeholder Demo 5</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-5" type="text" placeholder="Input" required />
                  <textarea id="msg-5" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-6" id="example-6">
                <h3 class="text-center">Placeholder Demo 6</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-6" type="text" placeholder="Input" required />
                  <textarea id="msg-6" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-7" id="example-7">
                <h3 class="text-center">Placeholder Demo 7</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-7" type="text" placeholder="Input" required />
                  <textarea id="msg-7" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-8" id="example-8">
                <h3 class="text-center">Placeholder Demo 8</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-8" type="text" placeholder="Input" required />
                  <textarea id="msg-8" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-9" id="example-9">
                <h3 class="text-center">Placeholder Demo 9</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-9" type="text" placeholder="Input" required />
                  <textarea id="msg-9" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-10" id="example-10">
                <h3 class="text-center">Placeholder Demo 10</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-10" type="text" placeholder="Input" required />
                  <textarea id="msg-10" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-11" id="example-11">
                <h3 class="text-center">Placeholder Demo 11</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-11" type="text" placeholder="Input" required />
                  <textarea id="msg-11" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-12" id="example-12">
                <h3 class="text-center">Placeholder Demo 12</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-12" type="text" placeholder="Input" required />
                  <textarea id="msg-12" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-13" id="example-13">
                <h3 class="text-center">Placeholder Demo 13</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-13" type="text" placeholder="Input" required />
                  <textarea id="msg-13" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-14" id="example-14">
                <h3 class="text-center">Placeholder Demo 14</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-14" type="text" placeholder="Input" required />
                  <textarea id="msg-14" placeholder="Message"></textarea>
                </form>
              </div>

              <div class="form-container form-container--effect-15" id="example-15">
                <h3 class="text-center">Placeholder Demo 15</h3>
                <p class="text-muted text-center">Click on textarea or input to check</p>
                <form>
                  <input id="first-input-15" type="text" placeholder="Input" required />
                  <textarea id="msg-15" placeholder="Message"></textarea>
                </form>
              </div>

            </div>
          </section>
        </div>

        <div class="row">
          <section class="buttons">
            <h2 class="text-center text-danger">Button Effects</h2>
            <div class="col-lg-12">
              <nav class="text-center">
                <a class="btn" href="#example-btn-1" title="">Demo 1</a>
                <a class="btn" href="#example-btn-2" title="">Demo 2</a>
                <a class="btn" href="#example-btn-3" title="">Demo 3</a>
                <a class="btn" href="#example-btn-4" title="">Demo 4</a>
                <a class="btn" href="#example-btn-5" title="">Demo 5</a>
                <a class="btn" href="#example-btn-6" title="">Demo 6</a>
              </nav>
            </div>
            <div class="col-lg-10 col-lg-offset-1 col-md-12 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0">

              <div class="form-container form-container--buttons form-container--effect-21" id="example-btn-1">
                <h3 class="text-center">Button Demo 1</h3>
                <p class="text-muted text-center">Hover on button to check the effect</p>
                <form>
                  <button type="button" data-size="sm">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled">sm filled</button>
                  <button type="button" data-size="md">md empty</button>
                  <button type="button" data-size="md" data-filled="filled">md filled</button>
                  <button type="button" data-size="bg">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled">bg filled</button>
                </form>
              </div>

              <div class="form-container form-container--buttons form-container--effect-22" id="example-btn-2">
                <h3 class="text-center">Button Demo 2</h3>
                <p class="text-danger text-center">(can be used only with &lt;button&gt; tag)</p>
                <p class="text-muted text-center">Hover on button to check the effect</p>
                <form>
                  <p class="text-muted text-center">Left (default)</p>
                  <button type="button" data-size="sm" data-direction="left">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled" data-direction="left">sm filled</button>
                  <button type="button" data-size="md">md empty</button>
                  <button type="button" data-size="md" data-filled="filled">md filled</button>
                  <button type="button" data-size="bg" data-direction="left">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled">bg filled</button>
                </form>

                <form>
                  <p class="text-muted text-center">Right</p>
                  <button type="button" data-size="sm" data-direction="right">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled" data-direction="right">sm filled</button>
                  <button type="button" data-size="md" data-direction="right">md empty</button>
                  <button type="button" data-size="md" data-filled="filled" data-direction="right">md filled</button>
                  <button type="button" data-size="bg" data-direction="right">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled" data-direction="right">bg filled</button>
                </form>

                <form>
                  <p class="text-muted text-center">Top</p>
                  <button type="button" data-size="sm" data-direction="top">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled" data-direction="top">sm filled</button>
                  <button type="button" data-size="md" data-direction="top">md empty</button>
                  <button type="button" data-size="md" data-filled="filled" data-direction="top">md filled</button>
                  <button type="button" data-size="bg" data-direction="top">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled" data-direction="top">bg filled</button>
                </form>

                <form>
                  <p class="text-muted text-center">Bottom</p>
                  <button type="button" data-size="sm" data-direction="bottom">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled" data-direction="bottom">sm filled</button>
                  <button type="button" data-size="md" data-direction="bottom">md empty</button>
                  <button type="button" data-size="md" data-filled="filled" data-direction="bottom">md filled</button>
                  <button type="button" data-size="bg" data-direction="bottom">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled" data-direction="bottom">bg filled</button>
                </form>
              </div>

              <div class="form-container form-container--buttons form-container--effect-23" id="example-btn-3">
                <h3 class="text-center">Button Demo 3</h3>
                <p class="text-danger text-center">(can be used only with &lt;button&gt; tag)</p>
                <p class="text-muted text-center">Hover on button to check the effect</p>
                <form>
                  <p class="text-muted text-center">Vertical (default)</p>
                  <button type="button" data-size="sm" data-direction="vertical">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled">sm filled</button>
                  <button type="button" data-size="md" data-direction="vertical">md empty</button>
                  <button type="button" data-size="md" data-filled="filled">md filled</button>
                  <button type="button" data-size="bg">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled">bg filled</button>
                </form>

                <form>
                  <p class="text-muted text-center">Horizontal</p>
                  <button type="button" data-size="sm" data-direction="horizontal">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled" data-direction="horizontal">sm filled</button>
                  <button type="button" data-size="md" data-direction="horizontal">md empty</button>
                  <button type="button" data-size="md" data-filled="filled" data-direction="horizontal">md filled</button>
                  <button type="button" data-size="bg" data-direction="horizontal">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled" data-direction="horizontal">bg filled</button>
                </form>

                <form>
                  <p class="text-muted text-center">Horizontal and Vertical</p>
                  <button type="button" data-size="sm" data-direction="horz-vert">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled" data-direction="horz-vert">sm filled</button>
                  <button type="button" data-size="md" data-direction="horz-vert">md empty</button>
                  <button type="button" data-size="md" data-filled="filled" data-direction="horz-vert">md filled</button>
                  <button type="button" data-size="bg" data-direction="horz-vert">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled" data-direction="horz-vert">bg filled</button>
                </form>

                <form>
                  <p class="text-muted text-center">Diagonal</p>
                  <button type="button" data-size="sm" data-direction="diagonal">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled" data-direction="diagonal">sm filled</button>
                  <button type="button" data-size="md" data-direction="diagonal">md empty</button>
                  <button type="button" data-size="md" data-filled="filled" data-direction="diagonal">md filled</button>
                  <button type="button" data-size="bg" data-direction="diagonal">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled" data-direction="diagonal">bg filled</button>
                </form>
              </div>

              <div class="form-container form-container--buttons form-container--effect-24" id="example-btn-4">
                <h3 class="text-center">Button Demo 4</h3>
                <p class="text-muted text-center">Hover on button to check the effect</p>
                <form>
                  <button type="button" data-size="sm">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled">sm filled</button>
                  <button type="button" data-size="md">md empty</button>
                  <button type="button" data-size="md" data-filled="filled">md filled</button>
                  <button type="button" data-size="bg">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled">bg filled</button>
                </form>
              </div>

              <div class="form-container form-container--buttons form-container--effect-25" id="example-btn-5">
                <h3 class="text-center">Button Demo 5</h3>
                <p class="text-muted text-center">Hover on button to check the effect</p>
                <form>
                  <button type="button" data-size="sm">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled">sm filled</button>
                  <button type="button" data-size="md">md empty</button>
                  <button type="button" data-size="md" data-filled="filled">md filled</button>
                  <button type="button" data-size="bg">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled">bg filled</button>
                </form>
              </div>

              <div class="form-container form-container--buttons form-container--effect-26" id="example-btn-6">
                <h3 class="text-center">Button Demo 6</h3>
                <p class="text-muted text-center">Hover on button to check the effect</p>
                <form>
                  <button type="button" data-size="sm">sm empty</button>
                  <button type="button" data-size="sm" data-filled="filled">sm filled</button>
                  <button type="button" data-size="md">md empty</button>
                  <button type="button" data-size="md" data-filled="filled">md filled</button>
                  <button type="button" data-size="bg">bg empty</button>
                  <button type="button" data-size="bg" data-filled="filled">bg filled</button>
                </form>
              </div>

            </div>
          </section>
    </div>
    </main> 


حتما تعجب می کنید که کدهای HTML زیاد است کدهای بالا تمامی افکتهای این پلاگین را شامل می شود. ولی شما به انتخاب خود هر کدام که مایل بودید را استفاده کنید اما برای بار اول تمام افکتها را امتحان کنید تا با قابلیتهای پلاگین اشنا شوید.

اسکریپت جی کوئری

<script>
      jQuery('.buttons').foxholder({
    placeholderDemo: 15, // for placeholder demo (1 - 15)
    buttonDemo: 2 //for button demos (1 - 6), if you need a button effect
  });
    </script>


همانطور که از توضیح مقابل هر خط مشخص است شما در خط اول نام کلاس را (.your-class) یا textareas و یا buttons قرار می دهید. و در خط دوم با انتخاب عدد 1 تا 15 دمومر بوط به textarea ، در خط سوم با انتخاب عدد 1 تا 6 دموهای مربوط به buttonها را مشاهده می کنید.

 

اگر سوالی در رابطه با این مطلب دارید می توانید از طریق فرم زیر ارسال کنید
  • ایمیل شما به هیچ عنوان در سایت نمایش داده نمی شود
  • کامنت شما بعد از تایید مدیر سایت نمایش داده می شود