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

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



  آیا می دانید تا کنون 6334 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

Particleground : پلاگین jQuery برای ساخت خاصیت parallax ذرات

6 2147 ۸ بهمن ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام Particleground رو خدمت شما معرفی کنم و اونو آموزش بدم.

particleground

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر نمای زیبایی طراحی کنید ، که در اون ذرات با حالت زیبایی حرکت میکنن و با حرکت ماوس نیز حالت زیبایی روی اون ذرات اعمال میشه و حالت Parallax زیبایی درست میشه.

میبینید که ذرات در جهتهای مختلف جابجا میشن و از فاصله ی معینی که به هم نزدیک بشن ، یک اتصال بین اونا برقرار میشه و حالت زیبایی رو بوجود میاره. همچنین با حرکت ماوس ، ذرات نیز متناظراً جابجا میشن.

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

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

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

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

در بالا یک div بنام particle قرار دادیم و استایل اون رو هم مشخص کردیم ، بطوری که کل عرض و ارتفاع صفحه رو اشغال میکنه. قدم بعد اینه که در تگ اسکریپت نهایی کد زیر رو قرار بدیم :

میبینید که div مورد نظر رو انتخاب کردیم و متد particleground رو برای اون قرار دادیم. در اینصورت ذرات در div مورد نظر قرار میگیرن و میتونین اونو در خروجی ببینید. این پلاگین از مرورگرهایی که از canvas پشتیبانی میکنن ، پشتیبانی میکنه.

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

  • minSpeedX : حداقل سرعت ذرات در جهت افقی
  • maxSpeedX : حداکثر سرعت ذرات در جهت افقی
  • minSpeedY : حداقل سرعت ذرات در جهت عمودی
  • maxSpeedY : حداکثر سرعت ذرات در جهت عمودی
  • directionX : با استفاده از این خاصیت مشخص میکنید که ذرات در چه جهتی در راستای افقی جابجا بشن. مقادیر left و right و center رو دریافت میکنه

  • directionY : با استفاده از این خاصیت مشخص میکنید که ذرات در چه جهتی در راستای عمودی جابجا بشن. مقادیر up و down و center رو دریافت میکنه

  • density : با استفاده از این خصوصیت میتونین تعداد ذرات تولیدی و چگالی اونا رو مشخص کنید

  • dotColor : تغییر رنگ ذرات

  • lineColor : تغییر رنگ خطوط

  • particleRadius : تغییر شعاع ذرات

  • lineWidth : تغییر ضخامت خطوط

  • parallax : اگر مقدار این خصوصیت true باشه ، خاصیت parallax وجود داره

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

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

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

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

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

دیدگاه ها 6 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام جناب اسفندیاری
    ممنون بابت آموزش خوبتون
    میشه لطف کنید پلاگین های شخصی سازی scroll bar رو آموزش بدید؟
    ممنون

  • ‏‏

    salam
    shoma midunid in site bara ijade zarate ruye slideresh dare az che ketabkhunei estefade mikone??
    http://hostiran.net/
    ba estefade az ketabkhunei ke inja moarefi kardid nemishe zarato be halati ke ruye slidere un site mojud hast dar ovord
    ba tashakor

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram