|
|
| Строка 1: |
Строка 1: |
| // Создаем div для отображения партиклов | | // Создаем элемент div для тестирования |
| var particlesDiv = document.createElement("div"); | | var testDiv = document.createElement("div"); |
| particlesDiv.id = "particles-js";
| | testDiv.textContent = "Common.js работает!"; |
| document.body.appendChild(particlesDiv); | | document.body.appendChild(testDiv); |
| | |
| // Добавляем стили для партиклов
| |
| var style = document.createElement("style");
| |
| style.innerHTML = "#particles-js { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }";
| |
| document.head.appendChild(style);
| |
| | |
| // Загружаем и активируем particles.js
| |
| mw.loader.load( 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js' ).then( function () {
| |
| particlesJS('particles-js', {
| |
| "particles": {
| |
| "number": {
| |
| "value": 80,
| |
| "density": {
| |
| "enable": true,
| |
| "value_area": 800
| |
| }
| |
| },
| |
| "color": {
| |
| "value": "#ffffff"
| |
| },
| |
| "shape": {
| |
| "type": "circle",
| |
| "stroke": {
| |
| "width": 0,
| |
| "color": "#000000"
| |
| },
| |
| "polygon": {
| |
| "nb_sides": 5
| |
| }
| |
| },
| |
| "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
| |
| });
| |
| });
| |
