Announcement

Collapse
No announcement yet.

particles.js as background?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • particles.js as background?

    hi all—
    trying to figure out how to get the effect of this tut: https://sridharkatakam.com/particles-js-genesis/
    to be the background of all pages of my site? i'll be toning down the colors, but i like the effect. im just not proficient enough with php to know how to hook it into the background (body? site inner? site-container?) instead of just a widget like sridhar does.

    thanks for any insight!


  • #2
    ok ... below
    Last edited by andytc; 09-20-2018, 08:22 PM.

    Comment


    • #3
      Ok , so I've had a closer look and it might be easier than i thought , so here's a run down that works on the genesis sample theme (tested) - hooked into 'site-container'



      Add this into custom-functions to create our ID on .site-inner for Particles JS.

      PHP Code:
      //* Add ID to .site-container for Particles JS
      add_filter('genesis_attr_site-container''pl_attributes_site_container');
      function 
      pl_attributes_site_container($attributes) {
       
      $attributes['id'] .= 'particles-js';
       return 
      $attributes;

      Get the scripts from here - https://vincentgarreau.com/particles.js/

      Download the scripts , add particles.min.js to your /js directory and add this into custom-functions to enqueue the scripts for Particles JS.


      PHP Code:
      //* Enqueue Particles-JS Scripts
      add_action'wp_enqueue_scripts''pl_particles_enqueue_scripts' );
      function 
      pl_particles_enqueue_scripts() {
       
      wp_enqueue_script'particles-min'get_stylesheet_directory_uri() . '/js/particles.min.js', array( 'jquery' ), '1.0.0'true );
       
      wp_enqueue_script'particles-config'get_stylesheet_directory_uri() . '/js/particlesjs-config.js', array( 'jquery' ), '1.0.0'true );


      Add this into your custom-css

      Code:
      #particles-js canvas {
       position: fixed;
       z-index: -1;
       top: 0;
      }
      Create a file named particlesjs-config.js with the following code and save this to the /JS directory in your theme.


      NOTE - you can replace the contents of this file with code from the particle generator at - https://vincentgarreau.com/particles.js/ - just select all your options and click 'Download current config (json)'

      The MUCHO important setting here is that the 'interactivity' must be set to "window" , you can set that in the generator or just change it in the file.

      REASON - we want to use z-index:-1 to have the particles behind any content , but using z-index:-1 without this setting will cause the particles to lose interactivity, so no mouse effects , or with no z-indexing at all we will loose our ability to click links or copy any page text.

      "interactivity": {
      "detect_on": "window", === Must be set to window

      particlesjs-config.js

      Code:
      jQuery(document).ready(function($) {
      
        console.log("Loading particles.js");
      
        particlesJS('particles-js',
      
      // Particles json code starts below -
      // paste the json code from the generator below this comment - to the closing comment
      
      
        {
        "particles": {
          "number": {
            "value": 150,
            "density": {
              "enable": false,
              "value_area": 0
            }
          },
          "color": {
            "value": "#ffffff"
          },
          "shape": {
            "type": "star",
            "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": "window",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "repulse"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 400,
              "line_linked": {
                "opacity": 1
              }
            },
            "bubble": {
              "distance": 100,
              "size": 10,
              "duration": 2,
              "opacity": 8,
              "speed": 3
            },
            "repulse": {
              "distance": 150,
              "duration": 0.4
            },
            "push": {
              "particles_nb": 4
            },
            "remove": {
              "particles_nb": 2
            }
          }
        },
        "retina_detect": true
      }
      
      // Particles json code ends above this comment - end your paste before this comment
      
        );
      });

      Change your CSS background colours on various elements on your page to show the particles , obviously it's not going to show very well on a
      white background ... so change what's needed and/or change the particle colour in the generator.
      Last edited by andytc; 09-22-2018, 11:56 AM.

      Comment


      • #4
        wow, awesome, thanks for this andytc!

        Comment

        Working...
        X