← All changes
|
includes/features/Particles_Background/Particles_Background.php
+1144
-0
51.1.2
→
51.1.83
View file →
| @@ -1,0 +1,1144 @@ | ||
| 1 | +<?php /** @noinspection PhpUnused, DuplicatedCode,SpellCheckingInspection */ | |
| 2 | + | |
| 3 | +namespace King_Addons; | |
| 4 | + | |
| 5 | +use Elementor\Controls_Manager; | |
| 6 | +use Elementor\Element_Base; | |
| 7 | + | |
| 8 | +if (!defined('ABSPATH')) { | |
| 9 | + exit; // Exit if accessed directly. | |
| 10 | +} | |
| 11 | + | |
| 12 | +class Particles_Background | |
| 13 | +{ | |
| 14 | + private static ?Particles_Background $_instance = null; | |
| 15 | + | |
| 16 | + public static function instance(): Particles_Background | |
| 17 | + { | |
| 18 | + if (is_null(self::$_instance)) { | |
| 19 | + self::$_instance = new self(); | |
| 20 | + } | |
| 21 | + return self::$_instance; | |
| 22 | + } | |
| 23 | + | |
| 24 | + public function __construct() | |
| 25 | + { | |
| 26 | + add_action('elementor/preview/enqueue_scripts', [__CLASS__, 'enqueueScripts'], 1); | |
| 27 | + add_action('elementor/element/section/section_advanced/after_section_end', [__CLASS__, 'addControls'], 1); | |
| 28 | + add_action('elementor/frontend/section/after_render', [__CLASS__, 'renderAnimation'], 1); | |
| 29 | + add_action('elementor/element/container/section_layout/after_section_end', array($this, 'addControls'), 10); | |
| 30 | + add_action('elementor/frontend/container/after_render', array($this, 'renderAnimation'), 10); | |
| 31 | + } | |
| 32 | + | |
| 33 | + public static function enqueueScripts(): void | |
| 34 | + { | |
| 35 | + if (!wp_script_is(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles' . '-' . 'particles')) { | |
| 36 | + wp_enqueue_script(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles' . '-' . 'particles', '', array('jquery'), KING_ADDONS_VERSION); | |
| 37 | + } | |
| 38 | + | |
| 39 | + if (!wp_script_is(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles-background' . '-' . 'preview-handler')) { | |
| 40 | + wp_enqueue_script(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles-background' . '-' . 'preview-handler', '', array('jquery'), KING_ADDONS_VERSION); | |
| 41 | + } | |
| 42 | + } | |
| 43 | + | |
| 44 | + public static function addControls(Element_Base $element): void | |
| 45 | + { | |
| 46 | + $element->start_controls_section( | |
| 47 | + 'kng_particles_bg_section', | |
| 48 | + [ | |
| 49 | + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Particles Background', 'king-addons'), | |
| 50 | + 'tab' => Controls_Manager::TAB_ADVANCED | |
| 51 | + ] | |
| 52 | + ); | |
| 53 | + | |
| 54 | + $element->add_control( | |
| 55 | + 'kng_particles_bg_switch', | |
| 56 | + [ | |
| 57 | + 'label' => esc_html__('Enable Particles', 'king-addons'), | |
| 58 | + 'type' => Controls_Manager::SWITCHER, | |
| 59 | + 'prefix_class' => 'kng-particles-bg-', | |
| 60 | + 'frontend_available' => true | |
| 61 | + ] | |
| 62 | + ); | |
| 63 | + | |
| 64 | + $element->add_control( | |
| 65 | + 'kng_particles_bg_apply_changes', | |
| 66 | + [ | |
| 67 | + 'type' => Controls_Manager::RAW_HTML, | |
| 68 | + 'raw' => '<div class="elementor-update-preview king-addons-editor-preview-update"><span>' . 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') . '</span><button class="elementor-button elementor-button-success" onclick="elementor.reloadPreview();">' . esc_html__('Refresh', 'king-addons') . '</button>', | |
| 69 | + 'separator' => 'before', | |
| 70 | + 'condition' => [ | |
| 71 | + 'kng_particles_bg_switch!' => '' | |
| 72 | + ], | |
| 73 | + ] | |
| 74 | + ); | |
| 75 | + | |
| 76 | + $element->add_control('kng_particles_bg_type', | |
| 77 | + [ | |
| 78 | + 'label' => esc_html__('Type', 'king-addons'), | |
| 79 | + 'type' => Controls_Manager::SELECT, | |
| 80 | + 'options' => [ | |
| 81 | + 'default' => esc_html__('Default', 'king-addons'), | |
| 82 | + 'nasa' => esc_html__('NASA', 'king-addons'), | |
| 83 | + 'bubble' => esc_html__('Bubble', 'king-addons'), | |
| 84 | + 'snow' => esc_html__('Snow', 'king-addons'), | |
| 85 | + 'nyan_cat' => esc_html__('Nyan Cat', 'king-addons'), | |
| 86 | + 'custom_code' => esc_html__('Custom Code (JSON)', 'king-addons') | |
| 87 | + ], | |
| 88 | + 'default' => 'default', | |
| 89 | + 'frontend_available' => true, | |
| 90 | + 'label_block' => 'true', | |
| 91 | + 'separator' => 'before', | |
| 92 | + 'condition' => [ | |
| 93 | + 'kng_particles_bg_switch!' => '' | |
| 94 | + ], | |
| 95 | + ] | |
| 96 | + ); | |
| 97 | + | |
| 98 | + $element->add_control( | |
| 99 | + 'kng_particles_bg_color', | |
| 100 | + [ | |
| 101 | + 'label' => esc_html__('Color', 'king-addons'), | |
| 102 | + 'type' => Controls_Manager::COLOR, | |
| 103 | + 'frontend_available' => true, | |
| 104 | + 'default' => '#0027FF', | |
| 105 | + 'condition' => [ | |
| 106 | + 'kng_particles_bg_switch!' => '', | |
| 107 | + 'kng_particles_bg_type' => ['default', 'nasa', 'bubble', 'snow', 'nyan_cat'] | |
| 108 | + ], | |
| 109 | + ] | |
| 110 | + ); | |
| 111 | + | |
| 112 | + $element->add_control( | |
| 113 | + 'kng_particles_bg_anim_speed_default', | |
| 114 | + [ | |
| 115 | + 'label' => esc_html__('Animation Speed', 'king-addons'), | |
| 116 | + 'type' => Controls_Manager::NUMBER, | |
| 117 | + 'frontend_available' => true, | |
| 118 | + 'min' => 0, | |
| 119 | + 'step' => 0.1, | |
| 120 | + 'default' => 6, | |
| 121 | + 'condition' => [ | |
| 122 | + 'kng_particles_bg_switch!' => '', | |
| 123 | + 'kng_particles_bg_type' => 'default' | |
| 124 | + ] | |
| 125 | + ] | |
| 126 | + ); | |
| 127 | + | |
| 128 | + $element->add_control( | |
| 129 | + 'kng_particles_bg_anim_speed_nasa', | |
| 130 | + [ | |
| 131 | + 'label' => esc_html__('Animation Speed', 'king-addons'), | |
| 132 | + 'type' => Controls_Manager::NUMBER, | |
| 133 | + 'frontend_available' => true, | |
| 134 | + 'min' => 0, | |
| 135 | + 'step' => 0.1, | |
| 136 | + 'default' => 1, | |
| 137 | + 'condition' => [ | |
| 138 | + 'kng_particles_bg_switch!' => '', | |
| 139 | + 'kng_particles_bg_type' => 'nasa' | |
| 140 | + ] | |
| 141 | + ] | |
| 142 | + ); | |
| 143 | + | |
| 144 | + $element->add_control( | |
| 145 | + 'kng_particles_bg_anim_speed_bubble', | |
| 146 | + [ | |
| 147 | + 'label' => esc_html__('Animation Speed', 'king-addons'), | |
| 148 | + 'type' => Controls_Manager::NUMBER, | |
| 149 | + 'frontend_available' => true, | |
| 150 | + 'min' => 0, | |
| 151 | + 'step' => 0.1, | |
| 152 | + 'default' => 8, | |
| 153 | + 'condition' => [ | |
| 154 | + 'kng_particles_bg_switch!' => '', | |
| 155 | + 'kng_particles_bg_type' => 'bubble' | |
| 156 | + ] | |
| 157 | + ] | |
| 158 | + ); | |
| 159 | + | |
| 160 | + $element->add_control( | |
| 161 | + 'kng_particles_bg_anim_speed_snow', | |
| 162 | + [ | |
| 163 | + 'label' => esc_html__('Animation Speed', 'king-addons'), | |
| 164 | + 'type' => Controls_Manager::NUMBER, | |
| 165 | + 'frontend_available' => true, | |
| 166 | + 'min' => 0, | |
| 167 | + 'step' => 0.1, | |
| 168 | + 'default' => 6, | |
| 169 | + 'condition' => [ | |
| 170 | + 'kng_particles_bg_switch!' => '', | |
| 171 | + 'kng_particles_bg_type' => 'snow' | |
| 172 | + ] | |
| 173 | + ] | |
| 174 | + ); | |
| 175 | + | |
| 176 | + $element->add_control( | |
| 177 | + 'kng_particles_bg_anim_speed_nyan_cat', | |
| 178 | + [ | |
| 179 | + 'label' => esc_html__('Animation Speed', 'king-addons'), | |
| 180 | + 'type' => Controls_Manager::NUMBER, | |
| 181 | + 'frontend_available' => true, | |
| 182 | + 'min' => 0, | |
| 183 | + 'step' => 0.1, | |
| 184 | + 'default' => 14, | |
| 185 | + 'condition' => [ | |
| 186 | + 'kng_particles_bg_switch!' => '', | |
| 187 | + 'kng_particles_bg_type' => 'nyan_cat' | |
| 188 | + ] | |
| 189 | + ] | |
| 190 | + ); | |
| 191 | + | |
| 192 | + $element->add_control( | |
| 193 | + 'kng_particles_bg_number_default', | |
| 194 | + [ | |
| 195 | + 'label' => esc_html__('Number of particles', 'king-addons'), | |
| 196 | + 'type' => Controls_Manager::NUMBER, | |
| 197 | + 'frontend_available' => true, | |
| 198 | + 'min' => 0, | |
| 199 | + 'step' => 0.1, | |
| 200 | + 'default' => 160, | |
| 201 | + 'condition' => [ | |
| 202 | + 'kng_particles_bg_switch!' => '', | |
| 203 | + 'kng_particles_bg_type' => 'default' | |
| 204 | + ] | |
| 205 | + ] | |
| 206 | + ); | |
| 207 | + | |
| 208 | + $element->add_control( | |
| 209 | + 'kng_particles_bg_number_nasa', | |
| 210 | + [ | |
| 211 | + 'label' => esc_html__('Number of particles', 'king-addons'), | |
| 212 | + 'type' => Controls_Manager::NUMBER, | |
| 213 | + 'frontend_available' => true, | |
| 214 | + 'min' => 0, | |
| 215 | + 'step' => 0.1, | |
| 216 | + 'default' => 250, | |
| 217 | + 'condition' => [ | |
| 218 | + 'kng_particles_bg_switch!' => '', | |
| 219 | + 'kng_particles_bg_type' => 'nasa' | |
| 220 | + ] | |
| 221 | + ] | |
| 222 | + ); | |
| 223 | + | |
| 224 | + $element->add_control( | |
| 225 | + 'kng_particles_bg_number_bubble', | |
| 226 | + [ | |
| 227 | + 'label' => esc_html__('Number of particles', 'king-addons'), | |
| 228 | + 'type' => Controls_Manager::NUMBER, | |
| 229 | + 'frontend_available' => true, | |
| 230 | + 'min' => 0, | |
| 231 | + 'step' => 0.1, | |
| 232 | + 'default' => 15, | |
| 233 | + 'condition' => [ | |
| 234 | + 'kng_particles_bg_switch!' => '', | |
| 235 | + 'kng_particles_bg_type' => 'bubble' | |
| 236 | + ] | |
| 237 | + ] | |
| 238 | + ); | |
| 239 | + | |
| 240 | + $element->add_control( | |
| 241 | + 'kng_particles_bg_number_snow', | |
| 242 | + [ | |
| 243 | + 'label' => esc_html__('Number of particles', 'king-addons'), | |
| 244 | + 'type' => Controls_Manager::NUMBER, | |
| 245 | + 'frontend_available' => true, | |
| 246 | + 'min' => 0, | |
| 247 | + 'step' => 0.1, | |
| 248 | + 'default' => 450, | |
| 249 | + 'condition' => [ | |
| 250 | + 'kng_particles_bg_switch!' => '', | |
| 251 | + 'kng_particles_bg_type' => 'snow' | |
| 252 | + ] | |
| 253 | + ] | |
| 254 | + ); | |
| 255 | + | |
| 256 | + $element->add_control( | |
| 257 | + 'kng_particles_bg_number_nyan_cat', | |
| 258 | + [ | |
| 259 | + 'label' => esc_html__('Number of particles', 'king-addons'), | |
| 260 | + 'type' => Controls_Manager::NUMBER, | |
| 261 | + 'frontend_available' => true, | |
| 262 | + 'min' => 0, | |
| 263 | + 'step' => 0.1, | |
| 264 | + 'default' => 150, | |
| 265 | + 'condition' => [ | |
| 266 | + 'kng_particles_bg_switch!' => '', | |
| 267 | + 'kng_particles_bg_type' => 'nyan_cat' | |
| 268 | + ] | |
| 269 | + ] | |
| 270 | + ); | |
| 271 | + | |
| 272 | + $element->add_control( | |
| 273 | + 'kng_particles_bg_size_default', | |
| 274 | + [ | |
| 275 | + 'label' => esc_html__('Size of particle', 'king-addons'), | |
| 276 | + 'type' => Controls_Manager::NUMBER, | |
| 277 | + 'frontend_available' => true, | |
| 278 | + 'min' => 0, | |
| 279 | + 'step' => 0.1, | |
| 280 | + 'default' => 3, | |
| 281 | + 'condition' => [ | |
| 282 | + 'kng_particles_bg_switch!' => '', | |
| 283 | + 'kng_particles_bg_type' => 'default' | |
| 284 | + ] | |
| 285 | + ] | |
| 286 | + ); | |
| 287 | + | |
| 288 | + $element->add_control( | |
| 289 | + 'kng_particles_bg_size_nasa', | |
| 290 | + [ | |
| 291 | + 'label' => esc_html__('Size of particle', 'king-addons'), | |
| 292 | + 'type' => Controls_Manager::NUMBER, | |
| 293 | + 'frontend_available' => true, | |
| 294 | + 'min' => 0, | |
| 295 | + 'step' => 0.1, | |
| 296 | + 'default' => 3, | |
| 297 | + 'condition' => [ | |
| 298 | + 'kng_particles_bg_switch!' => '', | |
| 299 | + 'kng_particles_bg_type' => 'nasa' | |
| 300 | + ] | |
| 301 | + ] | |
| 302 | + ); | |
| 303 | + | |
| 304 | + $element->add_control( | |
| 305 | + 'kng_particles_bg_size_bubble', | |
| 306 | + [ | |
| 307 | + 'label' => esc_html__('Size of particle', 'king-addons'), | |
| 308 | + 'type' => Controls_Manager::NUMBER, | |
| 309 | + 'frontend_available' => true, | |
| 310 | + 'min' => 0, | |
| 311 | + 'step' => 0.1, | |
| 312 | + 'default' => 50, | |
| 313 | + 'condition' => [ | |
| 314 | + 'kng_particles_bg_switch!' => '', | |
| 315 | + 'kng_particles_bg_type' => 'bubble' | |
| 316 | + ] | |
| 317 | + ] | |
| 318 | + ); | |
| 319 | + | |
| 320 | + $element->add_control( | |
| 321 | + 'kng_particles_bg_size_snow', | |
| 322 | + [ | |
| 323 | + 'label' => esc_html__('Size of particle', 'king-addons'), | |
| 324 | + 'type' => Controls_Manager::NUMBER, | |
| 325 | + 'frontend_available' => true, | |
| 326 | + 'min' => 0, | |
| 327 | + 'step' => 0.1, | |
| 328 | + 'default' => 5, | |
| 329 | + 'condition' => [ | |
| 330 | + 'kng_particles_bg_switch!' => '', | |
| 331 | + 'kng_particles_bg_type' => 'snow' | |
| 332 | + ] | |
| 333 | + ] | |
| 334 | + ); | |
| 335 | + | |
| 336 | + $element->add_control( | |
| 337 | + 'kng_particles_bg_size_nyan_cat', | |
| 338 | + [ | |
| 339 | + 'label' => esc_html__('Size of particle', 'king-addons'), | |
| 340 | + 'type' => Controls_Manager::NUMBER, | |
| 341 | + 'frontend_available' => true, | |
| 342 | + 'min' => 0, | |
| 343 | + 'step' => 0.1, | |
| 344 | + 'default' => 4, | |
| 345 | + 'condition' => [ | |
| 346 | + 'kng_particles_bg_switch!' => '', | |
| 347 | + 'kng_particles_bg_type' => 'nyan_cat' | |
| 348 | + ] | |
| 349 | + ] | |
| 350 | + ); | |
| 351 | + | |
| 352 | + $element->add_control( | |
| 353 | + 'kng_particles_bg_z_index', | |
| 354 | + [ | |
| 355 | + 'label' => esc_html__('Z-Index (optional)', 'king-addons'), | |
| 356 | + 'type' => Controls_Manager::NUMBER, | |
| 357 | + 'frontend_available' => true, | |
| 358 | + 'step' => 1, | |
| 359 | + 'default' => 0, | |
| 360 | + 'condition' => [ | |
| 361 | + 'kng_particles_bg_switch!' => '' | |
| 362 | + ] | |
| 363 | + ] | |
| 364 | + ); | |
| 365 | + | |
| 366 | + $element->add_control('kng_particles_bg_shape_type', | |
| 367 | + [ | |
| 368 | + 'label' => esc_html__('Shape Type', 'king-addons'), | |
| 369 | + 'type' => Controls_Manager::SELECT, | |
| 370 | + 'options' => [ | |
| 371 | + 'circle' => esc_html__('Circle', 'king-addons'), | |
| 372 | + 'edge' => esc_html__('Edge', 'king-addons'), | |
| 373 | + 'triangle' => esc_html__('Triangle', 'king-addons'), | |
| 374 | + 'polygon' => esc_html__('Polygon', 'king-addons'), | |
| 375 | + 'star' => esc_html__('Star', 'king-addons') | |
| 376 | + ], | |
| 377 | + 'default' => 'circle', | |
| 378 | + 'frontend_available' => true, | |
| 379 | + 'label_block' => 'true', | |
| 380 | + 'condition' => [ | |
| 381 | + 'kng_particles_bg_switch!' => '', | |
| 382 | + 'kng_particles_bg_type' => ['default', 'nasa', 'snow'] | |
| 383 | + ], | |
| 384 | + ] | |
| 385 | + ); | |
| 386 | + | |
| 387 | + $element->add_control('kng_particles_bg_shape_type_bubble', | |
| 388 | + [ | |
| 389 | + 'label' => esc_html__('Shape Type', 'king-addons'), | |
| 390 | + 'type' => Controls_Manager::SELECT, | |
| 391 | + 'options' => [ | |
| 392 | + 'circle' => esc_html__('Circle', 'king-addons'), | |
| 393 | + 'edge' => esc_html__('Edge', 'king-addons'), | |
| 394 | + 'triangle' => esc_html__('Triangle', 'king-addons'), | |
| 395 | + 'polygon' => esc_html__('Polygon', 'king-addons') | |
| 396 | + ], | |
| 397 | + 'default' => 'circle', | |
| 398 | + 'frontend_available' => true, | |
| 399 | + 'label_block' => 'true', | |
| 400 | + 'condition' => [ | |
| 401 | + 'kng_particles_bg_switch!' => '', | |
| 402 | + 'kng_particles_bg_type' => 'bubble' | |
| 403 | + ], | |
| 404 | + ] | |
| 405 | + ); | |
| 406 | + | |
| 407 | + $element->add_control('kng_particles_bg_shape_type_nyan_cat', | |
| 408 | + [ | |
| 409 | + 'label' => esc_html__('Shape Type', 'king-addons'), | |
| 410 | + 'type' => Controls_Manager::SELECT, | |
| 411 | + 'options' => [ | |
| 412 | + 'circle' => esc_html__('Circle', 'king-addons'), | |
| 413 | + 'edge' => esc_html__('Edge', 'king-addons'), | |
| 414 | + 'triangle' => esc_html__('Triangle', 'king-addons'), | |
| 415 | + 'polygon' => esc_html__('Polygon', 'king-addons'), | |
| 416 | + 'star' => esc_html__('Star', 'king-addons') | |
| 417 | + ], | |
| 418 | + 'default' => 'star', | |
| 419 | + 'frontend_available' => true, | |
| 420 | + 'label_block' => 'true', | |
| 421 | + 'condition' => [ | |
| 422 | + 'kng_particles_bg_switch!' => '', | |
| 423 | + 'kng_particles_bg_type' => 'nyan_cat' | |
| 424 | + ], | |
| 425 | + ] | |
| 426 | + ); | |
| 427 | + | |
| 428 | + $element->add_control('kng_particles_bg_move_direction', | |
| 429 | + [ | |
| 430 | + 'label' => esc_html__('Move Direction', 'king-addons'), | |
| 431 | + 'type' => Controls_Manager::SELECT, | |
| 432 | + 'options' => [ | |
| 433 | + 'none' => esc_html__('None', 'king-addons'), | |
| 434 | + 'top' => esc_html__('Top', 'king-addons'), | |
| 435 | + 'top-right' => esc_html__('Top-right', 'king-addons'), | |
| 436 | + 'bottom-right' => esc_html__('Bottom-right', 'king-addons'), | |
| 437 | + 'bottom' => esc_html__('Bottom', 'king-addons'), | |
| 438 | + 'bottom-left' => esc_html__('Bottom-left', 'king-addons'), | |
| 439 | + 'left' => esc_html__('Left', 'king-addons'), | |
| 440 | + 'top-left' => esc_html__('Top-left', 'king-addons') | |
| 441 | + ], | |
| 442 | + 'default' => 'none', | |
| 443 | + 'frontend_available' => true, | |
| 444 | + 'label_block' => 'true', | |
| 445 | + 'condition' => [ | |
| 446 | + 'kng_particles_bg_switch!' => '', | |
| 447 | + 'kng_particles_bg_type' => ['default', 'nasa', 'bubble'] | |
| 448 | + ], | |
| 449 | + ] | |
| 450 | + ); | |
| 451 | + | |
| 452 | + $element->add_control('kng_particles_bg_move_direction_snow', | |
| 453 | + [ | |
| 454 | + 'label' => esc_html__('Move Direction', 'king-addons'), | |
| 455 | + 'type' => Controls_Manager::SELECT, | |
| 456 | + 'options' => [ | |
| 457 | + 'none' => esc_html__('None', 'king-addons'), | |
| 458 | + 'top' => esc_html__('Top', 'king-addons'), | |
| 459 | + 'top-right' => esc_html__('Top-right', 'king-addons'), | |
| 460 | + 'bottom-right' => esc_html__('Bottom-right', 'king-addons'), | |
| 461 | + 'bottom' => esc_html__('Bottom', 'king-addons'), | |
| 462 | + 'bottom-left' => esc_html__('Bottom-left', 'king-addons'), | |
| 463 | + 'left' => esc_html__('Left', 'king-addons'), | |
| 464 | + 'top-left' => esc_html__('Top-left', 'king-addons'), | |
| 465 | + ], | |
| 466 | + 'default' => 'bottom', | |
| 467 | + 'frontend_available' => true, | |
| 468 | + 'label_block' => 'true', | |
| 469 | + 'condition' => [ | |
| 470 | + 'kng_particles_bg_switch!' => '', | |
| 471 | + 'kng_particles_bg_type' => 'snow' | |
| 472 | + ], | |
| 473 | + ] | |
| 474 | + ); | |
| 475 | + | |
| 476 | + $element->add_control('kng_particles_bg_move_direction_nyan_cat', | |
| 477 | + [ | |
| 478 | + 'label' => esc_html__('Move Direction', 'king-addons'), | |
| 479 | + 'type' => Controls_Manager::SELECT, | |
| 480 | + 'options' => [ | |
| 481 | + 'none' => esc_html__('None', 'king-addons'), | |
| 482 | + 'top' => esc_html__('Top', 'king-addons'), | |
| 483 | + 'top-right' => esc_html__('Top-right', 'king-addons'), | |
| 484 | + 'bottom-right' => esc_html__('Bottom-right', 'king-addons'), | |
| 485 | + 'bottom' => esc_html__('Bottom', 'king-addons'), | |
| 486 | + 'bottom-left' => esc_html__('Bottom-left', 'king-addons'), | |
| 487 | + 'left' => esc_html__('Left', 'king-addons'), | |
| 488 | + 'top-left' => esc_html__('Top-left', 'king-addons'), | |
| 489 | + ], | |
| 490 | + 'default' => 'left', | |
| 491 | + 'frontend_available' => true, | |
| 492 | + 'label_block' => 'true', | |
| 493 | + 'condition' => [ | |
| 494 | + 'kng_particles_bg_switch!' => '', | |
| 495 | + 'kng_particles_bg_type' => 'nyan_cat' | |
| 496 | + ], | |
| 497 | + ] | |
| 498 | + ); | |
| 499 | + | |
| 500 | + $element->add_control( | |
| 501 | + 'kng_particles_bg_custom_code_guide', | |
| 502 | + [ | |
| 503 | + 'type' => Controls_Manager::RAW_HTML, | |
| 504 | + 'raw' => esc_html__('To create a custom animation, go to ', 'king-addons') . '<a href="https://vincentgarreau.com/particles.js/" target="_blank">' . esc_html__('HERE', 'king-addons') . '</a>, ' . esc_html__('then past the generated JSON code in the field (open the downloaded config file in any text editor).', 'king-addons'), | |
| 505 | + 'separator' => 'before', | |
| 506 | + 'condition' => [ | |
| 507 | + 'kng_particles_bg_switch!' => '', | |
| 508 | + 'kng_particles_bg_type' => 'custom_code' | |
| 509 | + ], | |
| 510 | + ] | |
| 511 | + ); | |
| 512 | + | |
| 513 | + $element->add_control('kng_particles_bg_custom_code', | |
| 514 | + [ | |
| 515 | + 'label' => esc_html__('Custom Code (JSON)', 'king-addons'), | |
| 516 | + 'type' => Controls_Manager::CODE, | |
| 517 | + 'language' => 'json', | |
| 518 | + 'default' => 'CODE_FROM_JSON_FILE', | |
| 519 | + 'frontend_available' => true, | |
| 520 | + 'label_block' => 'true', | |
| 521 | + 'condition' => [ | |
| 522 | + 'kng_particles_bg_switch!' => '', | |
| 523 | + 'kng_particles_bg_type' => 'custom_code' | |
| 524 | + ], | |
| 525 | + ] | |
| 526 | + ); | |
| 527 | + | |
| 528 | + $element->end_controls_section(); | |
| 529 | + } | |
| 530 | + | |
| 531 | + public static function renderAnimation(Element_Base $element): void | |
| 532 | + { | |
| 533 | + if (!empty($element->get_settings_for_display('kng_particles_bg_switch'))) { | |
| 534 | + | |
| 535 | + if (!wp_script_is(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles' . '-' . 'particles')) { | |
| 536 | + wp_enqueue_script(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles' . '-' . 'particles', '', array('jquery'), KING_ADDONS_VERSION); | |
| 537 | + } | |
| 538 | + | |
| 539 | + if (('container' === $element->get_type() || 'section' === $element->get_type()) && 'yes' === $element->get_settings('kng_particles_bg_switch') | |
| 540 | + ) { | |
| 541 | + | |
| 542 | + $settings = $element->get_settings(); | |
| 543 | + $element_ID = $element->get_id(); | |
| 544 | + $type = esc_js($settings['kng_particles_bg_type']); | |
| 545 | + $color = esc_js($settings['kng_particles_bg_color']); | |
| 546 | + $config = ''; | |
| 547 | + | |
| 548 | + switch ($type) { | |
| 549 | + case 'default': | |
| 550 | + $speed = esc_js($settings['kng_particles_bg_anim_speed_default']); | |
| 551 | + $shape_type = esc_js($settings['kng_particles_bg_shape_type']); | |
| 552 | + $move_direction = esc_js($settings['kng_particles_bg_move_direction']); | |
| 553 | + $number = esc_js($settings['kng_particles_bg_number_default']); | |
| 554 | + $size = esc_js($settings['kng_particles_bg_size_default']); | |
| 555 | + $config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type]; | |
| 556 | + break; | |
| 557 | + case 'nasa': | |
| 558 | + $speed = esc_js($settings['kng_particles_bg_anim_speed_nasa']); | |
| 559 | + $shape_type = esc_js($settings['kng_particles_bg_shape_type']); | |
| 560 | + $move_direction = esc_js($settings['kng_particles_bg_move_direction']); | |
| 561 | + $number = esc_js($settings['kng_particles_bg_number_nasa']); | |
| 562 | + $size = esc_js($settings['kng_particles_bg_size_nasa']); | |
| 563 | + $config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type]; | |
| 564 | + break; | |
| 565 | + case 'bubble': | |
| 566 | + $speed = esc_js($settings['kng_particles_bg_anim_speed_bubble']); | |
| 567 | + $shape_type = esc_js($settings['kng_particles_bg_shape_type_bubble']); | |
| 568 | + $move_direction = esc_js($settings['kng_particles_bg_move_direction']); | |
| 569 | + $number = esc_js($settings['kng_particles_bg_number_bubble']); | |
| 570 | + $size = esc_js($settings['kng_particles_bg_size_bubble']); | |
| 571 | + $config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type]; | |
| 572 | + break; | |
| 573 | + case 'snow': | |
| 574 | + $speed = esc_js($settings['kng_particles_bg_anim_speed_snow']); | |
| 575 | + $shape_type = esc_js($settings['kng_particles_bg_shape_type']); | |
| 576 | + $move_direction = esc_js($settings['kng_particles_bg_move_direction_snow']); | |
| 577 | + $number = esc_js($settings['kng_particles_bg_number_snow']); | |
| 578 | + $size = esc_js($settings['kng_particles_bg_size_snow']); | |
| 579 | + $config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type]; | |
| 580 | + break; | |
| 581 | + case 'nyan_cat': | |
| 582 | + $speed = esc_js($settings['kng_particles_bg_anim_speed_nyan_cat']); | |
| 583 | + $shape_type = esc_js($settings['kng_particles_bg_shape_type_nyan_cat']); | |
| 584 | + $move_direction = esc_js($settings['kng_particles_bg_move_direction_nyan_cat']); | |
| 585 | + $number = esc_js($settings['kng_particles_bg_number_nyan_cat']); | |
| 586 | + $size = esc_js($settings['kng_particles_bg_size_nyan_cat']); | |
| 587 | + $config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type]; | |
| 588 | + break; | |
| 589 | + case 'custom_code': | |
| 590 | + $config = $settings['kng_particles_bg_custom_code']; | |
| 591 | + break; | |
| 592 | + } | |
| 593 | + | |
| 594 | + $inline_js_element = "document.querySelector('.elementor-element-" . esc_js($element_ID) . "').insertAdjacentHTML('afterbegin', '" . | |
| 595 | + '<div id="king-addons-particles-container-' . esc_js($element_ID) . '" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: ' . esc_js($settings['kng_particles_bg_z_index']) . ';"></div>' . "');"; | |
| 596 | + | |
| 597 | + $inline_js_config = ''; | |
| 598 | + if (self::is_json($config)) { | |
| 599 | + $inline_js_config = 'document.addEventListener("DOMContentLoaded", function() {' . "particlesJS('king-addons-particles-container-" . esc_js($element_ID) . "'," . $config . ");" . '});'; | |
| 600 | + } | |
| 601 | + | |
| 602 | + $inline_js = $inline_js_element . $inline_js_config; | |
| 603 | + wp_print_inline_script_tag($inline_js); | |
| 604 | + } | |
| 605 | + } | |
| 606 | + } | |
| 607 | + | |
| 608 | + public static function is_json($string): bool | |
| 609 | + { | |
| 610 | + json_decode($string); | |
| 611 | + return (json_last_error() == JSON_ERROR_NONE); | |
| 612 | + } | |
| 613 | + | |
| 614 | + public static function getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size): array | |
| 615 | + { | |
| 616 | + return [ | |
| 617 | + 'default' => '{ | |
| 618 | + "particles": { | |
| 619 | + "number": { | |
| 620 | + "value": ' . $number . ', | |
| 621 | + "density": { | |
| 622 | + "enable": true, | |
| 623 | + "value_area": 800 | |
| 624 | + } | |
| 625 | + }, | |
| 626 | + "color": { | |
| 627 | + "value": "' . $color . '" | |
| 628 | + }, | |
| 629 | + "shape": { | |
| 630 | + "type": "' . $shape_type . '", | |
| 631 | + "stroke": { | |
| 632 | + "width": 0, | |
| 633 | + "color": "#000000" | |
| 634 | + }, | |
| 635 | + "polygon": { | |
| 636 | + "nb_sides": 5 | |
| 637 | + } | |
| 638 | + }, | |
| 639 | + "opacity": { | |
| 640 | + "value": 0.5, | |
| 641 | + "random": false, | |
| 642 | + "anim": { | |
| 643 | + "enable": false, | |
| 644 | + "speed": 1, | |
| 645 | + "opacity_min": 0.1, | |
| 646 | + "sync": false | |
| 647 | + } | |
| 648 | + }, | |
| 649 | + "size": { | |
| 650 | + "value": ' . $size . ', | |
| 651 | + "random": true, | |
| 652 | + "anim": { | |
| 653 | + "enable": false, | |
| 654 | + "speed": 40, | |
| 655 | + "size_min": 0.1, | |
| 656 | + "sync": false | |
| 657 | + } | |
| 658 | + }, | |
| 659 | + "line_linked": { | |
| 660 | + "enable": true, | |
| 661 | + "distance": 150, | |
| 662 | + "color": "' . $color . '", | |
| 663 | + "opacity": 0.4, | |
| 664 | + "width": 1 | |
| 665 | + }, | |
| 666 | + "move": { | |
| 667 | + "enable": true, | |
| 668 | + "speed": ' . $speed . ', | |
| 669 | + "direction": "' . $move_direction . '", | |
| 670 | + "random": false, | |
| 671 | + "straight": false, | |
| 672 | + "out_mode": "out", | |
| 673 | + "bounce": false, | |
| 674 | + "attract": { | |
| 675 | + "enable": false, | |
| 676 | + "rotateX": 600, | |
| 677 | + "rotateY": 1200 | |
| 678 | + } | |
| 679 | + } | |
| 680 | + }, | |
| 681 | + "interactivity": { | |
| 682 | + "detect_on": "canvas", | |
| 683 | + "events": { | |
| 684 | + "onhover": { | |
| 685 | + "enable": false, | |
| 686 | + "mode": "repulse" | |
| 687 | + }, | |
| 688 | + "onclick": { | |
| 689 | + "enable": false, | |
| 690 | + "mode": "push" | |
| 691 | + }, | |
| 692 | + "resize": true | |
| 693 | + }, | |
| 694 | + "modes": { | |
| 695 | + "grab": { | |
| 696 | + "distance": 400, | |
| 697 | + "line_linked": { | |
| 698 | + "opacity": 1 | |
| 699 | + } | |
| 700 | + }, | |
| 701 | + "bubble": { | |
| 702 | + "distance": 400, | |
| 703 | + "size": 40, | |
| 704 | + "duration": 2, | |
| 705 | + "opacity": 8, | |
| 706 | + "speed": 3 | |
| 707 | + }, | |
| 708 | + "repulse": { | |
| 709 | + "distance": 200, | |
| 710 | + "duration": 0.4 | |
| 711 | + }, | |
| 712 | + "push": { | |
| 713 | + "particles_nb": 4 | |
| 714 | + }, | |
| 715 | + "remove": { | |
| 716 | + "particles_nb": 2 | |
| 717 | + } | |
| 718 | + } | |
| 719 | + }, | |
| 720 | + "retina_detect": true | |
| 721 | + }', | |
| 722 | + 'nasa' => '{ | |
| 723 | + "particles": { | |
| 724 | + "number": { | |
| 725 | + "value": ' . $number . ', | |
| 726 | + "density": { | |
| 727 | + "enable": true, | |
| 728 | + "value_area": 800 | |
| 729 | + } | |
| 730 | + }, | |
| 731 | + "color": { | |
| 732 | + "value": "' . $color . '" | |
| 733 | + }, | |
| 734 | + "shape": { | |
| 735 | + "type": "' . $shape_type . '", | |
| 736 | + "stroke": { | |
| 737 | + "width": 0, | |
| 738 | + "color": "#000000" | |
| 739 | + }, | |
| 740 | + "polygon": { | |
| 741 | + "nb_sides": 5 | |
| 742 | + } | |
| 743 | + }, | |
| 744 | + "opacity": { | |
| 745 | + "value": 1, | |
| 746 | + "random": true, | |
| 747 | + "anim": { | |
| 748 | + "enable": true, | |
| 749 | + "speed": 1, | |
| 750 | + "opacity_min": 0, | |
| 751 | + "sync": false | |
| 752 | + } | |
| 753 | + }, | |
| 754 | + "size": { | |
| 755 | + "value": ' . $size . ', | |
| 756 | + "random": true, | |
| 757 | + "anim": { | |
| 758 | + "enable": false, | |
| 759 | + "speed": 4, | |
| 760 | + "size_min": 0.3, | |
| 761 | + "sync": false | |
| 762 | + } | |
| 763 | + }, | |
| 764 | + "line_linked": { | |
| 765 | + "enable": false, | |
| 766 | + "distance": 150, | |
| 767 | + "color": "#ffffff", | |
| 768 | + "opacity": 0.4, | |
| 769 | + "width": 1 | |
| 770 | + }, | |
| 771 | + "move": { | |
| 772 | + "enable": true, | |
| 773 | + "speed": ' . $speed . ', | |
| 774 | + "direction": "' . $move_direction . '", | |
| 775 | + "random": true, | |
| 776 | + "straight": false, | |
| 777 | + "out_mode": "out", | |
| 778 | + "bounce": false, | |
| 779 | + "attract": { | |
| 780 | + "enable": false, | |
| 781 | + "rotateX": 600, | |
| 782 | + "rotateY": 600 | |
| 783 | + } | |
| 784 | + } | |
| 785 | + }, | |
| 786 | + "interactivity": { | |
| 787 | + "detect_on": "canvas", | |
| 788 | + "events": { | |
| 789 | + "onhover": { | |
| 790 | + "enable": false, | |
| 791 | + "mode": "bubble" | |
| 792 | + }, | |
| 793 | + "onclick": { | |
| 794 | + "enable": false, | |
| 795 | + "mode": "repulse" | |
| 796 | + }, | |
| 797 | + "resize": true | |
| 798 | + }, | |
| 799 | + "modes": { | |
| 800 | + "grab": { | |
| 801 | + "distance": 400, | |
| 802 | + "line_linked": { | |
| 803 | + "opacity": 1 | |
| 804 | + } | |
| 805 | + }, | |
| 806 | + "bubble": { | |
| 807 | + "distance": 250, | |
| 808 | + "size": 0, | |
| 809 | + "duration": 2, | |
| 810 | + "opacity": 0, | |
| 811 | + "speed": 3 | |
| 812 | + }, | |
| 813 | + "repulse": { | |
| 814 | + "distance": 400, | |
| 815 | + "duration": 0.4 | |
| 816 | + }, | |
| 817 | + "push": { | |
| 818 | + "particles_nb": 4 | |
| 819 | + }, | |
| 820 | + "remove": { | |
| 821 | + "particles_nb": 2 | |
| 822 | + } | |
| 823 | + } | |
| 824 | + }, | |
| 825 | + "retina_detect": true | |
| 826 | + }', | |
| 827 | + 'bubble' => '{ | |
| 828 | + "particles": { | |
| 829 | + "number": { | |
| 830 | + "value": ' . $number . ', | |
| 831 | + "density": { | |
| 832 | + "enable": true, | |
| 833 | + "value_area": 800 | |
| 834 | + } | |
| 835 | + }, | |
| 836 | + "color": { | |
| 837 | + "value": "' . $color . '" | |
| 838 | + }, | |
| 839 | + "shape": { | |
| 840 | + "type": "' . $shape_type . '", | |
| 841 | + "stroke": { | |
| 842 | + "width": 0, | |
| 843 | + "color": "#000" | |
| 844 | + }, | |
| 845 | + "polygon": { | |
| 846 | + "nb_sides": 6 | |
| 847 | + } | |
| 848 | + }, | |
| 849 | + "opacity": { | |
| 850 | + "value": 0.3, | |
| 851 | + "random": true, | |
| 852 | + "anim": { | |
| 853 | + "enable": false, | |
| 854 | + "speed": 1, | |
| 855 | + "opacity_min": 0.1, | |
| 856 | + "sync": false | |
| 857 | + } | |
| 858 | + }, | |
| 859 | + "size": { | |
| 860 | + "value": ' . $size . ', | |
| 861 | + "random": false, | |
| 862 | + "anim": { | |
| 863 | + "enable": true, | |
| 864 | + "speed": 10, | |
| 865 | + "size_min": 40, | |
| 866 | + "sync": false | |
| 867 | + } | |
| 868 | + }, | |
| 869 | + "line_linked": { | |
| 870 | + "enable": false, | |
| 871 | + "distance": 200, | |
| 872 | + "color": "#ffffff", | |
| 873 | + "opacity": 1, | |
| 874 | + "width": 2 | |
| 875 | + }, | |
| 876 | + "move": { | |
| 877 | + "enable": true, | |
| 878 | + "speed": ' . $speed . ', | |
| 879 | + "direction": "' . $move_direction . '", | |
| 880 | + "random": false, | |
| 881 | + "straight": false, | |
| 882 | + "out_mode": "out", | |
| 883 | + "bounce": false, | |
| 884 | + "attract": { | |
| 885 | + "enable": false, | |
| 886 | + "rotateX": 600, | |
| 887 | + "rotateY": 1200 | |
| 888 | + } | |
| 889 | + } | |
| 890 | + }, | |
| 891 | + "interactivity": { | |
| 892 | + "detect_on": "canvas", | |
| 893 | + "events": { | |
| 894 | + "onhover": { | |
| 895 | + "enable": false, | |
| 896 | + "mode": "grab" | |
| 897 | + }, | |
| 898 | + "onclick": { | |
| 899 | + "enable": false, | |
| 900 | + "mode": "push" | |
| 901 | + }, | |
| 902 | + "resize": true | |
| 903 | + }, | |
| 904 | + "modes": { | |
| 905 | + "grab": { | |
| 906 | + "distance": 400, | |
| 907 | + "line_linked": { | |
| 908 | + "opacity": 1 | |
| 909 | + } | |
| 910 | + }, | |
| 911 | + "bubble": { | |
| 912 | + "distance": 400, | |
| 913 | + "size": 40, | |
| 914 | + "duration": 2, | |
| 915 | + "opacity": 8, | |
| 916 | + "speed": 3 | |
| 917 | + }, | |
| 918 | + "repulse": { | |
| 919 | + "distance": 200, | |
| 920 | + "duration": 0.4 | |
| 921 | + }, | |
| 922 | + "push": { | |
| 923 | + "particles_nb": 4 | |
| 924 | + }, | |
| 925 | + "remove": { | |
| 926 | + "particles_nb": 2 | |
| 927 | + } | |
| 928 | + } | |
| 929 | + }, | |
| 930 | + "retina_detect": true | |
| 931 | + }', | |
| 932 | + 'snow' => '{ | |
| 933 | + "particles": { | |
| 934 | + "number": { | |
| 935 | + "value": ' . $number . ', | |
| 936 | + "density": { | |
| 937 | + "enable": true, | |
| 938 | + "value_area": 800 | |
| 939 | + } | |
| 940 | + }, | |
| 941 | + "color": { | |
| 942 | + "value": "' . $color . '" | |
| 943 | + }, | |
| 944 | + "shape": { | |
| 945 | + "type": "' . $shape_type . '", | |
| 946 | + "stroke": { | |
| 947 | + "width": 0, | |
| 948 | + "color": "#000000" | |
| 949 | + }, | |
| 950 | + "polygon": { | |
| 951 | + "nb_sides": 5 | |
| 952 | + } | |
| 953 | + }, | |
| 954 | + "opacity": { | |
| 955 | + "value": 0.5, | |
| 956 | + "random": true, | |
| 957 | + "anim": { | |
| 958 | + "enable": false, | |
| 959 | + "speed": 1, | |
| 960 | + "opacity_min": 0.1, | |
| 961 | + "sync": false | |
| 962 | + } | |
| 963 | + }, | |
| 964 | + "size": { | |
| 965 | + "value": ' . $size . ', | |
| 966 | + "random": true, | |
| 967 | + "anim": { | |
| 968 | + "enable": false, | |
| 969 | + "speed": 40, | |
| 970 | + "size_min": 0.1, | |
| 971 | + "sync": false | |
| 972 | + } | |
| 973 | + }, | |
| 974 | + "line_linked": { | |
| 975 | + "enable": false, | |
| 976 | + "distance": 500, | |
| 977 | + "color": "#ffffff", | |
| 978 | + "opacity": 0.4, | |
| 979 | + "width": 2 | |
| 980 | + }, | |
| 981 | + "move": { | |
| 982 | + "enable": true, | |
| 983 | + "speed": ' . $speed . ', | |
| 984 | + "direction": "' . $move_direction . '", | |
| 985 | + "random": false, | |
| 986 | + "straight": false, | |
| 987 | + "out_mode": "out", | |
| 988 | + "bounce": false, | |
| 989 | + "attract": { | |
| 990 | + "enable": false, | |
| 991 | + "rotateX": 600, | |
| 992 | + "rotateY": 1200 | |
| 993 | + } | |
| 994 | + } | |
| 995 | + }, | |
| 996 | + "interactivity": { | |
| 997 | + "detect_on": "canvas", | |
| 998 | + "events": { | |
| 999 | + "onhover": { | |
| 1000 | + "enable": false, | |
| 1001 | + "mode": "bubble" | |
| 1002 | + }, | |
| 1003 | + "onclick": { | |
| 1004 | + "enable": false, | |
| 1005 | + "mode": "repulse" | |
| 1006 | + }, | |
| 1007 | + "resize": true | |
| 1008 | + }, | |
| 1009 | + "modes": { | |
| 1010 | + "grab": { | |
| 1011 | + "distance": 400, | |
| 1012 | + "line_linked": { | |
| 1013 | + "opacity": 0.5 | |
| 1014 | + } | |
| 1015 | + }, | |
| 1016 | + "bubble": { | |
| 1017 | + "distance": 400, | |
| 1018 | + "size": 4, | |
| 1019 | + "duration": 0.3, | |
| 1020 | + "opacity": 1, | |
| 1021 | + "speed": 3 | |
| 1022 | + }, | |
| 1023 | + "repulse": { | |
| 1024 | + "distance": 200, | |
| 1025 | + "duration": 0.4 | |
| 1026 | + }, | |
| 1027 | + "push": { | |
| 1028 | + "particles_nb": 4 | |
| 1029 | + }, | |
| 1030 | + "remove": { | |
| 1031 | + "particles_nb": 2 | |
| 1032 | + } | |
| 1033 | + } | |
| 1034 | + }, | |
| 1035 | + "retina_detect": true | |
| 1036 | + }', | |
| 1037 | + 'nyan_cat' => '{ | |
| 1038 | + "particles": { | |
| 1039 | + "number": { | |
| 1040 | + "value": ' . $number . ', | |
| 1041 | + "density": { | |
| 1042 | + "enable": false, | |
| 1043 | + "value_area": 800 | |
| 1044 | + } | |
| 1045 | + }, | |
| 1046 | + "color": { | |
| 1047 | + "value": "' . $color . '" | |
| 1048 | + }, | |
| 1049 | + "shape": { | |
| 1050 | + "type": "' . $shape_type . '", | |
| 1051 | + "stroke": { | |
| 1052 | + "width": 0, | |
| 1053 | + "color": "#000000" | |
| 1054 | + }, | |
| 1055 | + "polygon": { | |
| 1056 | + "nb_sides": 5 | |
| 1057 | + } | |
| 1058 | + }, | |
| 1059 | + "opacity": { | |
| 1060 | + "value": 0.5, | |
| 1061 | + "random": false, | |
| 1062 | + "anim": { | |
| 1063 | + "enable": false, | |
| 1064 | + "speed": 1, | |
| 1065 | + "opacity_min": 0.1, | |
| 1066 | + "sync": false | |
| 1067 | + } | |
| 1068 | + }, | |
| 1069 | + "size": { | |
| 1070 | + "value": ' . $size . ', | |
| 1071 | + "random": true, | |
| 1072 | + "anim": { | |
| 1073 | + "enable": false, | |
| 1074 | + "speed": 40, | |
| 1075 | + "size_min": 0.1, | |
| 1076 | + "sync": false | |
| 1077 | + } | |
| 1078 | + }, | |
| 1079 | + "line_linked": { | |
| 1080 | + "enable": false, | |
| 1081 | + "distance": 150, | |
| 1082 | + "color": "#ffffff", | |
| 1083 | + "opacity": 0.4, | |
| 1084 | + "width": 1 | |
| 1085 | + }, | |
| 1086 | + "move": { | |
| 1087 | + "enable": true, | |
| 1088 | + "speed": ' . $speed . ', | |
| 1089 | + "direction": "' . $move_direction . '", | |
| 1090 | + "random": false, | |
| 1091 | + "straight": true, | |
| 1092 | + "out_mode": "out", | |
| 1093 | + "bounce": false, | |
| 1094 | + "attract": { | |
| 1095 | + "enable": false, | |
| 1096 | + "rotateX": 600, | |
| 1097 | + "rotateY": 1200 | |
| 1098 | + } | |
| 1099 | + } | |
| 1100 | + }, | |
| 1101 | + "interactivity": { | |
| 1102 | + "detect_on": "canvas", | |
| 1103 | + "events": { | |
| 1104 | + "onhover": { | |
| 1105 | + "enable": false, | |
| 1106 | + "mode": "grab" | |
| 1107 | + }, | |
| 1108 | + "onclick": { | |
| 1109 | + "enable": false, | |
| 1110 | + "mode": "repulse" | |
| 1111 | + }, | |
| 1112 | + "resize": true | |
| 1113 | + }, | |
| 1114 | + "modes": { | |
| 1115 | + "grab": { | |
| 1116 | + "distance": 200, | |
| 1117 | + "line_linked": { | |
| 1118 | + "opacity": 1 | |
| 1119 | + } | |
| 1120 | + }, | |
| 1121 | + "bubble": { | |
| 1122 | + "distance": 400, | |
| 1123 | + "size": 40, | |
| 1124 | + "duration": 2, | |
| 1125 | + "opacity": 8, | |
| 1126 | + "speed": 3 | |
| 1127 | + }, | |
| 1128 | + "repulse": { | |
| 1129 | + "distance": 200, | |
| 1130 | + "duration": 0.4 | |
| 1131 | + }, | |
| 1132 | + "push": { | |
| 1133 | + "particles_nb": 4 | |
| 1134 | + }, | |
| 1135 | + "remove": { | |
| 1136 | + "particles_nb": 2 | |
| 1137 | + } | |
| 1138 | + } | |
| 1139 | + }, | |
| 1140 | + "retina_detect": true | |
| 1141 | + }' | |
| 1142 | + ]; | |
| 1143 | + } | |
| 1144 | +} | |