Как реализовать Particle.js в качестве фона для углового приложения - PullRequest
Новая
       10

Как реализовать Particle.js в качестве фона для углового приложения

0 голосов
/ 30 декабря 2018

Я работаю над угловым проектом, в котором я хочу использовать библиотеку частиц.js в качестве фона.Ссылка на библиотеку следующая: https://vincentgarreau.com/particles.js/.

Я использовал пакет npm (https://www.npmjs.com/package/angular-particle) в моем проекте. Код, который я пытался использовать для библиотеки в своем угловом проектеЯ использовал app.component.html, как указано в пакете angular-частиц в кавычках.

app.component.css: 

 body {
    margin: 0;
    font: normal 75% Arial, Helvetica, sans-serif;
    }

    canvas {
    display: block;
    }

    particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #b61924;
    /* background-image: url(""); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    }

    .count-particles {
    border-radius: 0 0 3px 3px;
    }

app.component.ts 

     import { Component, OnInit } from '@angular/core';

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
        myStyle: object = {};
        myParams: object = {};
        width = 100;
        height = 100;

        ngOnInit() {
            this.myStyle = {
                'position': 'fixed',
                'width': '100%',
                'height': '100%',
                'z-index': -1,
                'top': 0,
                'left': 0,
                'right': 0,
                'bottom': 0,
            };

            this.myParams = {
            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': 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
            };
        }
    }

Я ожидаю, что результат, представленный в анимации библиотекиicle.js в моем угловом проекте, соответствует приведенным ниже.Спасибо!

...