Частица Js, не работающая над моим ruby on rails project

Я пытаюсь реализовать эффект частиц на моем проекте ruby on rails, но после выполнения некоторых учебных пособий и инструкций по набору частиц github я не получаю эффекта от своих локальных сервер, даже если я задаю серый фон. Может быть, вы можете указать, какая из них - моя ошибка или что мне не хватает. Вот мой код.Частица Js, не работающая над моим ruby on rails project

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require particles.js 
//= require app.js 
//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require_tree .

Application.css

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the bottom of the 
* compiled file so the styles you add here take precedence over styles defined in any styles 
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new 
* file per style scope. 
* 
*= require_tree . 
*= require_self 
*/

back.css

#particles-js{ 
    backgorund: #444; 
}

home.html.erb

<h1>Rubsol#home</h1> 
<p>Find me in app/views/rubsol/home.html.erb</p> 
<div id="particles-js"></div>

Я не прикладывая линии

<script src="particles.js"></script> 
<script src="particles.js"></script>

, потому что я думаю, что они не нужны, так как я использую // = require_tree, но я также попытался положить их, и это ничего не показывает.

back.css был создан только для того, чтобы установить цвет backgorund эффекта частиц, и я не размещаю содержимое particle.js и app.js, потому что я ничего не менял из этих файлов, они те же, которые вы можете скачать из github.

https://github.com/VincentGarreau/particles.js/

Вот что я получаю:

источник

2017-01-05 jportella

не забудьте проверить консоль javascript на наличие ошибок –

, но если у меня возникла проблема с javascript, у меня не было бы результата, и я не изменил бы файлы js. – jportella

Довольно уверен, что он все равно покажет ваш HTML в этом случае –

Я решил это то, что я сделал это изменить app.js файл следующим образом:

$(document).ready(function(){ 

console.log("Loading particles.js"); 

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 
     }, 
     "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": 5, 
     "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", 
     "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 
     }, 
     "push": { 
     "particles_nb": 4 
     }, 
     "remove": { 
     "particles_nb": 2 
     } 
    } 
    }, 
    "retina_detect": true, 
    "config_demo": { 
    "hide_card": false, 
    "background_color": "#b61924", 
    "background_image": "", 
    "background_position": "50% 50%", 
    "background_repeat": "no-repeat", 
    "background_size": "cover" 
    } 
    } 
); 
});

Так как я я работаю на уровне консоли. Я должен изменить имя файла app.js main.js, поскольку я работаю непосредственно на языке Java. Из этого я удаляю часть icles.js, и я использовал файл particle.min.js в папке поставщика, и в результате мне пришлось использовать // = require particle.min в файле application.js. Если вы знаете какой-либо другой способ заставить его работать, или вы можете лучше объяснить его или добавить некоторые детали к моему ответу, пожалуйста.

источник

2017-01-05 23:49:46 jportella

Частица Js, не работающая над моим ruby ​​on rails project

ответ

Смежные вопросы

Частица Js, не работающая над моим ruby on rails project