How to add JavaScript library to create moving particles effect



Steps to import JavaScript library to create moving particles effect.

1 . Download particles.js and app.js from below link

particles JS  OR  https://github.com/VincentGarreau/particles.js & https://github.com/VincentGarreau/particles.js/blob/master/demo/js/app.js

 

2. Include particles.js and app.js on your site.

Example :
<script src=”YOURPATH/particles.js”></script>
<script src=”YOURPATH/app.js”></script>

Load below script using “wp_enqueue_scripts” hook. In simple terms, Just put this code in to your child theme’s function.php file.


add_action( 'wp_enqueue_scripts', 'enqueue_assets' );

function enqueue_assets() {

wp_enqueue_script( 'particles', get_stylesheet_directory_uri() . '/js/particles.min.js',array( 'jquery' ),'1.0',true );
wp_enqueue_script( 'particles-app', get_stylesheet_directory_uri() . '/js/app.js',array( 'jquery' ) ,'1.0',true );

}

get_stylesheet_directory_uri() : get child theme path

js : create js folder under child theme

particles.js and app.js : put both scripts on js folder.

For more information

https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

https://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

 

3. Just add  below code OR add id on section/row/module.

<div id=particles-js></div>

Note : You can’t change this id.

 

4. Set CSS base on your site.

 

5. Finally it should look like our Divi resume child theme

Theme Demo :

http://demo.diywithwp.com/diviresumedemo/

CodePen demo:

http://vincentgarreau.com/particles.js/
http://codepen.io/VincentGarreau/pen/pnlso


Source http://demo.diywithwp.com/diviresumedemo/
Contributed by Tuts Directory

Tuts Directory Rating

1




  • The comment section is for blog post/tutorial rating and reviewing purposes only. If you have any questions about a tutorial, please post them in the tutorial publisher's website.

    2
    Leave a Reply

    avatar
    1 Comment threads
    1 Thread replies
    1 Followers
     
    Most reacted comment
    Hottest comment thread
    2 Comment authors
    Mister TutsMohamed Ali Recent comment authors
      Subscribe  
    newest oldest most voted
    Notify of
    Mohamed Ali
    Member

    I need a help with this. I added the function code to my functions PHP, what I didn’t understand was this (get_stylesheet_directory_uri() : get child theme path). can you clearify more on that. Also, I created a folder in my themes folder, and I called it JS, and then I put particles.js and app.js in the folder. What I’m doing wrong. Please.
    I’d appreciate your help on this.
    I’m using Divi theme.

    Mister Tuts
    Admin
    Mister Tuts

    Hi,
    Please follow this tutorial instead of this one. It explains better.
    http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/