illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

Waves : ابزاری برای ساخت افکتهای کلیک زیبا

0 1153 ۲۳ فروردین ۹۴

در این مطلب میخوام یک ابزار زیبا بنام Waves رو خدمت شما معرفی کنم و اونو آموزش بدم.

waves

با استفاده از این ابزار میتونین براحتی هر چه تمامتر افکتهای زیبایی برای کلیک کردن بر روی المنتهای مختلف قرار بدین و رابط کاربری سایتتون رو ارتقاء بدین. این ابزار ایدشو از فریم ورک طراحی متریال Google گرفته.

این ابزار مستقل هست و به هیچ کتابخانه ای نیاز نداره. این ابزار از مرورگرهای زیر پشتیبانی میکنه :

  • IE 10++
  • Chrome 14++
  • Firefox 9++
  • Safari 5.1++
  • Opera 11.6++
  • iOS 6++ (Safari)
  • Windows Phone 8.1 (IE)
  • Android Browser 4++

میبینید که یک عکس و 4 دکمه قرار داده شده و هر زمان که روی هر کدام کلیک میکنید ، افکت زیبایی شبیه به موج اتفاق میوفته و خیلی جذاب هست.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به waves.min.js و waves.min.css نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

قدم اول اینه که المنت مورد نظرتون رو قرار بدین. بعنوان مثال من یک دکمه قرار میدم :

حالا با استفاده از CSS یک رنگ دلخواه براش در نظر میگیرم :

مرحله بعدی اینه که به اون کلاس waves-effect رو نسبت بدین :

حالا برای اینکه این ابزار فعال بشه باید در تگ اسکریپت نهایی کد زیر رو قرار بدین :

حالا اگر در خروجی ببینید و روی دکمه مورد نظر کلیک کنید ، یک افکت زیبای موجی رخ میده. اگه دقت کنید دکمه مورد نظر استایل زیبایی نداره و بصورت زیر هست :

waves1

برای اینکه استایل زیباتری به اون بدین ، میتونین کلاس waves-button رو بهش اضافه کنید ، بصورت زیر :

حالا اگر در خروجی ببینید بصورت زیر هست :

waves2

اگر بخواید برای المنتتون از آیکون استفاده کنید و المنتتون دایره ای بشه ، میتونین از waves-circle استفاده کنید. با این کار المنتتون دایره ای شکل میشه.

اگر بخواید افکت زیباتری به المنتتون در هنگام کلیک کردن بدین ، باید از کلاس waves-float استفاده کنید. با اینکار افکتهای زیباتری در هنگام کلیک کردن اتفاق میوفته.

وقتی که روی دکمه ها کلیک میکنید ، یک لایه تیره رنگ پدیدار میشه و بعد از اون مخفی میشه. اگر بخواید از لایه ی روشن تری استفاده کنید ، باید از waves-light استفاده کنید ، بصورت زیر :

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram