start_controls_section(
'kng_particles_bg_section',
[
'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Particles Background', 'king-addons'),
'tab' => Controls_Manager::TAB_ADVANCED
]
);
$element->add_control(
'kng_particles_bg_switch',
[
'label' => esc_html__('Enable Particles', 'king-addons'),
'type' => Controls_Manager::SWITCHER,
'prefix_class' => 'kng-particles-bg-',
'frontend_available' => true
]
);
$element->add_control(
'kng_particles_bg_apply_changes',
[
'type' => Controls_Manager::RAW_HTML,
'raw' => '
' . esc_html__('After a few edits, the browser can slow down the animation to save resources. This is normal. To clean it up, just click on the Refresh button. It will refresh the Preview, so the animation will run smoothly again.', 'king-addons') . '',
'separator' => 'before',
'condition' => [
'kng_particles_bg_switch!' => ''
],
]
);
$element->add_control('kng_particles_bg_type',
[
'label' => esc_html__('Type', 'king-addons'),
'type' => Controls_Manager::SELECT,
'options' => [
'default' => esc_html__('Default', 'king-addons'),
'nasa' => esc_html__('NASA', 'king-addons'),
'bubble' => esc_html__('Bubble', 'king-addons'),
'snow' => esc_html__('Snow', 'king-addons'),
'nyan_cat' => esc_html__('Nyan Cat', 'king-addons'),
'custom_code' => esc_html__('Custom Code (JSON)', 'king-addons')
],
'default' => 'default',
'frontend_available' => true,
'label_block' => 'true',
'separator' => 'before',
'condition' => [
'kng_particles_bg_switch!' => ''
],
]
);
$element->add_control(
'kng_particles_bg_color',
[
'label' => esc_html__('Color', 'king-addons'),
'type' => Controls_Manager::COLOR,
'frontend_available' => true,
'default' => '#0027FF',
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => ['default', 'nasa', 'bubble', 'snow', 'nyan_cat']
],
]
);
$element->add_control(
'kng_particles_bg_anim_speed_default',
[
'label' => esc_html__('Animation Speed', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 6,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'default'
]
]
);
$element->add_control(
'kng_particles_bg_anim_speed_nasa',
[
'label' => esc_html__('Animation Speed', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 1,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'nasa'
]
]
);
$element->add_control(
'kng_particles_bg_anim_speed_bubble',
[
'label' => esc_html__('Animation Speed', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 8,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'bubble'
]
]
);
$element->add_control(
'kng_particles_bg_anim_speed_snow',
[
'label' => esc_html__('Animation Speed', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 6,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'snow'
]
]
);
$element->add_control(
'kng_particles_bg_anim_speed_nyan_cat',
[
'label' => esc_html__('Animation Speed', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 14,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'nyan_cat'
]
]
);
$element->add_control(
'kng_particles_bg_number_default',
[
'label' => esc_html__('Number of particles', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 160,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'default'
]
]
);
$element->add_control(
'kng_particles_bg_number_nasa',
[
'label' => esc_html__('Number of particles', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 250,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'nasa'
]
]
);
$element->add_control(
'kng_particles_bg_number_bubble',
[
'label' => esc_html__('Number of particles', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 15,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'bubble'
]
]
);
$element->add_control(
'kng_particles_bg_number_snow',
[
'label' => esc_html__('Number of particles', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 450,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'snow'
]
]
);
$element->add_control(
'kng_particles_bg_number_nyan_cat',
[
'label' => esc_html__('Number of particles', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 150,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'nyan_cat'
]
]
);
$element->add_control(
'kng_particles_bg_size_default',
[
'label' => esc_html__('Size of particle', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 3,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'default'
]
]
);
$element->add_control(
'kng_particles_bg_size_nasa',
[
'label' => esc_html__('Size of particle', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 3,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'nasa'
]
]
);
$element->add_control(
'kng_particles_bg_size_bubble',
[
'label' => esc_html__('Size of particle', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 50,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'bubble'
]
]
);
$element->add_control(
'kng_particles_bg_size_snow',
[
'label' => esc_html__('Size of particle', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 5,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'snow'
]
]
);
$element->add_control(
'kng_particles_bg_size_nyan_cat',
[
'label' => esc_html__('Size of particle', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'min' => 0,
'step' => 0.1,
'default' => 4,
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'nyan_cat'
]
]
);
$element->add_control(
'kng_particles_bg_z_index',
[
'label' => esc_html__('Z-Index (optional)', 'king-addons'),
'type' => Controls_Manager::NUMBER,
'frontend_available' => true,
'step' => 1,
'default' => 0,
'condition' => [
'kng_particles_bg_switch!' => ''
]
]
);
$element->add_control('kng_particles_bg_shape_type',
[
'label' => esc_html__('Shape Type', 'king-addons'),
'type' => Controls_Manager::SELECT,
'options' => [
'circle' => esc_html__('Circle', 'king-addons'),
'edge' => esc_html__('Edge', 'king-addons'),
'triangle' => esc_html__('Triangle', 'king-addons'),
'polygon' => esc_html__('Polygon', 'king-addons'),
'star' => esc_html__('Star', 'king-addons')
],
'default' => 'circle',
'frontend_available' => true,
'label_block' => 'true',
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => ['default', 'nasa', 'snow']
],
]
);
$element->add_control('kng_particles_bg_shape_type_bubble',
[
'label' => esc_html__('Shape Type', 'king-addons'),
'type' => Controls_Manager::SELECT,
'options' => [
'circle' => esc_html__('Circle', 'king-addons'),
'edge' => esc_html__('Edge', 'king-addons'),
'triangle' => esc_html__('Triangle', 'king-addons'),
'polygon' => esc_html__('Polygon', 'king-addons')
],
'default' => 'circle',
'frontend_available' => true,
'label_block' => 'true',
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'bubble'
],
]
);
$element->add_control('kng_particles_bg_shape_type_nyan_cat',
[
'label' => esc_html__('Shape Type', 'king-addons'),
'type' => Controls_Manager::SELECT,
'options' => [
'circle' => esc_html__('Circle', 'king-addons'),
'edge' => esc_html__('Edge', 'king-addons'),
'triangle' => esc_html__('Triangle', 'king-addons'),
'polygon' => esc_html__('Polygon', 'king-addons'),
'star' => esc_html__('Star', 'king-addons')
],
'default' => 'star',
'frontend_available' => true,
'label_block' => 'true',
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'nyan_cat'
],
]
);
$element->add_control('kng_particles_bg_move_direction',
[
'label' => esc_html__('Move Direction', 'king-addons'),
'type' => Controls_Manager::SELECT,
'options' => [
'none' => esc_html__('None', 'king-addons'),
'top' => esc_html__('Top', 'king-addons'),
'top-right' => esc_html__('Top-right', 'king-addons'),
'bottom-right' => esc_html__('Bottom-right', 'king-addons'),
'bottom' => esc_html__('Bottom', 'king-addons'),
'bottom-left' => esc_html__('Bottom-left', 'king-addons'),
'left' => esc_html__('Left', 'king-addons'),
'top-left' => esc_html__('Top-left', 'king-addons')
],
'default' => 'none',
'frontend_available' => true,
'label_block' => 'true',
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => ['default', 'nasa', 'bubble']
],
]
);
$element->add_control('kng_particles_bg_move_direction_snow',
[
'label' => esc_html__('Move Direction', 'king-addons'),
'type' => Controls_Manager::SELECT,
'options' => [
'none' => esc_html__('None', 'king-addons'),
'top' => esc_html__('Top', 'king-addons'),
'top-right' => esc_html__('Top-right', 'king-addons'),
'bottom-right' => esc_html__('Bottom-right', 'king-addons'),
'bottom' => esc_html__('Bottom', 'king-addons'),
'bottom-left' => esc_html__('Bottom-left', 'king-addons'),
'left' => esc_html__('Left', 'king-addons'),
'top-left' => esc_html__('Top-left', 'king-addons'),
],
'default' => 'bottom',
'frontend_available' => true,
'label_block' => 'true',
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'snow'
],
]
);
$element->add_control('kng_particles_bg_move_direction_nyan_cat',
[
'label' => esc_html__('Move Direction', 'king-addons'),
'type' => Controls_Manager::SELECT,
'options' => [
'none' => esc_html__('None', 'king-addons'),
'top' => esc_html__('Top', 'king-addons'),
'top-right' => esc_html__('Top-right', 'king-addons'),
'bottom-right' => esc_html__('Bottom-right', 'king-addons'),
'bottom' => esc_html__('Bottom', 'king-addons'),
'bottom-left' => esc_html__('Bottom-left', 'king-addons'),
'left' => esc_html__('Left', 'king-addons'),
'top-left' => esc_html__('Top-left', 'king-addons'),
],
'default' => 'left',
'frontend_available' => true,
'label_block' => 'true',
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'nyan_cat'
],
]
);
$element->add_control(
'kng_particles_bg_custom_code_guide',
[
'type' => Controls_Manager::RAW_HTML,
'raw' => esc_html__('To create a custom animation, go to ', 'king-addons') . '
' . esc_html__('HERE', 'king-addons') . ', ' . esc_html__('then past the generated JSON code in the field (open the downloaded config file in any text editor).', 'king-addons'),
'separator' => 'before',
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'custom_code'
],
]
);
$element->add_control('kng_particles_bg_custom_code',
[
'label' => esc_html__('Custom Code (JSON)', 'king-addons'),
'type' => Controls_Manager::CODE,
'language' => 'json',
'default' => 'CODE_FROM_JSON_FILE',
'frontend_available' => true,
'label_block' => 'true',
'condition' => [
'kng_particles_bg_switch!' => '',
'kng_particles_bg_type' => 'custom_code'
],
]
);
$element->end_controls_section();
}
public static function renderAnimation(Element_Base $element): void
{
if (!empty($element->get_settings_for_display('kng_particles_bg_switch'))) {
if (!wp_script_is(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles' . '-' . 'particles')) {
wp_enqueue_script(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles' . '-' . 'particles', '', array('jquery'), KING_ADDONS_VERSION);
}
if (('container' === $element->get_type() || 'section' === $element->get_type()) && 'yes' === $element->get_settings('kng_particles_bg_switch')
) {
$settings = $element->get_settings();
$element_ID = $element->get_id();
$type = esc_js($settings['kng_particles_bg_type']);
$color = esc_js($settings['kng_particles_bg_color']);
$config = '';
switch ($type) {
case 'default':
$speed = esc_js($settings['kng_particles_bg_anim_speed_default']);
$shape_type = esc_js($settings['kng_particles_bg_shape_type']);
$move_direction = esc_js($settings['kng_particles_bg_move_direction']);
$number = esc_js($settings['kng_particles_bg_number_default']);
$size = esc_js($settings['kng_particles_bg_size_default']);
$config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type];
break;
case 'nasa':
$speed = esc_js($settings['kng_particles_bg_anim_speed_nasa']);
$shape_type = esc_js($settings['kng_particles_bg_shape_type']);
$move_direction = esc_js($settings['kng_particles_bg_move_direction']);
$number = esc_js($settings['kng_particles_bg_number_nasa']);
$size = esc_js($settings['kng_particles_bg_size_nasa']);
$config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type];
break;
case 'bubble':
$speed = esc_js($settings['kng_particles_bg_anim_speed_bubble']);
$shape_type = esc_js($settings['kng_particles_bg_shape_type_bubble']);
$move_direction = esc_js($settings['kng_particles_bg_move_direction']);
$number = esc_js($settings['kng_particles_bg_number_bubble']);
$size = esc_js($settings['kng_particles_bg_size_bubble']);
$config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type];
break;
case 'snow':
$speed = esc_js($settings['kng_particles_bg_anim_speed_snow']);
$shape_type = esc_js($settings['kng_particles_bg_shape_type']);
$move_direction = esc_js($settings['kng_particles_bg_move_direction_snow']);
$number = esc_js($settings['kng_particles_bg_number_snow']);
$size = esc_js($settings['kng_particles_bg_size_snow']);
$config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type];
break;
case 'nyan_cat':
$speed = esc_js($settings['kng_particles_bg_anim_speed_nyan_cat']);
$shape_type = esc_js($settings['kng_particles_bg_shape_type_nyan_cat']);
$move_direction = esc_js($settings['kng_particles_bg_move_direction_nyan_cat']);
$number = esc_js($settings['kng_particles_bg_number_nyan_cat']);
$size = esc_js($settings['kng_particles_bg_size_nyan_cat']);
$config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type];
break;
case 'custom_code':
$config = $settings['kng_particles_bg_custom_code'];
break;
}
$inline_js_element = "document.querySelector('.elementor-element-" . esc_js($element_ID) . "').insertAdjacentHTML('afterbegin', '" .
'
' . "');";
$inline_js_config = '';
if (self::is_json($config)) {
$inline_js_config = 'document.addEventListener("DOMContentLoaded", function() {' . "particlesJS('king-addons-particles-container-" . esc_js($element_ID) . "'," . $config . ");" . '});';
}
$inline_js = $inline_js_element . $inline_js_config;
wp_print_inline_script_tag($inline_js);
}
}
}
public static function is_json($string): bool
{
json_decode($string);
return (json_last_error() == JSON_ERROR_NONE);
}
public static function getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size): array
{
return [
'default' => '{
"particles": {
"number": {
"value": ' . $number . ',
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "' . $color . '"
},
"shape": {
"type": "' . $shape_type . '",
"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": ' . $size . ',
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "' . $color . '",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": ' . $speed . ',
"direction": "' . $move_direction . '",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
},
"onclick": {
"enable": false,
"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
}',
'nasa' => '{
"particles": {
"number": {
"value": ' . $number . ',
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "' . $color . '"
},
"shape": {
"type": "' . $shape_type . '",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": ' . $size . ',
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": ' . $speed . ',
"direction": "' . $move_direction . '",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "bubble"
},
"onclick": {
"enable": false,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}',
'bubble' => '{
"particles": {
"number": {
"value": ' . $number . ',
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "' . $color . '"
},
"shape": {
"type": "' . $shape_type . '",
"stroke": {
"width": 0,
"color": "#000"
},
"polygon": {
"nb_sides": 6
}
},
"opacity": {
"value": 0.3,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": ' . $size . ',
"random": false,
"anim": {
"enable": true,
"speed": 10,
"size_min": 40,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 200,
"color": "#ffffff",
"opacity": 1,
"width": 2
},
"move": {
"enable": true,
"speed": ' . $speed . ',
"direction": "' . $move_direction . '",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": false,
"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
}',
'snow' => '{
"particles": {
"number": {
"value": ' . $number . ',
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "' . $color . '"
},
"shape": {
"type": "' . $shape_type . '",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": ' . $size . ',
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 500,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": ' . $speed . ',
"direction": "' . $move_direction . '",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "bubble"
},
"onclick": {
"enable": false,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0.5
}
},
"bubble": {
"distance": 400,
"size": 4,
"duration": 0.3,
"opacity": 1,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}',
'nyan_cat' => '{
"particles": {
"number": {
"value": ' . $number . ',
"density": {
"enable": false,
"value_area": 800
}
},
"color": {
"value": "' . $color . '"
},
"shape": {
"type": "' . $shape_type . '",
"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": ' . $size . ',
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": ' . $speed . ',
"direction": "' . $move_direction . '",
"random": false,
"straight": true,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": false,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 200,
"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
}'
];
}
}