طراحی وب سایت | طراحی سایت | شرکت طراحی وب سایت پروگ پارس

کلیک موجی

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

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/waves.min.css">
<link rel="stylesheet" type="text/css" href="static/prims.css">

2- کد html جهت استفاده پلاگین

<div id="lead" class="text-center waves-effect waves-light waves-block">
      <h1>دنیای جی کوئری</h1>
</div>
<div class="width" id="button">
      <button class="waves-effect waves-blue">Reza Taheri</button>
      <button class="waves-effect waves-red">Reza Taheri</button>
      <br/>
      <button class="waves-effect waves-green">Reza Taheri</button>
      <button class="waves-effect waves-black">Reza Taheri</button>
</div>
<div class="width" id="img">
      <span class="waves-effect waves-blue">
        <img src="static/jquery.png">
      </span>
</div>
<script type="text/javascript" src="static/waves.min.js"></script>
<script type="text/javascript" src="static/prims.js"></script>
<script type="text/javascript">
     Waves.displayEffect();
</script>

 

برای اضافه کردن موج از کلاس زیر استفاده کنید

class="waves-effect"

 

برای ساخت رنگ موج در css کد زیر را اضافه کنید

.waves-NEW_NAME .waves-ripple{background-color:#####}

به جای NEW_NAME نامی برای موج خود بنویسید و به جای # ها رنگ خود رو به صورت rgba بنویسید

 

در صورت ساخت رنگ جدید در css به صورت زیر به شی مورد نظر ربط بدهید

class="waves-effect waves-NEW_NAME"

 به جای NEW_NAME نامی که در قسمت بالا نوشتید قرار بدهید

2 نظر

دانلود و پیش نمایش

دانلود و پیش نمایش فایل کلیک موجی

دانلود پلاگین پیش نمایش آنلاین

سوالی دارید؟

● در تلگرام، پاسخگوی شما :)