با استفاده از این پلاگین می توانید در سایت خود موجی در اطراف کلیک خود داشته باشید.
آموزش استفاده
۱- فراخوانی کتابخانه پلاگین و خصوصیت ها
<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 نامی که در قسمت بالا نوشتید قرار بدهید
سلام
من متوجه نشدم منظورتان از موجی بودن چیه؟میشه یکم توضیح بدید
سلام علی جان
حالتی میشه که روی لینک کلیک میشه و روی صفحه یک حالت موج میاد
سلام خسته نباشيد !
واقعن مطالب مفيدي هستن !
فقط آپديت نميكنين چرا ؟
سلام.
موجش کوچیکتر نمیشه؟
یعنی از حدود 30 پیکسل بیشتر نشه
ممنون
سلام خسته نباشید مرسی از فعالیتتون و مطالب پر کاربردتون…
یه درخواست داشتم اگر میشه اموزش یا پلاگینی رو معرفی کنید واسه شکل پست ها یا مطالب مثلا مثل مطالب سایت progpars.com که به صورت جالب و حرفه ای هستن.
واقعا ممنون میشم کمک کنید خیلی وقته دنبال همچین چیزی هستم ولی متاسفانه به دلیل نداشتن اطلاعات کافی هر چی سرچ میکنم به نتیجه نمیرسم.مرسی
ممنون از مطالب بسیار خوبتون
با سلام خدمت مدیران این سایت و عرض خسته نباشی بنده و همکارانم سایت آموزشی کاملا رایگان راه اندازی کردیم هرروز مطالب اموزشی جدید و احبار تکنولوژی و غیره در اختیار همه مردم عزیز جهت ارتقای علم و دانش مردم فرهیخته در اختیارشون میزاریم از سایت خوب شما خواهشی داشتیم تا اگر مقدور بود به سایت ما لینک بدهید سپاسگذاریم از شما موفق و سربلند باشید.
http://www.amozesh.net
دمت گرم داش مهدی واقعا ایوللا … من نوآموز وب هستم و میخوام طراحی وب رو یاد بگیرم ، مطمئنم خیلی خیلی میتونم از مطالب اینجا استفاده ببرم … بهت خسته نباشید میگم.
سلام ممنون …………
به کار اومد!!!!!
سلام
مطلب خوبیه ، لطف کنید کد ها رو برای دانلود بگذارید چون این جوری بهتره و راحت تر میشه ادیتش کرد
یه نگته فنی دیگه هم بگم (جون کد ها رو کپی زدم و جواب نداد) :
چرا در بالا “waves” و “prims” به صورت css آمده ولی در پایین به صورت و با فرمت js استفاده شده
ممنون
و خداوند پیش نمایش را آفرید …
سلام ممنون از سایت خیلی خوبتون . نمیدونم چرا من همش فکر میکنم خیلی وقته پیش از سایت شما یه منو دانلود کردم که بالای صفحه بود بصورت باز شونده و داخلش یه اسلایدر مطالب داشت با پس زمینه چرمی بود . همش توی این فکرم که از کدوم سایت دانلود کردم حدود 2 سال پیش . خخخخخ . بازم ممنون از سایت خوبتون
با سلام
ممنون از سایت بسیار زیبا و مفید شما
پیشنهادی داشتم
ای کاش بهتر بود برای هر کدی که زحمتش رو میکشید و در سایت قرار می دهید یک حالت پیش نمایش و دمو نیز قرار میداد که با کلیک بر روی آن حالت نمایش پیش فرض آن نیز دیده میشد .
با هم از سایت بسیار خوب شما ممنون و سپاسگزارم
با سلام مجدد
حالت پیش نمایش اگه اشتباه نکنم سمت چپ صفحه قرارداده شده بود که من الان دیدم …. ممنونم از سایت بسیار خوبتون
باسلام میشه طریقه گذاشتن این کدها توی سایت رو آموزش بدین. سایت با کدهای اچ تی ام ال کار میکنه
تشکر
سلام اقای مهدی انشا الله حالتون خوب باشه اقا مهدی یه درخواست میتونم بکنم اگه میشه کنار هر یک از اموزش هاتون یدونه سمپل ساخته شده برای دانلود بزارید
بسيار عالي بود ، ممنون بابت به اشتراک گذاري
جالب بود. مرسی
ممنون
سلام میشه از این سایت دیدن کنید
http://atiehpardaz-co.ir/?Lang=Fa
میخواستم ازتون تقاضا کنم که میشه اموزش های چرخش عکس مثل عکس های پائین رونمائی از طرح جدید دستگاه ترمینال پلاس
همین سایت رو بذارید یا همینطور وقتی رو عکس ها میریم یه ذره بین میاد رو عکس که فک کنم اونم با جی کوئریه واقعا ممنون میشم که این اموزش رو بذارین چون این برای پروژه مونه و باید این جی کوئری رو درست کنم
ممنون
آموزش خوبی بود ممنون
ممنون از مطالب مفیدتون