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

…………………………………………………..

Do You Know?

When you get Divi Theme Tutorials Directory Membership you can download ‘Divi Animated Text Module’

Ever seen one of those sites with the fancy rotating texts and had a rush of inspiration on how to use it on a site but didn’t know how get the text to rotate. Well look no further we got you covered in our Divi Animated Text Module. This plugin allows you to add various text animations to create nice looking animated banners.

Live Demo


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.

    Leave a Reply

    2 Comments on "How to add JavaScript library to create moving particles effect"

    Notify of
    avatar
    Sort by:   newest | oldest | most voted
    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

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

    wpDiscuz