رفتن به مطلب

پست های پیشنهاد شده

  • مدیریت سایت

سلام در این آموزش می خواهیم بپردازیم به استفاده از افکت های particles در قالب های ips

Screenshot_2020-02-15 ای پی بورد ایران.png

جهت تنظیم و ایجاد افکت مورد علاقه خود می توانید به این سایت مراجعه نمایید:

https://vincentgarreau.com/particles.js/

در سمت چپ صفحه می توانید افکت مورد علاقه خودرا ساخته و از تنظیمات آن فایل خروجی گرفته و در قالب خود بکار ببرید.

در وسط صفحه هم فایل های مربوط به particles را می توانید دریافت نمایید، بعد از دانلود و ورود به این پوشه ما به فایل particles.min.js احتیاج داریم تا به قالب خود اضافه کنیم

برای اضافه کردن این فایل به منابع قالب مورد نظرمان به بخش قالب ها رفته و از آنجا گزینه مدیریت منابع را انتخاب نمایید:

Screenshot_2020-02-15%20%D9%82%D8%A7%D9%

سپس فایل particles.min.js را در قسمت انتخاب فایل، از مسیر کامپیوتر خود انتخاب می نمایید و ذخیره می نماییم، حال با جستجوی کلمه particles می توانید لینک این فایل را جهت افزوندن به قالب مشاهده نمایید:(لینک موجود در برچسب قالب را کپی نموده و به مرحله بعد بروید)

Screenshot_2020-02-15%20%D9%81%D8%A7%DB%

به لیست قالب های خود برگردید و روبروی نام قالبی که می خواهید این افکت را به آن اضافه کنید دکمه ویرایش( </> ) کلیک نمایید، در صفحه باز شده(global template) می بایست لینک فایلی که در مرحله قبل کپی کردید را با تگ اسکریپت بعد از تگ body قرار دهید:

<script src="{resource="particles.min.js" app="core" location="admin"}"></script>

بدین ترتیب فایل شما به قالب اضافه شده و قابل خواندن توسط قالب شما می شود:

Screenshot_2020-02-15%20%D8%AF%D8%B1%20%

در مکانی که می خواهید این افکت را به آن اضافه کنید کد فراخوانی آنرا اضافه نمایید:

 <div id="particles-js"></div>

بعد از این کد هم می بایست تنظیماتی که در بالا از سایت مربوط به particles را انجام دادید دریافت کرده(در انتهای صفحه گزینه download current config) و محتویات آن فایل که شامل تنظیمات افکت می باشد اضافه نمایید:

Screenshot_2020-02-15%20particles%20js%2

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

<script>
 particlesJS("particles-js",{
  "particles": {
    "number": {
      "value": 99,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#3fbe91"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 3,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}); 
</script> 

حال می بایست افکت مربوط با تنظیماتی که شما قرار دادید در مکانی که تعریف نموده اید به نمایش در آید.

لینک به ارسال
به اشتراک گذاری در سایت های دیگر
  • مدیریت سایت

پیشنهاد می کنیم این کار رو انجام ندید بدلیل اینکه پنل مدیریت مخصوص ورود مدیران هست و نیازی به زیباسازی ندارد

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

html/core/admin/system/login.phtml

بنده تست نکردم این مورد رو

لینک به ارسال
به اشتراک گذاری در سایت های دیگر
  • 1 ماه بعد...

به گفتگو بپیوندید

هم اکنون می توانید ارسال داشته باشید و بعد ثبت نام خود را در سایت کامل نمایید. اگر حساب کاربری در سایت دارید، جهت ارسال با حساب کاربری خود هم اکنون وارد سایت شوید

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • افزودن...