Roots Discourse

Import particle.js problems

sage9

#1

Hello,

I try to import https://github.com/VincentGarreau/particles.js in my theme but till now without any success. Is there a proper way to get it down this problem.

particleJS does not support import so I would like to include the file before main.js

I tried to import in common.js as it follows

const url = 'https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js';

    $.getScript( url )
        .done(function(  ) {
            console.log(particlesJS)
            particlesJS('particles-js', {

                'particles': {
                    'number': {
                        'value': 80,
                        'density': {
                            'enable': true,
                            'value_area': 700,
                        },
                    },
                    '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': 'grab',
                        },
                        'onclick': {
                            'enable': true,
                            'mode': 'push',
                        },
                        'resize': true,
                    },
                    'modes': {
                        'grab': {
                            'distance': 140,
                            '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,
            })
        })
        .fail(function( ) {
            alert()
        });

but than I have a problem with the linter, is there a way to ignore just on this specific case?


#2

Yes.