استفاده از افکت های particles در قالب های ips

[محمدیان]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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> 

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

[arash ranjbar]

سلام.

یه توضیحیم در مورد قرار دادن این افکت در صفحه ورود به مدیریت قرار بدید

[محمدیان]

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

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

html/core/admin/system/login.phtml

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

[www.7artsgroup.com]

سلام،

چهار اسکرین شات فوق نمایش داده نمی شوند.

   متشکرم